/* ============================================================
   CanBake · "Thai Tea" — Color tokens
   Raw scales are the ONLY place literal hex lives.
   Semantic roles map to scale stops, per theme (light default,
   .theme-dark scope for dark). Components use semantic roles only.
   Brand accent: Thai Tea (amber-orange). Secondary: Matcha (green).
   Neutrals: Hojicha (warm roasted). All pairings verified WCAG 2.1 AA.
   ============================================================ */

:root {
  /* ---- Raw scale · Hojicha (roasted-tea warm neutrals) ---- */
  --hojicha-0:   #FFFCF6; /* paper / card */
  --hojicha-50:  #F7F1E8; /* canvas */
  --hojicha-100: #ECDDCB; /* hairline border */
  --hojicha-200: #E0CFBA; /* strong border (legacy) */
  --hojicha-300: #C7B198; /* mid neutral / avatar bg */
  --hojicha-400: #A8896C;
  --hojicha-450: #9A7B57; /* interactive/input border — 3.4:1 */
  --hojicha-500: #876444; /* large-text / decorative only */
  --hojicha-600: #6E5236; /* safe muted text — 6.2:1 */
  --hojicha-700: #5D4530; /* secondary text — 6.9:1 */
  --hojicha-800: #3A2A1D; /* primary text / roasted espresso — 12:1 */
  --hojicha-900: #281D14; /* deepest roast / onAccent ink */

  /* ---- Raw scale · Thai Tea (brand accent — creamy iced-tea orange) ---- */
  --thai-tea-100: #FCEAD2; /* accent tint surface */
  --thai-tea-200: #F9CB8A; /* DARK link hover — hover lightens on dark */
  --thai-tea-300: #F2A64F; /* accent · dark theme */
  --thai-tea-500: #E78A2C; /* accent · light theme */
  --thai-tea-600: #D1761A; /* accent pressed */
  --thai-tea-700: #AE6014; /* large-text amber + light focus ring */
  --thai-tea-800: #8A4D10; /* accentText small links — 6.1:1 */
  --thai-tea-900: #743F0C; /* LIGHT link hover — hover deepens on light */

  /* ---- Raw scale · Matcha (secondary accent — stone-ground green) ---- */
  --matcha-50:  #F1F5E7; /* faint tint surface */
  --matcha-100: #E3EBCB; /* secondary tint */
  --matcha-300: #ABC57E; /* secondary · dark theme */
  --matcha-500: #7CA644; /* secondary · light theme */
  --matcha-600: #688F36; /* secondary pressed */
  --matcha-700: #4F7026; /* secondaryText small links — 5.3:1 */
  --matcha-800: #3C5320; /* deep matcha */
  --matcha-900: #2A3B16; /* darkest ceremonial */

  /* Matcha gradient — the signature secondary sweep (whisked light→shade) */
  --matcha-gradient: linear-gradient(135deg, #C7DBA0 0%, #7CA644 50%, #4F7026 100%); /* @kind other */

  /* ---- Raw scale · Functional ---- */
  --caramel-500:  #C8881C; /* warning (light) */
  --caramel-300:  #E6B85C; /* warning (dark) */
  --caramel-700:  #8A5A0F; /* warning ink on soft surface */
  --caramel-tint: #FBEBD2;

  /* ---- Raw scale · Chili (tertiary / error-danger red) ---- */
  --chili-100: #FCE7E5; /* danger tint surface */
  --chili-300: #E5705F; /* tertiary · dark theme */
  --chili-500: #B6392D; /* tertiary · light theme */
  --chili-600: #9E2E23; /* tertiary pressed */
  --chili-700: #8A2017; /* tertiaryText small links — 6.4:1 */
  --chili-800: #6B1810; /* deep chili */
  --chili-900: #491009; /* darkest ember */

  /* Note: success now uses the Matcha scale (was Basil); Basil retired. */

  /* ---- Raw scale · Day-of-week (traditional Thai colour-of-day) ----
     Reference hues only — DO NOT consume these directly. Components use the
     themed --day-* roles below, which tune lightness/saturation per theme.
     The weekday -> hue mapping is culturally fixed and must never be
     re-ordered; dots are always paired with a text weekday label. */
  --day-raw-sun: #FE0000;  /* H 0   */
  --day-raw-mon: #FFFF00;  /* H 60  */
  --day-raw-tue: #FDCCFF;  /* H 298 */
  --day-raw-wed: #7DFF7E;  /* H 120 */
  --day-raw-thu: #FD9900;  /* H 36  */
  --day-raw-fri: #33CCFF;  /* H 195 */
  --day-raw-sat: #9A339A;  /* H 300 */

  /* ============================================================
     Semantic roles — LIGHT (default)
     ============================================================ */
  /* Which theme actually resolved. Assert this at runtime the same way as
     --ds-version: if the UI is in dark mode and this reads "light", the
     .theme-dark class is not on an ancestor and EVERY dark token has silently
     fallen back to its light value. That failure is invisible on tokens whose
     two values are close, and glaring on near-white ones like --fill-subtle. */
  --theme-name: "light"; /* @kind other */

  --bg:             var(--hojicha-50);   /* canvas */
  --surface:        var(--hojicha-0);    /* card */
  --surface-sunken: #FDF9F3;               /* input */
  --surface-raised: #FFFFFF;               /* menu / sheet */
  --surface-reading: #FBF6EE;              /* long-form recipe reading — dimmer than paper to cut glare */

  --border:        var(--hojicha-100);   /* hairline · decorative */
  --border-strong: var(--hojicha-450);   /* interactive / input · 3.4:1 */

  /* Neutral fill one step off the card, in the direction the theme needs.
     Chips, pills, inline code, meta rows. LIGHT steps DOWN from --surface
     toward the canvas; dark steps UP. Not a surface — never put a border on it
     and call it a card.
     NOTE: in light this resolves to the same value as --bg by construction, so
     a chip placed directly on the canvas is invisible. That is correct, not a
     bug — --fill-subtle only reads on --surface; on the canvas use --surface
     for the chip instead. */
  --fill-subtle: var(--hojicha-50);      /* #F7F1E8 */

  /* ---- Switch ----
     State is carried by THUMB POSITION, not colour: that is the non-colour
     signal, and it is why the track fill is not held to 3:1 against the
     surface (a native iOS switch does not meet that either, and chasing it
     produces a muddy control). What DOES have to hold is the thumb's EDGE —
     a light thumb on a light off-track is 2.16:1 and disappears — so the thumb
     always draws --switch-thumb-ring. Never hard-code a knob colour. */
  --switch-thumb:      var(--hojicha-0);       /* #FFFCF6 */
  --switch-thumb-ring: rgba(43, 33, 26, 0.22); /* thumb edge · 3.03:1 worst case */
  --switch-track-off:  #B9ACA3;
  --switch-track-on:   var(--accent);

  /* ---- Day-of-week dots — LIGHT ----
     Decorative under 1.4.11 (a text label always sits beside them), so 3:1 is
     a visibility decision, not a compliance one. Hue is held; lightness (and
     saturation, where a pure-lightness move would land on neon) is tuned until
     the dot clears 3:1. Ratios are the worst case across light surfaces, which
     is --bg #F7F1E8: these are dark dots, so contrast RISES on --surface /
     -raised. Tune against --bg's REAL value — an earlier pass used #f8f4ef and
     landed the whole set ~0.08 short. */
  --day-sun: #FE0000;  /* 3.59:1 */
  --day-mon: #8E8E00;  /* 3.11:1 · H 60,  S 100% held, L 0.50  -> 0.278 */
  --day-tue: #D551DA;  /* 3.11:1 · H 298, S 100 -> 65%, L 0.90  -> 0.586 */
  --day-wed: #129F12;  /* 3.12:1 · H 120, S 100 -> 80%, L 0.745 -> 0.346 */
  --day-thu: #C57600;  /* 3.14:1 · H 36,  S 100% held, L 0.496 -> 0.386 */
  --day-fri: #0093C4;  /* 3.13:1 · H 195, S 100% held, L 0.60  -> 0.384 */
  --day-sat: #9A339A;  /* 5.64:1 */
  --day-off: #A7825B;  /* 3.12:1 · colour-of-day switched off */

  /* Ring drawn around every day dot. Guarantees a visible edge no matter what
     surface the dot sits on — it must contrast with the SURFACE, so it flips
     per theme. Never hard-code this value in a component. */
  --dot-ring: rgba(43, 33, 26, 0.12);

  --text-primary:   var(--hojicha-800);  /* 12.2:1 */
  --text-secondary: var(--hojicha-700);  /* 6.9:1 */
  --text-tertiary:  var(--hojicha-600);  /* 6.2:1 */
  --text-reading:   var(--hojicha-700);  /* long-form body ink — softer than espresso, still AA (~6.7:1 on surface-reading) */
  --text-inverse:   #FFF7EE;               /* on dark CTA */

  --accent:         var(--thai-tea-500);      /* fills/icons/large only */
  --accent-pressed: var(--thai-tea-600);
  --on-accent:      var(--hojicha-900);  /* ink on amber · 6.9:1 */
  --accent-text:    var(--thai-tea-800);      /* small links · 5.8:1 */
  --accent-tint:    var(--thai-tea-100);
  /* Border for accent-tinted surfaces (selected chips, active nav items).
     A NAMED stop, not an alpha derived from --accent: a derived value drifts
     when the accent moves, and one alpha over two surfaces gives two colours. */
  --accent-tint-border: var(--thai-tea-200);

  /* Skeleton placeholder fill — reads as "a shape will be here", not as a
     surface. Pairs with the tt-skeleton breath. */
  --skeleton-fill: var(--hojicha-100);

  /* Secondary (Matcha) — pairs with the Thai Tea accent */
  --secondary:          var(--matcha-500);   /* fills/icons/large only */
  --secondary-pressed:  var(--matcha-600);
  --on-secondary:       #101A08;             /* 6.30:1 on --secondary, 4.75:1 on --secondary-pressed.
                                                White was 2.84:1 — matcha-500 is a mid-value
                                                green, so its ink must be DARK in both themes. */
  --secondary-text:     var(--matcha-700);   /* small links · 5.3:1 */
  --secondary-tint:     var(--matcha-100);
  --secondary-surface:  #D3E0AF;   /* soft border around a matcha-tint surface */
  --secondary-gradient: var(--matcha-gradient); /* @kind other */

  --primary-action: var(--hojicha-800);  /* CTA fill (espresso) */
  --on-primary:     #FFF7EE;

  --focus-ring:     var(--thai-tea-700);      /* 3.5:1 */
  --scrim:          rgba(28, 20, 14, 0.45);

  /* ---- Hover (WEB ONLY) ----
     A web-only tier: this system was authored for touch, where press is the
     canonical feedback. Every hover rule must sit inside
       @media (hover: hover) and (pointer: fine)
     or a tapped control keeps its hover fill on touch laptops (sticky hover).

     Rules: hover never carries information press/focus doesn't; hover is never
     a focus substitute; no elevation, border or movement change on hover.

     --hover-surface is the neutral shift for interactive cards/rows: one step
     off the card in the direction the theme needs (light steps DOWN toward the
     canvas, dark steps UP) — the same direction rule as --fill-subtle.

     --hover-link DEEPENS on light and LIGHTENS on dark, so hover always RAISES
     contrast. (thai-tea-600 was proposed for both; it measures 2.96:1 on light
     surfaces — below AA for small text — and *lowers* dark links from 7.54:1
     to 4.61:1. Hover must never cost contrast.) */
  --hover-surface:      var(--bg);            /* interactive card/row fill */
  --hover-link:         var(--thai-tea-900);  /* 7.61:1 worst case */
  --hover-fill-opacity: 0.92;                 /* filled controls · press is 0.8 */

  --success:        var(--matcha-700);   /* matcha green — 4.6:1 on success-tint */
  --success-tint:   var(--matcha-100);
  --warning:        var(--caramel-500);
  --warning-tint:   var(--caramel-tint);

  /* Tertiary (Chili) — the error/danger red, third functional color */
  --tertiary:          var(--chili-500);
  --tertiary-pressed:  var(--chili-600);
  --on-tertiary:       #FFF7EE;
  --tertiary-text:     var(--chili-700);   /* small error text · 6.4:1 */
  --tertiary-tint:     var(--chili-100);
  --danger:         var(--tertiary);
  --on-danger:      #FFF7EE;
  --danger-surface: var(--tertiary-tint);

  /* Status roles — each family is FOUR roles, all four present, same shape:
       --<name>          base hue (icons, dots, bar fills)
       --<name>-fill     solid fill  (+ --on-<name> ink)
       --<name>-surface  soft tint   (+ --<name>-ink text)
       --<name>-ink      text ON that surface
     Ink is always "-ink", never "-text": --text-* is the neutral type ramp and
     a coloured family never joins it. Pair -surface with -ink and nothing else. */
  --positive:         var(--matcha-700);
  --positive-fill:    var(--matcha-700);  /* solid · white text */
  --on-positive:      #FFFFFF;
  --positive-surface: var(--matcha-100);  /* soft · --positive-ink text */
  --positive-ink:     var(--matcha-700);  /* 4.6:1 on surface */

  --negative:         var(--chili-500);
  --negative-fill:    var(--chili-500);   /* solid · light text */
  --on-negative:      #FFF7EE;
  --negative-surface: var(--chili-100);   /* soft */
  --negative-ink:     var(--chili-700);   /* 6.4:1 on surface */

  --warning-fill:     var(--caramel-500); /* solid · dark ink (amber fails white) */
  --on-warning:       #2E2207;
  --warning-surface:  var(--caramel-tint);/* soft */
  --warning-ink:      var(--caramel-700); /* readable amber on soft surface */

  /* Glass (liquid chrome — canonical values live in the app's
     components/navigation/glassSurface.ts, feature 026 three-tier system:
     native iOS-26 Liquid Glass -> BlurView recipe -> solid fallback).
     --glass-tint is the fill layered OVER a live blur/glass layer, which is
     why it is far lighter than the old 0.72 standalone value (026 drift fix);
     --glass-native-tint is the GlassView tintColor on the native tier. */
  --glass-tint:        rgba(248, 244, 239, 0.35); /* = GLASS_SURFACE */
  --glass-native-tint: rgba(248, 244, 239, 0.4);  /* = GLASS_NATIVE_TINT */
  --glass-border:      rgba(255, 255, 255, 0.6);  /* = GLASS_BORDER */
  --glass-hairline:    rgba(59, 44, 33, 0.05);    /* = GLASS_HAIRLINE */
  --glass-sheen:       rgba(255, 255, 255, 0.45); /* = GLASS_SHEEN start */
  --glass-fallback:    rgba(248, 244, 239, 0.96); /* = GLASS_SOLID (reduce-transparency) */

  /* Elevation shadow ink */
  --shadow-ink: 43, 33, 26; /* rgb of #2B211A for rgba() shadows */
}

/* ============================================================
   Semantic roles — DARK  (apply .theme-dark on a wrapper)
   ============================================================ */
.theme-dark {
  --theme-name: "dark"; /* @kind other */

  --bg:             #1A140F;   /* warm near-black */
  --surface:        #241B14;
  --surface-sunken: #1F1711;
  --surface-raised: #2E231A;
  --surface-reading: #20180F;  /* low-glare reading panel for night baking */

  --border:        #3A2D22;
  --border-strong: #86694C;    /* 3.3:1 */

  --fill-subtle: var(--surface-raised);   /* #2E231A · steps UP from the card */

  /* Switch — see the light block for why the track is not held to 3:1.
     The ring matters MORE here: the dark thumb on the accent on-track is
     1.71:1 and would otherwise vanish. */
  --switch-thumb:      #F4EADD;
  --switch-thumb-ring: rgba(0, 0, 0, 0.42);  /* 4.61:1 vs thumb on the on-track */
  --switch-track-off:  #4A3F35;
  --switch-track-on:   var(--accent);

  /* ---- Day-of-week dots — DARK ----
     The traditional bright values already clear 3:1 on charcoal, so dark keeps
     them. Ratios below are the WORST case across dark surfaces (--surface-raised
     #2E231A), not --bg: these are bright dots on dark, so contrast FALLS as the
     surface lightens, and day dots render inside cards and sheets. */
  --day-sun: #FE0000;  /* 3.79:1 */
  --day-mon: #FFFF00;  /* 14.2:1 */
  --day-tue: #FDCCFF;  /* 11.1:1 */
  --day-wed: #7DFF7E;  /* 12.0:1 */
  --day-thu: #FD9900;  /* 7.07:1 */
  --day-fri: #33CCFF;  /* 8.15:1 */
  --day-sat: #BF40BF;  /* 3.43:1 · H 300, S 50% held, L 0.402 -> 0.50 */
  --day-off: #4A3F35;  /* matches switchTrackOff · visibility only, no target */

  --dot-ring: rgba(255, 255, 255, 0.22);

  --text-primary:   #F4EADD;   /* 15.3:1 */
  --text-secondary: #D9C7B2;   /* 11.1:1 */
  --text-tertiary:  #B09A82;   /* 6.8:1 */
  --text-reading:   #E7DAC9;   /* gentle warm reading ink on the dark reading panel */
  --text-inverse:   #2B211A;

  --accent:         var(--thai-tea-300);
  --accent-pressed: var(--thai-tea-500);
  --on-accent:      #241B14;   /* 9.2:1 */
  --accent-text:    var(--thai-tea-300);
  --accent-tint:    rgba(242, 166, 79, 0.16);
  --accent-tint-border: rgba(242, 166, 79, 0.34);

  --skeleton-fill: #33271D;

  /* Secondary (Matcha) — dark */
  --secondary:          var(--matcha-300);
  --secondary-pressed:  var(--matcha-500);
  --on-secondary:       #1B2410;
  --secondary-text:     var(--matcha-300);
  --secondary-tint:     rgba(124, 166, 68, 0.18);
  --secondary-surface:  rgba(124, 166, 68, 0.34);   /* soft border around a matcha-tint surface */
  --secondary-gradient: linear-gradient(135deg, #4F7026 0%, #7CA644 100%); /* @kind other */

  --primary-action: var(--thai-tea-500); /* dark CTA flips to accent fill */
  --on-primary:     #241B14;

  --focus-ring:     var(--thai-tea-300); /* 9.2:1 */
  --scrim:          rgba(0, 0, 0, 0.6);

  /* Hover — see the light block. Dark steps UP off the card and LIGHTENS the
     link, so hover raises contrast in this theme too. */
  --hover-surface: var(--surface-raised);   /* #2E231A */
  --hover-link:    var(--thai-tea-200);     /* 10.16:1 worst case */

  --success:        var(--matcha-300);
  --warning:        var(--caramel-300);

  /* Tertiary (Chili) — dark */
  --tertiary:          var(--chili-300);   /* solid fills · unchanged */
  --tertiary-pressed:  var(--chili-500);
  --on-tertiary:       #241B14;
  /* Danger INK. chili-300 composited on its own 0.16 tint is 4.32:1 on
     --surface and 3.93:1 on --surface-raised — the only failing pair in the
     palette. Lightened until it clears AA on every dark surface: 5.19:1 on
     --surface, 4.73:1 worst case on --surface-raised, 6.59:1 on plain surface.
     Do NOT collapse this into --tertiary, which stays chili-300 for fills. */
  --tertiary-text:     #EC8577;
  --tertiary-tint:     rgba(229, 112, 95, 0.16);
  --danger:         var(--tertiary);
  --on-danger:      #241B14;
  --danger-surface: var(--tertiary-tint);

  /* Status roles — dark. Same four-role shape as light. */
  --positive:         var(--matcha-300);
  --positive-fill:    var(--matcha-300);
  --on-positive:      #14210B;
  --positive-surface: rgba(124, 166, 68, 0.18);
  --positive-ink:     var(--matcha-300);     /* re-measured: 5.99:1 worst case ✓ */

  --negative:         var(--chili-300);
  --negative-fill:    var(--chili-300);
  --on-negative:      #241B14;
  --negative-surface: rgba(229, 112, 95, 0.16);
  --negative-ink:     var(--tertiary-text);  /* #EC8577 — see --tertiary-text */

  --warning-fill:     var(--caramel-300);
  --on-warning:       #241B14;
  --warning-surface:  rgba(230, 184, 92, 0.16);
  --warning-ink:      var(--caramel-300);    /* re-measured: 5.83:1 worst case ✓ */

  --glass-tint:        rgba(36, 27, 20, 0.66);
  --glass-native-tint: rgba(36, 27, 20, 0.72);
  --glass-border:      rgba(255, 255, 255, 0.10);
  --glass-hairline:    rgba(255, 255, 255, 0.10);
  --glass-sheen:       rgba(255, 255, 255, 0.06);
  --glass-fallback:    rgba(36, 27, 20, 0.92);

  --shadow-ink: 0, 0, 0;
}