/* Hallmark · genre: atmospheric · macrostructure: Photographic · theme: custom "WR Blue" · enrichment: real photography + Tier B hand-built SVG (404 ghost, wash game) · nav: N5 Floating pill · footer: Ft5 Statement
 * vibe: "graphite car park at night, World Rally Blue under fluorescent light"
 * paper oklch(13% 0.012 250) · accent #0e4bef World Rally Blue oklch(50% 0.25 264) · display Bricolage Grotesque + body Instrument Sans
 * axes: dark / display-heavy grotesk / cool
 * Hallmark · pre-emit critique: P5 H4 E5 S5 R4 V4 */
:root {
  /* ---- colour (single dark world; committed on purpose) ---- */
  --color-paper:    oklch(13% 0.012 250);
  --color-paper-2:  oklch(17% 0.013 250);
  --color-paper-3:  oklch(21% 0.014 250);
  --color-paper-4:  oklch(26% 0.014 250);
  --color-rule:     oklch(32% 0.012 250);
  --color-neutral:  oklch(62% 0.010 250);
  --color-muted:    oklch(76% 0.008 250);
  --color-ink:      oklch(95% 0.006 250);
  --color-ink-deep: oklch(13% 0.012 250);

  --color-accent:        oklch(50% 0.250 264);  /* Subaru World Rally Blue, #0e4bef */
  --color-accent-hover:  oklch(57% 0.240 264);
  --color-accent-deep:   oklch(40% 0.220 264);
  --color-accent-soft:   oklch(50% 0.250 264 / 0.22);
  --color-accent-ink:    oklch(97% 0.010 264);
  --color-accent-text:   oklch(74% 0.170 262);   /* blue for text and icons on dark */
  --color-focus:         oklch(72% 0.180 262);

  --color-water:         oklch(78% 0.120 235);  /* wash effect */
  --color-water-deep:    oklch(50% 0.250 264);
  --color-foam:          oklch(97% 0.010 220);

  --color-success:       oklch(78% 0.150 150);
  --color-success-soft:  oklch(78% 0.150 150 / 0.14);
  --color-error:         oklch(72% 0.190 25);
  --color-error-soft:    oklch(72% 0.190 25 / 0.14);
  --color-info:          oklch(72% 0.180 262);
  --color-info-soft:     oklch(50% 0.250 264 / 0.18);

  --color-scrim:         oklch(13% 0.012 250 / 0.72);
  --color-google:        oklch(95% 0.006 250);

  /* ---- type ---- */
  --font-display: "Bricolage Grotesque", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Instrument Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-icon:    "Material Symbols Outlined";

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --text-3xl:  clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
  --text-display: clamp(2.75rem, 1.5rem + 6vw, 5.5rem);
  --text-price: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);

  --leading-tight: 1.02;
  --leading-snug:  1.2;
  --leading-body:  1.55;

  /* ---- space (4pt) ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;
  --gutter:    clamp(1rem, 4vw, 2.5rem);
  --measure:   62ch;
  --tap:       48px;

  /* ---- shape ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --rule-hair: 1px solid var(--color-rule);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 140ms;
  --dur-med:   260ms;
  --dur-long:  520ms;

  /* ---- z scale ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-nav: 20;
  --z-island: 30;
  --z-sheet: 40;
  --z-toast: 50;
  --z-skip: 60;
}