/*
 * theme-base.css — default design tokens
 *
 * Load order: fonts.css → theme-base.css → themes/{site}.css → main.css
 *
 * This file defines DEFAULTS for every token referenced in main.css.
 * Per-site themes (themes/cm6.css, themes/pyt.css, ...) override a subset.
 * main.css must never set these — it only reads them via var().
 *
 * Changing a token here affects every site that hasn't overridden it.
 * Changing a token in a themes/*.css file affects only that site.
 *
 * See DESIGN.md §6 for architecture and §4 for color rationale.
 */

:root {
  /* ─── Neutral palette (shared across all themes) ─────────────── */
  --color-bg:          #ffffff;
  --color-surface:     #f5f5f5;
  --color-text:        #1a1a1a;
  --color-text-muted:  #6b6b6b;
  --color-border:      #e0e0e0;

  /* ─── Brand palette — DEFAULTS match "My Trails" umbrella (monochrome) ─
     Event themes (cm6.css, pyt.css) override these.
     PRIMARY = dominant surface color (hero fallback, card headers, 60-70% weight).
     ACCENT  = spotlight only (CTAs, links, focus, ~10-15% weight). */
  --color-primary:     #000000;
  --color-primary-ink: #ffffff;   /* text on primary surfaces */
  --color-accent:      #CDCDCD;   /* My Trails grey — subdued */
  --color-accent-ink:  #1a1a1a;   /* text on accent surfaces */

  /* Optional — only set by themes that need a secondary tinted surface
     (e.g. PYT Orchid). Falls back to --color-surface via fallback chain. */
  --color-surface-accent: var(--color-surface);

  /* ─── Division / distance colors (from brand guide) ─────────────
     Used ONLY for small distance chips on race cards, signage, bib numbers.
     NEVER for branding, CTAs, or full-card fills. See DESIGN.md §4.6. */
  --color-d1: #44CC00;   /* Green  — shortest */
  --color-d2: #0078FF;   /* Blue */
  --color-d3: #FFEA00;   /* Yellow */
  --color-d4: #FFA500;   /* Orange */
  --color-d5: #E74C3C;   /* Red */
  --color-d6: #9D2933;   /* Crimson */
  --color-d7: #000000;   /* Black  — longest */

  /* ─── Typography ─────────────────────────────────────────────── */
  --font-heading: 'Prompt', system-ui, sans-serif;
  --font-body:    'Bai Jamjuree', system-ui, sans-serif;

  --weight-heading: 600;   /* Prompt Semibold — per brand guide */
  --weight-subhead: 500;   /* Prompt Medium   — per brand guide */
  --weight-body:    400;   /* Bai Jamjuree Regular */
  --weight-bold:    500;   /* Bai Jamjuree Medium — used for <strong>, labels */

  /* ─── Spacing scale (8px base) ───────────────────────────────── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;
  --space-2xl: 128px;

  /* ─── Layout ─────────────────────────────────────────────────── */
  --max-prose:   760px;
  --max-layout: 1200px;
  --nav-height:   64px;
}