/* ==========================================================================
   Brilliant Builders — Design tokens
   Built on the Brilliant Builders identity:
     Gradient #F2903F → #FCBE27  ·  Black #1D1D1B  ·  Montserrat
   Light-first. Three layers:
     1. Primitives      raw brand palette and scales
     2. Semantic        what a value is FOR (--bg, --fg, --accent-text ...)
     3. Section themes  .theme-paper / .theme-dark / .theme-brand remap the
                        semantic layer so every component works on every band.
   ========================================================================== */

:root {
  /* ---- 1. Brand palette --------------------------------------------------- */
  --bb-orange: #F2903F;
  --bb-yellow: #FCBE27;
  --bb-black:  #1D1D1B;
  --bb-gradient: linear-gradient(115deg, #F2903F 0%, #F7A733 52%, #FCBE27 100%);
  /* Gradient for TEXT on light grounds: same hues, deepened to pass 3:1 for large type */
  --bb-gradient-text: linear-gradient(115deg, #D9701A 0%, #C97A08 55%, #BF7F00 100%);
  --bb-gradient-soft: linear-gradient(115deg, rgba(242,144,63,.14), rgba(252,190,39,.14));

  /* Warm neutrals */
  --paper-0:   #FFFFFF;   /* default ground */
  --paper-50:  #F6F5F2;   /* alternate band, cards on white */
  --paper-100: #ECEAE5;   /* sunken, chips */
  --paper-200: #DEDBD4;   /* hairlines on paper */
  --ink-1000: #0B0B0A;
  --ink-950:  #121211;    /* dark stage, footer */
  --ink-900:  #1D1D1B;    /* brand black: primary text */
  --ink-800:  #2B2A28;
  --ink-700:  #3A3936;
  --ink-600:  #5C5A55;    /* secondary text on light (6.5:1) */
  --ink-400:  #8D8A83;
  --ink-300:  #B8B5AE;    /* secondary text on dark (8.3:1) */

  --amber-text: #96500E;  /* accent TEXT on light (5.8:1) */
  --signal-ok:   #1E7A4C;
  --signal-warn: #94520A;
  --signal-crit: #C93C3C;

  /* ---- Type --------------------------------------------------------------- */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  /* Brand guide secondary typeface: eyebrow labels and taglines only. Montserrat stays primary. */
  --font-accent: "Bree Serif", Rockwell, Georgia, serif;
  --font-slogan: var(--font-accent);
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-hero:       clamp(44px, 7.4vw, 108px);
  --fs-display-l:  clamp(32px, 4.8vw, 64px);
  --fs-display-m:  clamp(25px, 3vw, 40px);
  --fs-heading:    clamp(18px, 1.7vw, 22px);
  --fs-body-l:     clamp(17px, 1.4vw, 20px);
  --fs-body:       16.5px;
  --fs-small:      14.5px;
  --fs-caption:    13px;
  --fs-label:      12px;   /* small caps UI text: breadcrumbs, footer headings */
  --fs-eyebrow:    clamp(15px, 1.25vw, 19px);   /* Bree Serif eyebrow labels */
  --measure: 60ch;

  /* ---- Space (4px base) --------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;  --sp-9: 96px;  --sp-10: 144px;
  --section-y: clamp(72px, 10vw, 144px);

  /* ---- Shape, depth, layout ----------------------------------------------- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(29,29,27,.05), 0 8px 24px rgba(29,29,27,.07);
  --shadow-2: 0 30px 70px rgba(29,29,27,.16);
  --shadow-device: 0 40px 80px rgba(29,29,27,.28), 0 10px 24px rgba(29,29,27,.16);
  --max: 1200px;
  --max-wide: 1400px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 68px;

  /* ---- Motion ------------------------------------------------------------- */
  --dur-fast: 180ms;
  --dur: 360ms;
  --dur-slow: 750ms;
  --dur-reveal: 1000ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --stagger: 80ms;

  /* ---- 2. Semantic (light, the default) ----------------------------------- */
  --bg: var(--paper-0);
  --bg-raised: var(--paper-50);
  --bg-sunken: var(--paper-100);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-600);
  --fg-faint: var(--ink-600);
  --border: rgba(29,29,27,.11);
  --border-strong: var(--ink-900);
  --accent-text: var(--amber-text);
  --grad-text: var(--bb-gradient-text);
  --on-accent: var(--bb-black);
  --ok: var(--signal-ok); --warn: var(--signal-warn); --crit: var(--signal-crit);
  --ok-tint: rgba(30,122,76,.1); --warn-tint: rgba(148,82,10,.1);
  --focus: var(--ink-900);
  --tint: rgba(29,29,27,.05);          /* hover wash on the current ground */
  --tint-2: rgba(29,29,27,.07);
  --nav-glass: rgba(255,255,255,.82);  /* nav once scrolled */
  --nav-menu: #FFFFFF;                 /* mobile menu sheet: solid, so big headlines never ghost through */
  color-scheme: light;
}

/* ---- 2b. Dark mode -------------------------------------------------------- */
/* Set on <html> by the script in partials/head.html (light / dark / system). */
:root[data-theme="dark"] {
  --bg: var(--ink-1000);
  --bg-raised: #1B1B19;
  --bg-sunken: #151513;
  --fg: #F6F5F2;
  --fg-muted: var(--ink-300);
  --fg-faint: var(--ink-400);
  --border: rgba(255,255,255,.1);
  --border-strong: rgba(255,255,255,.85);
  --accent-text: var(--bb-yellow);
  --grad-text: var(--bb-gradient);
  --ok: #5BC48C; --warn: #F6A84E; --crit: #F07575;
  --ok-tint: rgba(91,196,140,.14); --warn-tint: rgba(246,168,78,.14);
  --focus: var(--bb-yellow);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-2: 0 30px 70px rgba(0,0,0,.5);
  --tint: rgba(255,255,255,.06);
  --tint-2: rgba(255,255,255,.09);
  --nav-glass: rgba(11,11,10,.8);
  --nav-menu: var(--ink-1000);
  color-scheme: dark;
}

/* ---- 3. Section themes ---------------------------------------------------- */
.theme-paper {
  --bg: var(--paper-50);
  --bg-raised: var(--paper-0);
  --bg-sunken: var(--paper-100);
}
:root[data-theme="dark"] .theme-paper {
  --bg: #161614;
  --bg-raised: #21211F;
  --bg-sunken: #1B1B19;
}
.theme-dark {
  --bg: var(--ink-950);
  --bg-raised: var(--ink-800);
  --bg-sunken: var(--ink-1000);
  --fg: #F6F5F2;
  --fg-muted: var(--ink-300);
  --fg-faint: var(--ink-400);
  --border: rgba(255,255,255,.1);
  --border-strong: rgba(255,255,255,.85);
  --accent-text: var(--bb-yellow);
  --grad-text: var(--bb-gradient);
  --ok: #5BC48C; --warn: #F6A84E; --crit: #F07575;
  --ok-tint: rgba(91,196,140,.14); --warn-tint: rgba(246,168,78,.14);
  --focus: var(--bb-yellow);
  color-scheme: dark;
}
.theme-brand {
  --bg: var(--bb-orange);
  --bg-raised: rgba(255,255,255,.6);
  --bg-sunken: rgba(29,29,27,.08);
  --fg: var(--ink-900);
  --fg-muted: rgba(29,29,27,.8);
  --fg-faint: rgba(29,29,27,.8);
  --border: rgba(29,29,27,.16);
  --border-strong: var(--ink-900);
  --accent-text: var(--ink-900);
  --grad-text: linear-gradient(var(--ink-900), var(--ink-900));
  --focus: var(--ink-900);
}