/* =========================================================================
   tokens.css — Fetchlist (TEMP name) design tokens
   All colours OKLCH. sRGB hex in comments = what renders (checked 2026-10-02).

   CONTRAST TABLE (WCAG 2.x, measured from the hex values, see ART-DIRECTION.md)
   pair                         ratio   use
   ink   on paper               15.45   body text
   ink-soft on paper             7.86   secondary text
   ink   on play  (marigold)     9.92   all text on PLAY
   ink   on train (tomato)       5.84   all text on TRAIN  (ink-soft FAILS here: 2.97, never use)
   ink   on gear  (sky)          9.32   all text on GEAR
   ink   on rest  (periwinkle)   8.10   all text on REST
   ink   on spa   (sage)        10.89   all text on SPA
   paper on any *-deep          ≥6.47   chips / dots / reversed labels
   *-deep on paper              ≥6.47   pillar-coloured text on cream
   RULE: text on a pillar colour is ALWAYS --ink. No exceptions.
   ========================================================================= */

/* ---- fonts: the same 3 Google Fonts families, self-hosted (latin subset, woff2).
   Why not the Google Fonts <link>: it was the whole Lighthouse gap (mobile 85 with it, 99 without),
   because two extra origins land in the first-paint path. Files downloaded from fonts.gstatic.com 2026-10-02.
   Bricolage is trimmed with fontTools: weights 600–800 kept, optical size pinned at 72 (128 KB → 67 KB).
   Astro port: swap these for @fontsource-variable/bricolage-grotesque, @fontsource/caveat-brush,
   @fontsource-variable/commissioner (ask the owner before adding npm packages). ---- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/caveat-brush-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/commissioner-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- primitives: neutrals ---- */
  --paper:      oklch(0.972 0.018 85);   /* #fbf5e8 */
  --paper-2:    oklch(0.935 0.032 82);   /* #f4e8d2 */
  --ink:        oklch(0.235 0.022 50);   /* #271b15 */
  --ink-soft:   oklch(0.42 0.025 55);    /* #584a40 */

  /* ---- primitives: pillars (fill / deep / soft) ---- */
  --play:       oklch(0.835 0.150 78);   /* #febb45 marigold */
  --play-deep:  oklch(0.47 0.095 62);    /* #804d18 */
  --play-soft:  oklch(0.92 0.07 82);     /* #fce1b0 */

  --train:      oklch(0.700 0.175 36);   /* #f76f4b tomato */
  --train-deep: oklch(0.44 0.13 32);     /* #8c2f1f */
  --train-soft: oklch(0.90 0.05 40);     /* #fdd4c6 */

  --gear:       oklch(0.805 0.095 228);  /* #79ccf0 sky */
  --gear-deep:  oklch(0.44 0.08 238);    /* #1f5879 */
  --gear-soft:  oklch(0.92 0.04 228);    /* #caebfa */

  --rest:       oklch(0.775 0.085 282);  /* #adb0eb periwinkle */
  --rest-deep:  oklch(0.44 0.08 282);    /* #4c4c7d */
  --rest-soft:  oklch(0.91 0.04 282);    /* #dcdffc */

  --spa:        oklch(0.850 0.085 140);  /* #b1dca7 cucumber sage */
  --spa-deep:   oklch(0.44 0.07 148);    /* #365d3c */
  --spa-soft:   oklch(0.93 0.045 140);   /* #d9f0d3 */

  /* ---- semantic roles (components use ONLY these) ---- */
  --color-bg:          var(--paper);
  --color-bg-raised:   var(--paper);
  --color-bg-sunken:   var(--paper-2);
  --color-text:        var(--ink);
  --color-text-muted:  var(--ink-soft);
  --color-action-bg:   var(--ink);        /* the one filled action */
  --color-action-text: var(--paper);
  --color-focus:       var(--ink);
  --color-line:        oklch(0.235 0.022 50 / 0.16);

  /* ---- type ---- */
  --font-display: "Bricolage Grotesque", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --font-marker:  "Caveat Brush", "Segoe Print", cursive;
  --font-body:    "Commissioner", ui-sans-serif, system-ui, sans-serif;

  --text-caption: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);  /* 13–14 */
  --text-ui:      clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);     /* 15–16 */
  --text-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* 16–18 */
  --text-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);   /* 18–22 */
  --text-kicker:  clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);     /* 22–36, hero h1 line */
  --text-title:   clamp(2.5rem, 1.6rem + 4vw, 5rem);            /* section titles (marker) */

  /* ---- space (4px base) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter:    clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --page-max:  84rem;

  /* ---- shape ---- */
  --radius-pill: 999px;
  --radius-card: 1.75rem;
  --radius-s:    0.75rem;

  /* ---- elevation ---- */
  --shadow-sticker: 0 1px 0 oklch(0.235 0.022 50 / 0.08), 0 14px 28px -14px oklch(0.235 0.022 50 / 0.45);
  --shadow-float:   0 2px 4px oklch(0.235 0.022 50 / 0.06), 0 20px 40px -20px oklch(0.235 0.022 50 / 0.5);

  /* ---- motion ---- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* spring with ~15% overshoot (character motion only) */
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --dur-ui:     200ms;
  --dur-reveal: 750ms;
  --dur-gag:    1600ms;

  /* ---- layers ---- */
  --z-hero-word: 1;
  --z-hero-dog:  2;
  --z-hero-ui:   3;
  --z-header:    50;
  --z-sheet:     60;
  --z-grain:     70;

  --header-h: 5.5rem;
}

/* mood → pillar mapping. Set data-mood on any container. */
[data-mood="play"]  { --mood: var(--play);  --mood-deep: var(--play-deep);  --mood-soft: var(--play-soft); }
[data-mood="train"] { --mood: var(--train); --mood-deep: var(--train-deep); --mood-soft: var(--train-soft); }
[data-mood="gear"]  { --mood: var(--gear);  --mood-deep: var(--gear-deep);  --mood-soft: var(--gear-soft); }
[data-mood="rest"]  { --mood: var(--rest);  --mood-deep: var(--rest-deep);  --mood-soft: var(--rest-soft); }
[data-mood="spa"]   { --mood: var(--spa);   --mood-deep: var(--spa-deep);   --mood-soft: var(--spa-soft); }

@media (max-width: 60rem) {
  :root { --header-h: 4.25rem; }
}