/*
 * tokens.css — the single source of design-token VALUES for the Masters direction.
 *
 * Architecture (DESIGN.md → Build contract): this is the only place colour / surface / shadow
 * values live. Components (golf-masters.css → the .gds-* library) and screens consume these
 * tokens and never hard-code a value — change a token here and the whole app moves.
 *
 * Names are lifted verbatim from web/preview/masters.html (the comp = source of truth). They
 * carry the `--masters-` prefix through the transition so diffs stay reviewable; the prefix is
 * dropped to the clean comp names (`--bg`, `--ink`, …) in the Cleanup issue (#77).
 *
 * Non-colour primitives (type scale, spacing, radii, touch, motion) live in varko.css.
 * Light is the default (:root); dark overrides only the semantic tokens under [data-theme="dark"].
 */

:root {
  /* ---- Primitive palette (hue-anchored OKLCH, perceptually uniform) ---- */
  --masters-green-950: oklch(22% 0.04 158);
  --masters-green-900: oklch(27% 0.052 158);
  --masters-green-850: oklch(31% 0.058 157);
  --masters-green-800: oklch(36% 0.07 156);
  --masters-green-700: oklch(44% 0.085 155);
  --masters-green-600: oklch(52% 0.1 153);
  --masters-green-500: oklch(60% 0.11 151);
  --masters-green-300: oklch(78% 0.1 148);

  --masters-cream-50: oklch(98.6% 0.008 92);
  --masters-cream-100: oklch(96% 0.018 91);
  --masters-cream-200: oklch(93% 0.022 89);
  --masters-cream-300: oklch(89.5% 0.024 88);

  --masters-butter: oklch(84% 0.13 86);
  --masters-butter-600: oklch(66% 0.13 78);
  --masters-butter-700: oklch(56% 0.125 72);
  /* Legacy alias kept for components already referencing --masters-butter-text. */
  --masters-butter-text: var(--masters-butter-700);

  --masters-red: oklch(48% 0.14 33); /* brick "under" red */
  --masters-red-bright: oklch(62% 0.15 33);
  /* Legacy alias kept for components already referencing --masters-red-on-dark. */
  --masters-red-on-dark: var(--masters-red-bright);

  --masters-ink-950: oklch(25% 0.022 156);
  --masters-ink-700: oklch(42% 0.022 155);
  --masters-ink-500: oklch(54% 0.018 154);

  --masters-contours: url("../preview/contours.svg"); /* @kind other */

  /* ---- Semantic tokens: LIGHT ---- */
  --masters-bg: var(--masters-cream-100);
  --masters-surface: var(--masters-cream-50);
  --masters-surface-sunken: var(--masters-cream-200);
  --masters-board: var(--masters-green-900);
  --masters-board-edge: var(--masters-green-950);
  --masters-header-from: var(--masters-green-850);
  --masters-header-to: var(--masters-green-800);

  --masters-ink: var(--masters-ink-950);
  --masters-ink-soft: var(--masters-ink-700);
  --masters-ink-faint: var(--masters-ink-500);
  --masters-on-green: var(--masters-cream-100);
  --masters-on-green-soft: oklch(88% 0.03 120 / 0.78);

  --masters-line: oklch(86% 0.016 90);
  --masters-line-strong: oklch(80% 0.02 90);

  --masters-accent: var(--masters-butter-700); /* readable gold for text on cream */
  --masters-accent-fill: var(--masters-butter);
  --masters-positive: var(--masters-green-600);
  --masters-positive-ink: var(--masters-green-700);
  --masters-under: var(--masters-red);
  --masters-best: oklch(42% 0.1 66); /* deep medal gold — readable on the soft fill */
  --masters-best-fill: oklch(90% 0.06 82);

  --masters-shadow-sm:
    0 1px 2px oklch(30% 0.05 158 / 0.08),
    0 2px 6px oklch(30% 0.05 158 / 0.07);
  --masters-shadow-md:
    0 6px 16px oklch(30% 0.05 158 / 0.1),
    0 2px 6px oklch(30% 0.05 158 / 0.08);
  --masters-shadow-board:
    0 10px 30px oklch(25% 0.05 158 / 0.25),
    inset 0 1px 0 oklch(70% 0.06 150 / 0.25);

  /* Component sizing tokens (score token geometry — kept here so the shape moves in one place). */
  --masters-score-token-size: 1.85rem;
  --masters-score-token-stroke: 1.75px;

  color-scheme: light;
}

/* ---- Semantic tokens: DARK ("Augusta at dusk") — full equal of light ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --masters-bg: oklch(13% 0.022 158);
  --masters-surface: oklch(18% 0.03 158);
  --masters-surface-sunken: oklch(15.5% 0.026 158);
  --masters-board: oklch(24% 0.045 157);
  --masters-board-edge: oklch(13.5% 0.028 158);
  --masters-header-from: oklch(21% 0.04 156);
  --masters-header-to: oklch(16% 0.032 158);

  --masters-ink: oklch(93% 0.016 90);
  --masters-ink-soft: oklch(78% 0.022 130);
  --masters-ink-faint: oklch(70% 0.026 140);
  --masters-on-green: oklch(94% 0.02 92);
  --masters-on-green-soft: oklch(88% 0.03 120 / 0.82);

  --masters-line: oklch(40% 0.025 158);
  --masters-line-strong: oklch(48% 0.03 156);

  --masters-accent: var(--masters-butter); /* bright gold reads well on dark */
  --masters-accent-fill: var(--masters-butter-600);
  --masters-positive: var(--masters-green-300);
  --masters-positive-ink: var(--masters-green-300);
  --masters-under: var(--masters-red-bright);
  --masters-best: oklch(86% 0.1 84); /* bright medal gold on dark */
  --masters-best-fill: oklch(33% 0.06 78);

  --masters-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
  --masters-shadow-md: 0 8px 22px oklch(0% 0 0 / 0.4);
  --masters-shadow-board:
    0 12px 34px oklch(0% 0 0 / 0.5),
    inset 0 1px 0 oklch(70% 0.06 150 / 0.18);
}