/* ============================================================================
   CHARTER — Token System
   Three tiers: PRIMITIVE -> SEMANTIC -> COMPONENT
   Two orthogonal axes ride one mechanism:
     [data-theme="light|dark"]  — luminance (stepped, never inverted)
     [data-track="defendo|kickboxing|safekid"] — single authority accent + grade
   Design language: an institution's printed charter. Ink on warm archival paper.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   TIER 1 — PRIMITIVES  (locked values from the direction card; never themed)
   --------------------------------------------------------------------------- */
:root {
  /* Paper / ink — locked archival palette */
  --p-paper-surface: #f8f6f1;   /* surface */
  --p-paper-bg:      #ece7dc;   /* bg */
  --p-paper-raised:  #fffdf8;   /* raised card on paper */
  --p-ink:           #201e1a;   /* ink */
  --p-ink-muted:     #514c40;   /* muted ink */
  --p-ink-faint:     #8a8474;   /* hairline-adjacent text */

  /* After-hours reading room — warm ink-on-black, stepped (NOT inversion) */
  --p-night-base:    #0a0907;   /* base */
  --p-night-raised:  #15130f;   /* +~6% */
  --p-night-overlay: #211d17;   /* +~12% */
  --p-night-line:    #322c22;
  --p-paper-on-night:    #ece6d6;  /* warm parchment text on black */
  --p-paper-on-night-mut:#a39b88;

  /* Regimental + structural — locked */
  --p-crimson:       #8c2f28;   /* regimental crimson (Defendo accent) */
  --p-crimson-soft:  #a8483f;
  --p-navy:          #2c3d57;   /* structural navy — rules / seals */
  --p-navy-soft:     #3d5170;

  /* Per-track authority accents — locked from card */
  --p-track-defendo:     #8c2f28;  /* crimson */
  --p-track-kickboxing:  #9a6a1e;  /* ochre */
  --p-track-safekid:     #3c6248;  /* institutional green */

  /* Credential metals — locked from card */
  --p-metal-brass:  #8f8674;   /* brass-grey */
  --p-metal-bronze: #a9824e;
  --p-metal-silver: #b9bcc0;
  --p-metal-gold:   #c2a14e;
  --p-metal-onyx:   #2b2925;

  /* Type — system/web-safe stacks evoking Newsreader/Source Serif 4 + Public Sans */
  --p-serif: "Newsreader", "Source Serif 4", "Hoefler Text", "Iowan Old Style",
             Georgia, "Times New Roman", serif;
  --p-sans:  "Public Sans", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale (editorial; major-third-ish, document-grade) */
  --t-2xs: 0.6875rem;  /* 11px — overline/seal caption */
  --t-xs:  0.75rem;    /* 12px — labels, data */
  --t-sm:  0.875rem;   /* 14px */
  --t-base:1rem;       /* 16px */
  --t-md:  1.1875rem;  /* 19px — lead */
  --t-lg:  1.5rem;     /* 24px */
  --t-xl:  2rem;       /* 32px */
  --t-2xl: 2.75rem;    /* 44px */
  --t-3xl: 3.75rem;    /* 60px — display */
  --t-4xl: 4.75rem;    /* 76px — masthead */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.6;

  --ls-cap: 0.16em;    /* tracked small-caps labels */
  --ls-wide:0.28em;    /* seal captions / indices */

  /* Spacing scale (8pt base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* Radius — square-ish, charter corners */
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 420ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Layout */
  --measure: 68ch;
  --container: 1180px;
  --header-h: 60px;   /* sticky .topbar effective height: ~56px content (12px pad + ~32px stack) + 2px heavy border */
  --rule-heavy: 2px;
  --rule-hair: 1px;
}

/* ---------------------------------------------------------------------------
   TIER 2 — SEMANTIC  (theme-aware; names constant, values swap)
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --bg:            var(--p-paper-bg);
  --surface:       var(--p-paper-surface);
  --surface-raised:var(--p-paper-raised);
  --surface-sunk:  #e3ddcf;

  --text:          var(--p-ink);
  --text-muted:    var(--p-ink-muted);
  --text-faint:    var(--p-ink-faint);
  --text-inverse:  var(--p-paper-on-night);

  --rule:          rgba(32, 30, 26, 0.62);   /* heavy rules */
  --rule-soft:     rgba(32, 30, 26, 0.20);   /* hairlines */
  --rule-faint:    rgba(32, 30, 26, 0.10);

  --structural:    var(--p-navy);             /* seals/rules secondary authority */
  --structural-soft: var(--p-navy-soft);

  /* image treatment — duotone shadow/highlight + grade tint */
  --img-shadow:    #2a2620;
  --img-highlight: #f4efe4;
  --img-overlay:   linear-gradient(180deg, rgba(248,246,241,0) 38%, rgba(248,246,241,0.78) 100%);
  --img-grade:     0.86;   /* desaturation: contrast/sat multiplier hook */

  --shadow-plate:  0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(32,30,26,0.10);
  --shadow-raise:  0 1px 2px rgba(32,30,26,0.08), 0 8px 24px rgba(32,30,26,0.07);

  --metal-face:    #d8d2c4;
  --metal-edge:    rgba(32,30,26,0.28);
  --metal-engrave: rgba(32,30,26,0.55);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            var(--p-night-base);
  --surface:       var(--p-night-raised);
  --surface-raised:var(--p-night-overlay);
  --surface-sunk:  #0f0d0a;

  --text:          var(--p-paper-on-night);
  --text-muted:    var(--p-paper-on-night-mut);
  --text-faint:    #6f6857;
  --text-inverse:  var(--p-ink);

  --rule:          rgba(236, 230, 214, 0.42);
  --rule-soft:     rgba(236, 230, 214, 0.16);
  --rule-faint:    rgba(236, 230, 214, 0.08);

  --structural:    var(--p-navy-soft);
  --structural-soft: #56688a;

  --img-shadow:    #050403;
  --img-highlight: #d7cfba;
  --img-overlay:   linear-gradient(180deg, rgba(10,9,7,0) 30%, rgba(10,9,7,0.88) 100%);
  --img-grade:     0.78;

  --shadow-plate:  0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 3px rgba(0,0,0,0.6);
  --shadow-raise:  0 2px 4px rgba(0,0,0,0.5), 0 14px 40px rgba(0,0,0,0.55);

  --metal-face:    #2a2722;
  --metal-edge:    rgba(236,230,214,0.22);
  --metal-engrave: rgba(0,0,0,0.6);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   PER-TRACK ACCENT  (orthogonal axis — single authority accent + image grade)
   Defaults to Defendo (crimson). Combines with either theme for free.
   --------------------------------------------------------------------------- */
:root,
[data-track="defendo"] {
  --accent:        var(--p-track-defendo);
  --accent-strong: #6f231d;
  --accent-soft:   var(--p-crimson-soft);
  --accent-tint:   rgba(140, 47, 40, 0.10);
  --accent-grade-h: 8deg;     /* image hue/grade hook per track */
  --track-name: "Classic Krav Maga · Defendo";
}
[data-track="kickboxing"] {
  --accent:        var(--p-track-kickboxing);
  --accent-strong: #774f12;
  --accent-soft:   #b9842c;
  --accent-tint:   rgba(154, 106, 30, 0.12);
  --accent-grade-h: 32deg;
  --track-name: "Ironman Kickboxing";
}
[data-track="safekid"] {
  --accent:        var(--p-track-safekid);
  --accent-strong: #2c4a36;
  --accent-soft:   #4f7a5e;
  --accent-tint:   rgba(60, 98, 72, 0.12);
  --accent-grade-h: 132deg;
  --track-name: "Safe Kid";
}

/* Accent legibility on dark needs a small lift */
[data-theme="dark"][data-track="defendo"]    { --accent: #c1554c; --accent-soft:#cf6c63; }
[data-theme="dark"][data-track="kickboxing"]  { --accent: #c79338; --accent-soft:#d6a850; }
[data-theme="dark"][data-track="safekid"]     { --accent: #5e9173; --accent-soft:#74a98a; }

/* ---------------------------------------------------------------------------
   TIER 3 — COMPONENT  (built from semantics; what blocks actually consume)
   --------------------------------------------------------------------------- */
:root {
  /* Masthead / nav */
  --nav-bg:         var(--surface);
  --nav-rule:       var(--rule);
  --crest-ink:      var(--text);

  /* Buttons */
  --btn-primary-bg:   var(--accent);
  --btn-primary-fg:   #fbf7ee;
  --btn-primary-bg-h: var(--accent-strong);
  --btn-ghost-fg:     var(--text);
  --btn-ghost-rule:   var(--rule);
  --btn-ghost-rule-h: var(--accent);

  /* Cards / plates */
  --card-bg:        var(--surface-raised);
  --card-rule:      var(--rule-soft);
  --card-rule-head: var(--text);

  /* Section indices (Roman) */
  --index-fg:       var(--accent);

  /* Eyebrow / overline */
  --eyebrow-fg:     var(--text-muted);

  /* Credential plate */
  --plate-bg:       var(--surface-raised);
  --plate-rule:     var(--rule);
  --plate-metal:    var(--metal-face);
  --plate-engrave:  var(--metal-engrave);
  --plate-confer:   var(--accent);
  --plate-locked-fg:var(--text-faint);

  /* Seal */
  --seal-ring:      var(--structural);
  --seal-core:      var(--accent);

  /* Tags / chips */
  --tag-bg:         var(--accent-tint);
  --tag-fg:         var(--accent);
  --tag-rule:       var(--accent-soft);

  /* Stat strip */
  --stat-fig:       var(--text);
  --stat-label:     var(--text-muted);

  /* Quote / endorsement */
  --quote-rule:     var(--accent);

  /* Footer */
  --footer-bg:      var(--surface-sunk);
  --footer-fg:      var(--text-muted);
}