/* tokens.css — Disc Golf Go design system ("Gigantic": punk-rock candy wrapper
   on cream paper). Warm cream canvas, ink-black type + actions, ONE loud red
   accent used sparingly (brand mark, footer, decorative punctuation). Oversized
   all-caps wide-tracked Space Grotesk (Neue Haas Grotesk Display substitute).
   Flat — 0px radius, NO shadows, NO gradients. Legacy token names are preserved
   as aliases (remapped) so existing markup keeps working. */

:root {
  /* ── Brand palette ── */
  --color-cream: #f0ede7;   /* primary canvas — warm paper */
  --color-ink: #231f20;     /* text, actions, borders, dark sections */
  --color-white: #ffffff;   /* cards / product surfaces / inverted text */
  --color-red: #ff634b;     /* accent ONLY: brand mark, footer, punctuation */
  --color-true-black: #000000;

  /* ── Legacy aliases → Gigantic values (keep existing markup working) ── */
  --color-void: #f0ede7;        /* was canvas bg → now cream */
  --color-graphite: #ffffff;    /* elevated surface → white */
  --color-bone: #231f20;        /* primary text → ink */
  --color-frost: #231f20;       /* headings / marks → ink */
  --color-ash: #6b6560;         /* muted warm gray */
  --color-slate: #8a827c;       /* tertiary */
  --color-charcoal: #231f20;    /* dark fill (buttons/sections) → ink */
  --color-snow: #ffffff;
  --color-hairline: rgba(35, 31, 32, 0.22);

  /* ── Fonts (Space Grotesk = Neue Haas Grotesk Display substitute) ── */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-geist: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ── Type scale (tracking widens with size — the signature) ── */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: 0.05em;
  --text-micro: 14px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --text-heading: 32px;
  --leading-heading: 1.1;
  --text-display: 92px;
  --leading-display: 0.94;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ── Spacing ── */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-116: 116px;

  /* ── Layout ── */
  --card-padding: 20px;
  --element-gap: 16px;
  --edge-pad: 20px;

  /* ── Radii — flat, sharp. 0px is the signature ── */
  --radius-sm: 0px;
  --radius-lg: 0px;
  --radius-2xl: 0px;
  --radius-pill: 0px;
  --radius-card: 0px;

  /* ── Surfaces ── */
  --surface-void: #f0ede7;
  --surface-graphite: #ffffff;
  --surface-snow: #ffffff;
}