/* =========================================================================
 * Brand North — Design Tokens (v0.3 — Warm Dark reset)
 * Source: BRAND-BRIEF.md + STYLE-GUIDE.md + plan eager-honking-candy.md
 *
 * Palette: Ink + Bone + Ember. Warm dark, premium hospitality register.
 * Killed: navy-blue, magenta-pink, lime-green, cream-cool.
 * ========================================================================= */

:root {

  /* ---------- Color / raw -------------------------------------------------- */
  --bn-ink:           #0E0E10;
  --bn-ink-2:         #16161A;
  --bn-ink-3:         #1F1F25;
  --bn-ink-4:         #2A2A30;

  --bn-bone:          #F2EDE3;
  --bn-bone-2:        #E6DFCF;
  --bn-bone-mute:     #C9C2B3;

  --bn-ember:         #E5673C;
  --bn-ember-hover:   #C9572F;
  --bn-ember-tint:    rgba(229, 103, 60, 0.10);
  --bn-ember-soft:    rgba(229, 103, 60, 0.04);

  --bn-sage:          #5F8B6E;
  --bn-sage-hover:    #4F7359;
  --bn-sage-tint:     rgba(95, 139, 110, 0.12);

  --bn-mute:          #A39E92;
  --bn-mute-2:        #6B6359;

  --bn-warning:       #E0A752;
  --bn-danger:        #C04A3E;

  /* ---------- Color / semantic (dark default — homepage canon) ----------- */
  --bn-bg:               var(--bn-ink);
  --bn-bg-elevated:      var(--bn-ink-2);
  --bn-bg-hover:         var(--bn-ink-3);
  --bn-bg-overlay:       rgba(14, 14, 16, 0.85);

  --bn-text-primary:     var(--bn-bone);
  --bn-text-secondary:   rgba(242, 237, 227, 0.82);
  --bn-text-tertiary:    rgba(242, 237, 227, 0.58);
  --bn-text-mono-label:  rgba(242, 237, 227, 0.48);

  --bn-accent:           var(--bn-ember);
  --bn-accent-hover:     var(--bn-ember-hover);
  --bn-accent-tint:      var(--bn-ember-tint);
  --bn-accent-soft:      var(--bn-ember-soft);

  --bn-live:             var(--bn-sage);
  --bn-live-tint:        var(--bn-sage-tint);
  --bn-live-border:      rgba(95, 139, 110, 0.32);

  --bn-border-subtle:    rgba(242, 237, 227, 0.08);
  --bn-border-default:   rgba(242, 237, 227, 0.14);
  --bn-border-strong:    rgba(242, 237, 227, 0.26);

  --bn-focus-ring:       0 0 0 2px var(--bn-ember);

  --bn-positive:         var(--bn-sage);

  /* ---------- Type --------------------------------------------------------- */
  --font-display:  'Cabinet Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:     'Cabinet Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-italic:   'Editorial New', 'GT Sectra', Georgia, 'Times New Roman', serif;

  --fs-display-xl:    84px;
  --fs-display-l:     64px;
  --fs-display-m:     48px;
  --fs-h1:            40px;
  --fs-h2:            32px;
  --fs-h3:            24px;
  --fs-h4:            20px;
  --fs-body-l:        18px;
  --fs-body:          16px;
  --fs-body-s:        14px;
  --fs-caption:       13px;
  --fs-mono-label:    12px;
  --fs-mono-body:     14px;
  --fs-mono-micro:    11px;

  --lh-display-xl:    1.06;
  --lh-display-l:     1.08;
  --lh-display-m:     1.16;
  --lh-h1:            1.20;
  --lh-h2:            1.25;
  --lh-h3:            1.33;
  --lh-h4:            1.40;
  --lh-body-l:        1.56;
  --lh-body:          1.625;
  --lh-body-s:        1.57;

  /* Cabinet Grotesk has tighter default metrics; loosen tracking */
  --tracking-tight:   -0.035em;
  --tracking-snug:    -0.018em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.14em;

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  /* ---------- Spacing — 8pt grid ------------------------------------------ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;
  --space-12:  200px;

  --section-pad-y:        var(--space-12);
  --section-pad-y-md:     var(--space-10);
  --section-pad-y-sm:     var(--space-8);

  /* ---------- Radii -------------------------------------------------------- */
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        24px;
  --radius-pill:      999px;

  /* ---------- Borders ------------------------------------------------------ */
  --border-1:         1px;
  --border-2:         2px;

  /* ---------- Shadows ------------------------------------------------------ */
  --shadow-subtle:        0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card:          0 2px 12px rgba(0, 0, 0, 0.16);
  --shadow-elevated:      0 12px 48px rgba(0, 0, 0, 0.28);
  --shadow-ember-glow:    0 0 32px rgba(229, 103, 60, 0.28);
  --shadow-hero:          0 0 160px rgba(229, 103, 60, 0.12);

  /* ---------- Motion ------------------------------------------------------- */
  --ease-out-quart:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  --dur-instant:      120ms;
  --dur-fast:         180ms;
  --dur-base:         240ms;
  --dur-medium:       400ms;
  --dur-slow:         800ms;
  --dur-hero:         1200ms;
  --dur-build:        1600ms;
  --dur-drift:        18000ms; /* hero spire-line drift loop */

  /* ---------- Layout ------------------------------------------------------- */
  --container-narrow:    720px;
  --container-default:   1200px;
  --container-wide:      1440px;
  --container-bleed:     100vw;

  --gutter:              max(24px, 4vw);

  /* ---------- Z-index ------------------------------------------------------ */
  --z-base:          1;
  --z-sticky:        50;
  --z-header:        100;
  --z-overlay:       500;
  --z-modal:         1000;
  --z-toast:         2000;
}

/* ---------- Light theme override (subpages: blog, resources, faq) -------- */
[data-theme="light"] {
  --bn-bg:               var(--bn-bone);
  --bn-bg-elevated:      #FFFFFF;
  --bn-bg-hover:         var(--bn-bone-2);
  --bn-bg-overlay:       rgba(242, 237, 227, 0.88);

  --bn-text-primary:     var(--bn-ink);
  --bn-text-secondary:   var(--bn-mute-2);
  --bn-text-tertiary:    var(--bn-mute);
  --bn-text-mono-label:  var(--bn-mute);

  --bn-border-subtle:    rgba(14, 14, 16, 0.06);
  --bn-border-default:   rgba(14, 14, 16, 0.12);
  --bn-border-strong:    rgba(14, 14, 16, 0.24);
}

/* ---------- Mobile type-scale shrink ------------------------------------- */
@media (max-width: 768px) {
  :root {
    --fs-display-xl:  52px;
    --fs-display-l:   40px;
    --fs-display-m:   32px;
    --fs-h1:          28px;
    --fs-h2:          24px;
    --fs-h3:          20px;
    --section-pad-y:     var(--space-9);
    --section-pad-y-md:  var(--space-8);
    --section-pad-y-sm:  var(--space-7);
  }
}

/* ---------- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}