/* ============================================================================
   KevsCasa v2 Design Tokens  ·  "Warm Key" theme  ·  Fable pass (2026-07-03)
   ----------------------------------------------------------------------------
   Identity: a capable friend helping you through a stressful search.
   Warm paper ground, deep keystone teal, clay accent. Light-first per
   PRODUCT.md anti-references (dark dashboard aesthetic is banned as the
   DEFAULT); dark theme provided and verified for evening use.

   Type: Bricolage Grotesque (display, variable 200-800) + Figtree (UI/body,
   variable 300-900). Both SIL OFL, self-hosted (fonts/<family>/OFL.txt).
   Distinct from DCC (Merriweather + Source Sans 3), Clarity (Atkinson),
   Career Coach / aaron-patzalek (DM Serif + DM Sans / Inter), and the
   current KevsCasa v1 (Inter).

   --------------------------------------------------------------------------
   VERIFIED WCAG 2.2 AA CONTRAST (computed 2026-07-03, Python sRGB)
   --------------------------------------------------------------------------
   LIGHT
     text        #22302C on bg #FAF8F5        12.97:1 (AAA)
     text        #22302C on surface #FFFFFF   13.75:1 (AAA)
     text-light  #51625C on bg                 6.09:1 (AA+)
     primary     #0F6A5E on white              6.47:1 (AA+)
     white       on primary #0F6A5E            6.47:1 (AA+)  <- buttons
     accent-deep #9A4419 on #FBEEE6            5.75:1 (AA+)
     success-deep #1D5B38 on #E7F3EB           7.07:1 (AAA)
     warning-deep #7A5200 on #FCF3DC           6.26:1 (AA+)
     error       #B42318 on white              6.57:1 (AA+)
   DARK
     text        #EBF1EE on bg #121B18        15.35:1 (AAA)
     text        #EBF1EE on surface #1B2723   13.48:1 (AAA)
     text-light  #A9BCB4 on surface            7.74:1 (AAA)
     primary     #7FD0BE on bg                 9.76:1 (AAA)
     white       on button #0F6A5E             6.47:1 (AA+)
     accent-deep #F5C8AC on #3A2417            9.51:1 (AAA)
     success-deep #9FD8B4 on #16301F           8.77:1 (AAA)
     warning-deep #F2D48C on #35290C           9.89:1 (AAA)
     error       #F5A9A0 on bg                 9.25:1 (AAA)
   ========================================================================== */

/* --- Self-hosted variable fonts (paths relative to this file) ------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque/bricolage-grotesque-var-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque/bricolage-grotesque-var-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree/figtree-var-latin.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree/figtree-var-latin-ext.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* --- Surfaces ------------------------------------------------------------ */
  --color-bg:              #FAF8F5; /* warm paper */
  --color-surface:         #FFFFFF; /* cards */
  --color-surface-alt:     #F1EDE6; /* chips, subtle fills */
  --color-surface-primary: #E4F0ED; /* teal-tinted fill */

  /* --- Brand: keystone teal ------------------------------------------------ */
  --color-primary:          #0F6A5E; /* 6.5:1 vs white */
  --color-primary-hover:    #0B5248;
  --color-primary-active:   #083E37;
  --color-primary-light:    #E4F0ED;
  --color-primary-contrast: #FFFFFF;

  /* --- Accent: warm clay. Fills and trims decorative; TEXT uses -deep. ----- */
  --color-accent:          #D96D3F; /* decorative only on light */
  --color-accent-light:    #FBEEE6;
  --color-accent-deep:     #9A4419; /* 5.75:1 on accent-light, 6.5:1 on white */

  /* --- Text ------------------------------------------------------------------ */
  --color-text:            #22302C; /* green-cast near-black */
  --color-text-light:      #51625C; /* meta/captions only, 6.1:1 on bg */
  --color-text-inverse:    #FFFFFF;
  --color-text-link:       #0F6A5E;
  --color-text-link-hover: #0B5248;

  /* --- Structure --------------------------------------------------------------- */
  --color-border:          #DFD9CF;
  --color-border-strong:   #B9B1A3;
  --color-divider:         #E8E3DA;

  /* --- State ----------------------------------------------------------------- */
  --color-success:         #2E7D4F;
  --color-success-light:   #E7F3EB;
  --color-success-deep:    #1D5B38; /* 7.1:1 on success-light */
  --color-warning-light:   #FCF3DC;
  --color-warning-deep:    #7A5200; /* 6.3:1 on warning-light */
  --color-error:           #B42318; /* 6.6:1 on white */
  --color-error-light:     #FDECEA;
  --color-info-light:      #E4F0ED;

  /* --- Rank + verification semantics ----------------------------------------- */
  --color-rank-bg:         #0F6A5E;
  --color-rank-text:       #FFFFFF;
  --color-verified-bg:     var(--color-success-light);
  --color-verified-text:   var(--color-success-deep);
  --color-unverified-bg:   var(--color-warning-light);
  --color-unverified-text: var(--color-warning-deep);
  --color-blocked-bg:      #F1ECFA;
  --color-blocked-text:    #5B3E96; /* 7.0:1 on blocked-bg */

  --color-scrim:           rgba(18, 27, 24, 0.5);

  /* --- Typography -------------------------------------------------------------- */
  --font-display:          'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:             'Figtree', 'Segoe UI', system-ui, sans-serif;

  --font-size-base:        17px;
  --font-size-sm:          15px;
  --font-size-caption:     13.5px;
  --font-size-h1:          clamp(34px, 3.4vw + 20px, 52px);
  --font-size-h2:          clamp(25px, 1.8vw + 17px, 32px);
  --font-size-h3:          21px;
  --font-size-lead:        clamp(18px, 1vw + 15px, 21px);

  --line-height-tight:     1.15;
  --line-height-body:      1.6;

  /* --- Spacing (4px base) --------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* --- Radius ---------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Shadows ---------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(34, 48, 44, 0.08);
  --shadow-md: 0 3px 12px rgba(34, 48, 44, 0.10);
  --shadow-lg: 0 8px 28px rgba(34, 48, 44, 0.14);

  /* --- Motion ------------------------------------------------------------------ */
  --motion-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-duration-1: 120ms;
  --motion-duration-2: 220ms;

  /* --- Focus ring (visible on both teal and paper) ------------------------------ */
  --focus-ring: 3px solid #9A4419;
  --focus-ring-offset: 2px;

  /* --- Touch + layout ------------------------------------------------------------ */
  --tap-target-min: 44px;
  --container-max:  1040px;
  --content-max:    68ch;
}

/* ============================================================================
   DARK THEME  ·  html[data-theme="dark"]  ·  every pair verified 4.5:1+
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:              #121B18;
  --color-surface:         #1B2723;
  --color-surface-alt:     #24332E;
  --color-surface-primary: #1D3630;

  --color-primary:          #7FD0BE; /* headings/links on dark, 9.8:1 */
  --color-primary-hover:    #A2DECF;
  --color-primary-active:   #C2EADF;
  --color-primary-light:    #1D3630;
  --color-primary-contrast: #121B18;

  --color-accent:          #F0A57C;
  --color-accent-light:    #3A2417;
  --color-accent-deep:     #F5C8AC; /* 9.5:1 on accent-light */

  --color-text:            #EBF1EE;
  --color-text-light:      #A9BCB4; /* 7.7:1 on surface */
  --color-text-inverse:    #121B18;
  --color-text-link:       #7FD0BE;
  --color-text-link-hover: #A2DECF;

  --color-border:          #34453F;
  --color-border-strong:   #4C6159;
  --color-divider:         #2A3934;

  --color-success-light:   #16301F;
  --color-success-deep:    #9FD8B4;
  --color-warning-light:   #35290C;
  --color-warning-deep:    #F2D48C;
  --color-error:           #F5A9A0;
  --color-error-light:     #3A1712;
  --color-info-light:      #1D3630;

  --color-rank-bg:         #0F6A5E; /* solid teal chip keeps white numeral, 6.5:1 */
  --color-rank-text:       #FFFFFF;
  --color-blocked-bg:      #2C2340;
  --color-blocked-text:    #CBB8F2;

  --color-scrim:           rgba(0, 0, 0, 0.65);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);

  --focus-ring: 3px solid #F0A57C;
}

/* Solid buttons are theme-independent: white on #0F6A5E is 6.5:1 anywhere. */
:root, html[data-theme="dark"] {
  --color-btn-primary-bg:    #0F6A5E;
  --color-btn-primary-text:  #FFFFFF;
  --color-btn-primary-hover: #0B5248;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-1: 0ms;
    --motion-duration-2: 0ms;
  }
}