/* Hallmark · route: custom (bespoke) · landing v5 = v4-2 choreography + v4-3 materials
 * paper: oklch(94% 0.012 85) bone · accent: oklch(70% 0.16 155) signal green (price up only)
 * display: Anybody (wdth axis) · body: Hanken Grotesk · numerals: Martian Mono
 * axes: light / grotesk-variable-width / chromatic-green
 */
:root {
  /* Surfaces: design.md bone family, plus one raised card-stock white for sheets, slips and tags. */
  --color-paper:   oklch(94% 0.012 85);
  --color-paper-2: oklch(91% 0.014 85);
  --color-paper-3: oklch(87% 0.014 85);
  --color-stock:   oklch(98.2% 0.007 90);
  --color-ink:     oklch(18% 0.006 85);
  --color-ink-2:   oklch(24% 0.006 85);
  --color-muted:   oklch(46% 0.010 85);
  --color-flat:    oklch(52% 0.008 85);     /* down/flat price text; darker than design.md --flat so 11px type passes AA on stock */
  --color-rule:    oklch(18% 0.006 85 / 0.14);
  --color-rule-2:  oklch(18% 0.006 85 / 0.32);
  --color-accent:  oklch(70% 0.16 155);     /* the ONE accent: price up (fills, dots) */
  --color-accent-deep: oklch(50% 0.13 155); /* green as text on bone/stock */
  --color-focus:   oklch(50% 0.13 155);

  /* Plastic: sleeves, top-loaders and binder pockets are clear; only edges and a sheen show. */
  --color-sleeve-fill:  oklch(99% 0.004 220 / 0.10);
  --color-sleeve-edge:  oklch(99% 0.004 220 / 0.75);
  --color-sleeve-seam:  oklch(30% 0.01 220 / 0.18);
  --color-sheen:        oklch(100% 0.004 90 / 0.38);
  --color-loader-edge:  oklch(97% 0.006 220 / 0.9);
  --color-loader-fill:  oklch(99% 0.004 220 / 0.32);
  --color-string:       oklch(46% 0.03 70);
  --color-highlight:    oklch(100% 0.004 90 / 0.6);
  --color-highlight-hi: oklch(100% 0.004 90 / 0.88);
  --color-glint:        oklch(100% 0.004 90 / 0.16);
  --color-glint-hi:     oklch(100% 0.004 90 / 0.28);
  --color-binder-page:  oklch(97% 0.006 90);
  --color-grain:        oklch(30% 0.02 70);

  /* Shadows: ink-tinted, contact + ambient, never coloured. */
  --shadow-contact: oklch(18% 0.01 70 / 0.22);
  --shadow-ambient: oklch(18% 0.01 70 / 0.10);
  --shadow-rest:  0 1px 1px var(--shadow-contact), 0 6px 14px -6px var(--shadow-ambient);
  --shadow-lift:  0 2px 3px var(--shadow-contact), 0 22px 40px -14px oklch(18% 0.01 70 / 0.28);
  --shadow-sheet: 0 1px 0 oklch(100% 0.004 90 / 0.7) inset, 0 1px 2px var(--shadow-contact), 0 30px 60px -30px oklch(18% 0.01 70 / 0.35);

  --font-display: "Anybody", "Archivo", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "Martian Mono", ui-monospace, monospace;

  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1.0625rem;
  --text-lg: min(1.333rem, calc(0.9rem + 1.2svh));
  /* Headings are capped by viewport height too, so short laptop screens keep the copy beside the stage. */
  --text-h2: min(clamp(2rem, 1.1rem + 3vw, 4.2rem), calc(0.6rem + 8.5svh));
  --text-display: min(clamp(2.9rem, 0.5rem + 7.2vw, 8rem), 15svh);
  --text-close: min(clamp(1.7rem, 1rem + 2.2vw, 3rem), calc(0.5rem + 6svh));

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px;
  --gutter: clamp(16px, 4vw, 56px);

  --radius-pill: 999px;
  --radius-tag: 3px;
  --radius-tab: 8px 8px 0 0;

  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-settle: cubic-bezier(.22,1,.36,1);
  --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 520ms;

  --bar-h: 56px;
}

/* Dark theme: app.css dark values (bone #141412, raised #292925, ink #f2efe6). No stored preference follows the OS;
   the toggle's stored choice wins. Cards stay the colour; surfaces go near-black, never pure black. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-paper:   oklch(18.5% 0.004 85);
    --color-paper-2: oklch(21.5% 0.005 85);
    --color-paper-3: oklch(25.5% 0.006 85);
    --color-stock:   oklch(27% 0.006 85);
    --color-ink:     oklch(95% 0.012 85);
    --color-ink-2:   oklch(88% 0.012 85);
    --color-muted:   oklch(65% 0.012 85);
    --color-flat:    oklch(74% 0.012 85);
    --color-rule:    oklch(95% 0.012 85 / 0.14);
    --color-rule-2:  oklch(95% 0.012 85 / 0.30);
    --color-accent-deep: oklch(82% 0.17 155);
    --color-focus:   oklch(82% 0.17 155);
    --color-sleeve-seam:  oklch(95% 0.01 85 / 0.10);
    --color-string:       oklch(62% 0.03 70);
    --color-highlight:    oklch(100% 0.004 90 / 0.10);
    --color-highlight-hi: oklch(100% 0.004 90 / 0.14);
    --color-glint:        oklch(100% 0.004 90 / 0.06);
    --color-glint-hi:     oklch(100% 0.004 90 / 0.10);
    --color-binder-page:  oklch(23.5% 0.006 85);
    --color-grain:        oklch(85% 0.02 70);
    --shadow-contact: oklch(0% 0 0 / 0.55);
    --shadow-ambient: oklch(0% 0 0 / 0.40);
    --shadow-lift:  0 2px 3px var(--shadow-contact), 0 22px 40px -14px oklch(0% 0 0 / 0.6);
    --shadow-sheet: 0 1px 0 oklch(100% 0.004 90 / 0.06) inset, 0 1px 2px var(--shadow-contact), 0 30px 60px -30px oklch(0% 0 0 / 0.7);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --color-paper:   oklch(18.5% 0.004 85);
  --color-paper-2: oklch(21.5% 0.005 85);
  --color-paper-3: oklch(25.5% 0.006 85);
  --color-stock:   oklch(27% 0.006 85);
  --color-ink:     oklch(95% 0.012 85);
  --color-ink-2:   oklch(88% 0.012 85);
  --color-muted:   oklch(65% 0.012 85);
  --color-flat:    oklch(74% 0.012 85);
  --color-rule:    oklch(95% 0.012 85 / 0.14);
  --color-rule-2:  oklch(95% 0.012 85 / 0.30);
  --color-accent-deep: oklch(82% 0.17 155);
  --color-focus:   oklch(82% 0.17 155);
  --color-sleeve-seam:  oklch(95% 0.01 85 / 0.10);
  --color-string:       oklch(62% 0.03 70);
  --color-highlight:    oklch(100% 0.004 90 / 0.10);
  --color-highlight-hi: oklch(100% 0.004 90 / 0.14);
  --color-glint:        oklch(100% 0.004 90 / 0.06);
  --color-glint-hi:     oklch(100% 0.004 90 / 0.10);
  --color-binder-page:  oklch(23.5% 0.006 85);
  --color-grain:        oklch(85% 0.02 70);
  --shadow-contact: oklch(0% 0 0 / 0.55);
  --shadow-ambient: oklch(0% 0 0 / 0.40);
  --shadow-lift:  0 2px 3px var(--shadow-contact), 0 22px 40px -14px oklch(0% 0 0 / 0.6);
  --shadow-sheet: 0 1px 0 oklch(100% 0.004 90 / 0.06) inset, 0 1px 2px var(--shadow-contact), 0 30px 60px -30px oklch(0% 0 0 / 0.7);
  color-scheme: dark;
}