/* Hallmark · tokens · Shades & Surfaces proposal
 * axes: light (near-white) / grotesk-sans (Geist) / warm (sun-yellow 92°)
 */
:root {
  /* Surface + text */
  --color-paper:        oklch(99.2% 0.002 250);
  --color-paper-2:      oklch(96.6% 0.006 250);
  --color-rule:         oklch(89%   0.010 250);
  --color-neutral:      oklch(50%   0.030 255);
  --color-muted:        oklch(38%   0.040 258);
  --color-ink:          oklch(25%   0.080 262);
  --color-backdrop:     oklch(25%   0.080 262 / 0.45);
  --color-shadow:       oklch(25%   0.080 262 / 0.45);
  --color-ink-2:        oklch(30%   0.085 262);
  --color-ink-rule:     oklch(38%   0.075 262);
  --color-ink-muted:    oklch(82%   0.030 240);
  --color-accent:       oklch(86%   0.170 92);
  --color-accent-text:  oklch(50%   0.130 62);
  --color-accent-dark:  oklch(87%   0.160 92);
  --color-accent-ink:   oklch(25%   0.080 262);
  --color-focus:        oklch(50%   0.180 255);
  --color-error:        oklch(50%   0.190 27);
  --color-success:      oklch(46%   0.120 155);
  --color-placeholder:  oklch(91%   0.010 250);

  /* Materials — read by the WebGL scene (main.js) */
  --mat-rubber:   oklch(46% 0.110 32);
  --mat-sbr:      oklch(23% 0.010 60);
  --mat-base:     oklch(72% 0.012 80);
  --mat-epdm:     oklch(56% 0.120 245);
  --mat-epdm-2:   oklch(74% 0.150 128);
  --mat-epdm-green:  oklch(55% 0.120 150);
  --mat-epdm-red:    oklch(50% 0.140 30);
  --mat-epdm-yellow: oklch(80% 0.150 88);
  --mat-epdm-grey:   oklch(60% 0.020 250);
  --mat-fleck-a:  oklch(93% 0.020 90);
  --mat-fleck-b:  oklch(84% 0.150 90);
  --mat-turf:     oklch(52% 0.130 140);
  --mat-turf-2:   oklch(62% 0.150 132);
  --mat-track:    oklch(52% 0.140 33);
  --mat-line:     oklch(96% 0.010 90);
  --mat-court:    oklch(50% 0.100 250);
  --mat-court-2:  oklch(56% 0.100 160);
  /* Deeper pours for surfaces that carry white text (>= 4.5:1 against --mat-line) */
  --mat-court-deep:  oklch(42% 0.100 252);
  --mat-epdm-deep:   oklch(44% 0.120 248);
  --mat-green-deep:  oklch(43% 0.105 152);
  --mat-red-deep:    oklch(45% 0.140 30);
  --mat-epoxy:    oklch(80% 0.022 75);
  --mat-steel:    oklch(64% 0.020 240);
  --mat-play-a:   oklch(81% 0.160 84);
  --mat-play-b:   oklch(58% 0.120 195);
  --mat-shade:    oklch(95% 0.020 85);
  --mat-sun:      oklch(97% 0.050 80);
  --mat-ground:   oklch(68% 0.060 70);

  /* Type */
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, monospace;
  --font-latin:   "Geist", ui-sans-serif, system-ui, sans-serif;   /* brand wordmark, never switches */

  /* Scale — perfect fourth */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.6rem;
  --text-2xl:  clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --text-3xl:  clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);
  --text-display: clamp(3.1rem, 1.2rem + 8.4vw, 9.5rem);

  /* Space — 4 pt */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 7rem;
  --gutter:    clamp(1rem, 0.5rem + 2.4vw, 2.5rem);

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --rule-hair: 1px;
  --rule-thick: 6px;

  /* 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-micro: 120ms;
  --dur-short: 220ms;
  --dur-medium: 300ms;
  --dur-long:  420ms;
}

/* Arabic: IBM Plex Sans Arabic for Arabic script, Geist still sets any Latin inside it */
:root[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", "Geist", ui-sans-serif, sans-serif;
  --font-body:    "IBM Plex Sans Arabic", "Geist", ui-sans-serif, sans-serif;
}