/* ============================================================
   REGALIA — three-tier token system
   Tier 1: primitives (raw heraldic jewel + metal values)
   Tier 2: semantic (theme-aware: [data-theme=light|dark])
   Tier 3: component (built on semantic; per-track accent rides [data-track])
   ONE mechanism, two orthogonal axes: [data-theme] + [data-track].
   ============================================================ */

:root {
  /* ---------- TIER 1 — PRIMITIVES ---------- */

  /* Parchment / ivory ramp (light base) */
  --c-parchment-50:  #fdfbf4;
  --c-parchment-100: #f9f5ea;
  --c-parchment-200: #f7f3e9;   /* locked light base */
  --c-parchment-300: #efe8d4;
  --c-parchment-400: #e3d8bc;
  --c-parchment-500: #d2c19c;

  /* Regal ink ramp (dark base — deep emerald-black, NOT flat black, stepped) */
  --c-ink-900: #0f1512;   /* locked dark base */
  --c-ink-850: #131c18;
  --c-ink-800: #18241e;
  --c-ink-750: #1e2d26;
  --c-ink-700: #26382f;
  --c-ink-600: #324a3f;

  /* Heraldic jewel hues */
  --c-emerald-900: #0c3a26;
  --c-emerald-700: #155f3f;
  --c-emerald-500: #1f7a52;   /* locked emerald */
  --c-emerald-300: #4fb487;
  --c-emerald-100: #b9e6d2;

  --c-sapphire-900: #14245c;
  --c-sapphire-700: #1d3a8a;
  --c-sapphire-500: #264db0;   /* locked sapphire */
  --c-sapphire-300: #6f93e0;
  --c-sapphire-100: #c8d7f5;

  --c-garnet-900: #4d101a;
  --c-garnet-700: #761828;
  --c-garnet-500: #9e2233;     /* locked garnet */
  --c-garnet-300: #cc5d6b;
  --c-garnet-100: #f0c4cb;

  --c-gold-900: #6e560f;
  --c-gold-700: #9a7a18;
  --c-gold-500: #c9a227;       /* locked gold metal */
  --c-gold-400: #d8b54a;
  --c-gold-300: #e7cd7e;
  --c-gold-100: #f6ecc6;

  /* Gold-ochre (Kickboxing track accent) */
  --c-ochre-700: #a9700f;
  --c-ochre-500: #d08a1c;
  --c-ochre-300: #e8b259;

  /* Neutral ink for type */
  --c-text-ink:   #211d12;
  --c-text-paper: #f4efe0;

  /* ---------- TYPE SCALE ---------- */
  --font-serif: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", "Palatino", Palladio, "Book Antiqua", Georgia, serif;
  --font-grotesque: "Helvetica Neue", "Arial Nova", Inter, "Segoe UI", Roboto, system-ui, sans-serif;

  --fs-display: clamp(2.6rem, 6vw, 5rem);
  --fs-h1: clamp(2rem, 4vw, 3.2rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2.2rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  --ls-display: -0.02em;
  --ls-eyebrow: 0.26em;
  --ls-label: 0.08em;

  /* ---------- SPACING ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---------- RADIUS ---------- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-plate: 4px;
  --r-pill: 999px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;

  /* ---------- LAYOUT ---------- */
  --header-h: 64px;
  --maxw: 1180px;
}

/* ============================================================
   TIER 2 — SEMANTIC TOKENS (theme-aware)
   ============================================================ */

/* ---- LIGHT (default — illuminated parchment) ---- */
[data-theme="light"] {
  --bg-base:     var(--c-parchment-200);
  --bg-raised:   var(--c-parchment-100);
  --bg-overlay:  var(--c-parchment-50);
  --bg-sunken:   var(--c-parchment-300);
  --bg-inverse:  var(--c-ink-900);

  --surface-card:   var(--c-parchment-50);
  --surface-emerald: var(--c-emerald-100);
  --surface-sapphire: var(--c-sapphire-100);
  --surface-garnet: var(--c-garnet-100);
  --surface-gold:   var(--c-gold-100);

  --fg-strong:  var(--c-text-ink);
  --fg-default: #36301f;
  --fg-muted:   #6b6145;
  --fg-faint:   #918659;
  --fg-on-inverse: var(--c-text-paper);

  --rule:        rgba(33,29,18,0.16);
  --rule-strong: rgba(33,29,18,0.32);
  --metal:       var(--c-gold-700);
  --metal-bright: var(--c-gold-500);

  --jewel-emerald: var(--c-emerald-500);
  --jewel-sapphire: var(--c-sapphire-500);
  --jewel-garnet: var(--c-garnet-500);

  --shadow-1: 0 1px 2px rgba(33,29,18,0.08), 0 2px 8px rgba(33,29,18,0.06);
  --shadow-2: 0 4px 14px rgba(33,29,18,0.12), 0 1px 3px rgba(33,29,18,0.10);
  --shadow-plate: 0 2px 0 rgba(110,86,15,0.18), 0 6px 18px rgba(33,29,18,0.14);

  /* image treatment — parchment-warm plate */
  --img-brightness: 1.02;
  --img-contrast: 1.06;
  --img-saturate: 0.78;
  --duo-shadow: rgba(12,58,38,0.62);   /* emerald shadow */
  --duo-highlight: rgba(246,236,198,0.55); /* gold/parchment highlight */
  --img-scrim-top: rgba(247,243,233,0.0);
  --img-scrim-bottom: rgba(33,29,18,0.32);

  color-scheme: light;
}

/* ---- DARK (candle-lit illuminated manuscript — stepped jewel-dark) ---- */
[data-theme="dark"] {
  --bg-base:     var(--c-ink-900);
  --bg-raised:   var(--c-ink-800);
  --bg-overlay:  var(--c-ink-750);
  --bg-sunken:   var(--c-ink-850);
  --bg-inverse:  var(--c-parchment-100);

  --surface-card:   var(--c-ink-800);
  --surface-emerald: var(--c-emerald-900);
  --surface-sapphire: var(--c-sapphire-900);
  --surface-garnet: var(--c-garnet-900);
  --surface-gold:   var(--c-gold-900);

  --fg-strong:  #f4efe0;
  --fg-default: #e3dcc8;
  --fg-muted:   #a9a182;
  --fg-faint:   #7c7559;
  --fg-on-inverse: var(--c-text-ink);

  --rule:        rgba(201,162,39,0.22);
  --rule-strong: rgba(201,162,39,0.42);
  --metal:       var(--c-gold-400);
  --metal-bright: var(--c-gold-300);

  --jewel-emerald: var(--c-emerald-300);
  --jewel-sapphire: var(--c-sapphire-300);
  --jewel-garnet: var(--c-garnet-300);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.36);
  --shadow-2: 0 6px 22px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-plate: 0 0 0 1px rgba(201,162,39,0.18), 0 8px 26px rgba(0,0,0,0.55);

  /* image treatment — candle-lit jewel plate (gentle, subject visible) */
  --img-brightness: 0.96;
  --img-contrast: 1.04;
  --img-saturate: 0.92;
  --duo-shadow: rgba(8,40,28,0.55);    /* emerald-dark shadow */
  --duo-highlight: rgba(231,205,126,0.42); /* warm gold highlight */
  --img-scrim-top: rgba(15,21,18,0.0);
  --img-scrim-bottom: rgba(15,21,18,0.44);

  color-scheme: dark;
}

/* ============================================================
   TIER 3 — COMPONENT TOKENS + PER-TRACK ACCENT AXIS
   Default accent = sapphire (institutional). Each [data-track]
   swaps the seal/authority jewel; gold metal + skeleton constant.
   ============================================================ */

:root {
  /* default (no track) accent = sapphire */
  --accent:        var(--jewel-sapphire);
  --accent-deep:   var(--c-sapphire-700);
  --accent-soft:   var(--surface-sapphire);
  --accent-100:    var(--c-sapphire-100);
  --accent-contrast: #ffffff;

  /* component tokens */
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--accent-contrast);
  --btn-primary-bg-hover: var(--accent-deep);

  --plate-field:   var(--accent);
  --plate-numeral: var(--metal-bright);
  --seal-metal:    var(--metal-bright);

  --link: var(--accent);
  --focus-ring: var(--metal-bright);
}

/* track: Classic Krav Maga · Defendo -> GARNET */
[data-track="defendo"] {
  --accent:      var(--jewel-garnet);
  --accent-deep: var(--c-garnet-700);
  --accent-soft: var(--surface-garnet);
  --accent-100:  var(--c-garnet-100);
  --accent-contrast: #ffffff;
}

/* track: Ironman Kickboxing -> GOLD-OCHRE */
[data-track="kickboxing"] {
  --accent:      var(--c-ochre-500);
  --accent-deep: var(--c-ochre-700);
  --accent-soft: var(--c-gold-100);
  --accent-100:  var(--c-gold-100);
  --accent-contrast: #2a1f08;
}
[data-theme="dark"][data-track="kickboxing"] {
  --accent: var(--c-ochre-300);
}

/* track: Safe Kid -> EMERALD */
[data-track="safekid"] {
  --accent:      var(--jewel-emerald);
  --accent-deep: var(--c-emerald-700);
  --accent-soft: var(--surface-emerald);
  --accent-100:  var(--c-emerald-100);
  --accent-contrast: #ffffff;
}