/* assets/css/tokens.css — Remy Research design tokens.
   Source of truth: docs/design/2026-10-05-shop-design-direction.md §2 (names and values verbatim).
   This is the ONLY stylesheet allowed to carry raw colour values — scripts/design-drift-check.js fails any other hex
   under assets/css/. Everything else (global.css base layer, components, the folded research-desk pages) reads var().
   Theme: dark is the default on :root REGARDLESS of OS preference (DD §2.2). Light applies only when
   html[data-theme="light"] is set (persisted toggle / the folded pages' inline bootstrap). No prefers-color-scheme guard. */

/* ── 2.1 Colour — dark (default) ─────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg: #080808;                        /* page ground */
  --surface-1: #0e0e0e;                 /* cards, drawers */
  --surface-2: #141414;                 /* raised cards, inputs */
  --surface-3: #1a1a1a;                 /* hover lift, table header */
  --proof: #120d13;                     /* COA / proof panels — dark in BOTH themes */
  --text: #f4f1f2;                      /* primary text */
  --text-2: #bdbdbd;                    /* secondary text */
  --text-3: #8a8a90;                    /* captions, placeholders (AA at 14px+) */
  --brand: #db266c;                     /* fills, icons, borders, selection — never running text on dark */
  --brand-hover: #c01f5c;               /* button hover fill */
  --brand-text: #ff5a9e;                /* pink TEXT on dark surfaces */
  --brand-soft: rgba(219,38,108,.14);   /* tinted chips, selected tier */
  --ok: #2ec266;                        /* in-stock text/dot */
  --ok-fill: #107f38;                   /* success button fill (white text) */
  --ok-vivid: #00e676;                  /* savings pill fill */
  --ok-vivid-ink: #04130a;              /* ink on --ok-vivid (DD §2.1 value; name added here) */
  --warn: #f0a030;                      /* low stock */
  --warn-tint: rgba(240,160,48,.12);    /* banner tint behind --warn text (name + dark value added here) */
  --error: #ff7b7b;                     /* validation */
  --error-tint: rgba(255,123,123,.12);  /* banner tint behind --error text (name + dark value added here) */
  --line: rgba(255,255,255,.08);        /* hairlines */
  --line-2: rgba(255,255,255,.14);      /* input borders, hover borders */
  --control-line: rgba(255,255,255,.36); /* interactive boundaries (WCAG 1.4.11): 3.2:1 on --bg, 3.3:1 on --surface-1/2 */
  --focus: #ff5a9e;                     /* 2px ring + 2px offset, everywhere */
  /* Fixed-polarity colours (DD §2.1/§2.2 use them without naming them): */
  --on-brand: #ffffff;                  /* text on --brand / --brand-hover / --ok-fill */
  --on-proof: #f4f1f2;                  /* text on --proof panels (dark in both themes) */
  --on-proof-2: #bdbdbd;                /* secondary text on --proof */
  --on-proof-link: #ff5a9e;             /* pink text on --proof */
  --scrim: rgba(0,0,0,.82);             /* lightbox / drawer scrim (DD §4: 82 %) */
  --bar: rgba(8,8,8,.96);               /* E3 sticky bars: ground at 96 % */
  /* RGB channel triplets for the legacy alpha "veils" in global.css: rgb(var(--x-rgb) / a) flips with the theme. */
  --ground-rgb: 8 8 8;                  /* page ground: nav / sticky-bar / panel backgrounds */
  --surface-1-rgb: 14 14 14;            /* surface-1 panels */
  --surface-3-rgb: 24 24 24;            /* surface-3 insets, separators */
  --ink-rgb: 248 248 248;               /* "white" veils: hairlines, lifts, muted text on the ground */
  --shade-rgb: 8 8 8;                   /* scrims and shadows (stay dark ink in light: DD --scrim) */

  /* ── 2.5 Elevation (dark) ── */
  --shadow-e1: 0 8px 24px rgba(0,0,0,.35);
  --shadow-e2: 0 24px 64px rgba(0,0,0,.55);
  --shadow-e3: 0 -8px 24px rgba(0,0,0,.35);
  --glow-brand: 0 18px 50px rgba(219,38,108,.3);   /* primary CTA :active only */
}

/* ── 2.2 Colour — light (user toggle, persisted; also the print theme) ───── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #faf7f8;
  --surface-1: #ffffff;
  --surface-2: #f6ebf0;
  --surface-3: #efe3e9;
  --proof: #120d13;
  --text: #1f1720;
  --text-2: #5f5260;
  --text-3: #75687a;                    /* PDP review P3-2: 4.9:1 on --bg (was #7d707e, 4.39:1) */
  --brand: #db266c;
  --brand-hover: #b81f5b;
  --brand-text: #b81f5b;
  --brand-soft: #fcf1f5;
  --ok: #0f6b30;
  --ok-fill: #107f38;
  --warn: #8a5200;
  --warn-tint: #fff7e8;
  --error: #b3261e;
  --error-tint: #fdecec;
  --line: #e6dde1;
  --line-2: #c9bcc3;
  --control-line: #887c83;              /* 3.7:1 on --bg, 4.0:1 on #fff, 3.4:1 on --surface-2, 3.2:1 on --surface-3 */
  --focus: #db266c;                     /* DD §2.2 names no light ring; brand ring = 4.38:1 on --bg, 4.66:1 on white (≥3:1 non-text) */
  --scrim: rgba(31,23,32,.82);
  --bar: rgba(250,247,248,.96);
  --ground-rgb: 250 247 248;
  --surface-1-rgb: 255 255 255;
  --surface-3-rgb: 239 227 233;
  --ink-rgb: 31 23 32;
  --shade-rgb: 31 23 32;
  --shadow-e1: 0 8px 24px rgba(31,23,32,.10);
  --shadow-e2: 0 24px 64px rgba(31,23,32,.16);
  --shadow-e3: 0 -8px 24px rgba(31,23,32,.12);
}
/* ── 2.3 Typography — fluid scale (375 → 1440) ───────────────────────────── */
:root {
  --fs-display: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);        /* 40 → 72  Cormorant 300, 1.02, −.015em */
  --fs-h1: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);             /* 32 → 56  Cormorant 400, 1.05, −.01em */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);         /* 26 → 40  Cormorant 400, 1.1 */
  --fs-h3: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);           /* 20 → 24  Outfit 500, 1.25 */
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.125rem);       /* 17 → 18  Outfit 300, 1.6 */
  --fs-body: 1rem;                                          /* 16       Outfit 400, 1.65 */
  --fs-small: .875rem;                                      /* 14       Outfit 400, 1.5 */
  --fs-micro: .75rem;                                       /* 12       DM Mono 400, 1.4, +.02em */
  --fs-label: .6875rem;                                     /* 11       DM Mono 500, uppercase, +.12em */
  --fs-price: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);       /* 28 → 40  DM Mono 500, tabular */
  --fs-price-card: 1.125rem;                                /* 18       DM Mono 500, tabular */
  --fs-input: 1rem;                                         /* 16       never below (iOS zoom) */

  /* ── 2.4 Spacing (4px base) ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --section-y: clamp(48px, 32px + 4vw, 96px);
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1240px;
  --measure: 65ch;

  /* ── 2.5 Radii, z-index ── */
  --r-1: 4px;      /* inputs, chips */
  --r-2: 8px;      /* buttons, tiles */
  --r-3: 12px;     /* cards, drawer panels */
  --r-4: 16px;     /* proof card, hero media */
  --r-pill: 999px;
  --z-nav: 100;
  --z-mega: 300;
  --z-search: 400;
  --z-sticky: 500;
  --z-drawer-scrim: 1200;
  --z-drawer: 1210;
  --z-toast: 1300;

  /* ── 2.6 Motion ── */
  --d-1: 120ms;    /* hover, focus */
  --d-2: 240ms;    /* chips, accordions, scrim */
  --d-3: 420ms;    /* drawer slide, reveal */
  --d-4: 640ms;    /* hero entrance */
  --d-5: 900ms;    /* progress fill only */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 1ms; --d-2: 1ms; --d-3: 1ms; --d-4: 1ms; --d-5: 1ms; }
}