/* ============================================================================
   STRATA — Token system (three-tier: primitive → semantic → component)
   Two orthogonal axes ride one mechanism:
     [data-theme="light|dark"]  — register (NOT an inversion; stepped surfaces)
     [data-track="defendo|kickboxing|safekid"] — the rank-metal swap
   Every component inherits both swaps through semantic tokens.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   TIER 1 — PRIMITIVES (locked palette from the Strata direction card)
   Raw, never used directly by components. Names are physical, not roles.
   --------------------------------------------------------------------------- */
:root {
  /* Warm stone & ink (light register foundation) */
  --p-surface:        #faf6ef;   /* warm paper */
  --p-bg:             #e9e1d2;   /* warm stone */
  --p-stone-300:      #d8cdb8;   /* light strata band / belt-1 */
  --p-ink:            #211c14;   /* warm ink */
  --p-muted:          #5b4f3b;   /* muted brown-ink */

  /* Candle-lit ceremonial register (dark foundation, stepped) */
  --p-night-000:      #0d0a06;   /* base */
  --p-night-100:      #161109;   /* raised */
  --p-night-200:      #1f1810;   /* overlay */
  --p-night-300:      #2b231a;   /* hairline / border */
  --p-night-text:     #f3ecdf;   /* warm candle text */
  --p-night-muted:    #b9ab93;   /* muted candle text */

  /* Bronze rank-metal (Defendo / default) */
  --p-bronze:         #a87a3c;
  --p-bronze-deep:    #875f29;
  --p-bronze-soft:    #c1a06a;

  /* Copper rank-metal (Ironman Kickboxing) */
  --p-copper:         #b06434;
  --p-copper-deep:    #8a4a23;
  --p-copper-soft:    #cd8a5c;

  /* Sage rank-metal (Safe Kid) */
  --p-sage:           #6f8458;
  --p-sage-deep:      #54663f;
  --p-sage-soft:      #94a87c;

  /* Belt scale — bronze → obsidian (locked, used by progression mechanic) */
  --p-belt-1:         #d8cdb8;
  --p-belt-2:         #c1a06a;
  --p-belt-3:         #a87a3c;
  --p-belt-4:         #6e4f24;
  --p-belt-5:         #2b2419;

  /* Functional primitives */
  --p-white:          #ffffff;
  --p-black:          #000000;

  /* ---- Type primitives (web-safe stacks evoking Spectral + Hanken Grotesk) */
  --p-serif: "Spectral", "Iowan Old Style", "Palatino Linotype", "Palatino",
             "Georgia", "Cambria", "Times New Roman", serif;
  --p-sans:  "Hanken Grotesk", "Inter", "Helvetica Neue", "Helvetica",
             "Segoe UI", "Roboto", system-ui, -apple-system, sans-serif;

  /* ---- Scale primitives ---- */
  --p-step--2: 0.79rem;
  --p-step--1: 0.889rem;
  --p-step-0:  1rem;
  --p-step-1:  1.2rem;
  --p-step-2:  1.5rem;
  --p-step-3:  1.953rem;
  --p-step-4:  2.575rem;
  --p-step-5:  3.43rem;
  --p-step-6:  4.578rem;

  --p-radius-sm: 6px;
  --p-radius-md: 8px;
  --p-radius-lg: 10px;
  --p-radius-pill: 999px;

  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;
  --p-space-4: 1rem;
  --p-space-5: 1.5rem;
  --p-space-6: 2rem;
  --p-space-7: 3rem;
  --p-space-8: 4.5rem;
  --p-space-9: 7rem;

  /* sticky topbar effective height (min-height 66px incl. padding) — used by landing hero viewport fill */
  --header-h: 66px;

  --p-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --p-dur-fast: 120ms;
  --p-dur:      220ms;
  --p-dur-slow: 420ms;
}

/* ---------------------------------------------------------------------------
   TIER 2 — SEMANTIC (roles). Default = LIGHT register.
   Components reference ONLY these (+ component tier). Light is the default.
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Stepped surfaces (light): base → raised → overlay */
  --c-surface-base:   var(--p-surface);
  --c-surface-raised: #fffdf8;
  --c-surface-overlay:#ffffff;
  --c-surface-sunk:   var(--p-bg);

  --c-bg-page:        var(--p-bg);

  --c-ink:            var(--p-ink);
  --c-ink-muted:      var(--p-muted);
  --c-ink-faint:      #877a62;
  --c-ink-on-metal:   #1c1408;     /* text sitting on a metal fill */
  --c-ink-inverse:    var(--p-night-text);

  --c-border:         #ddd2bd;
  --c-border-strong:  #c7b89d;
  --c-hairline:       #e6dcca;

  /* Elevation (warm, low, archival — never glassy) */
  --c-elev-1: 0 1px 2px rgba(33,28,20,0.06), 0 1px 1px rgba(33,28,20,0.04);
  --c-elev-2: 0 4px 14px rgba(33,28,20,0.08), 0 2px 4px rgba(33,28,20,0.05);
  --c-elev-3: 0 18px 48px rgba(33,28,20,0.14), 0 6px 14px rgba(33,28,20,0.08);

  --c-img-overlay: linear-gradient(180deg,
                     rgba(250,246,239,0.04) 0%,
                     rgba(250,246,239,0.30) 62%,
                     rgba(250,246,239,0.86) 100%);
  --c-img-filter: saturate(0.82) contrast(1.02) brightness(1.02) sepia(0.16);
  --c-img-blend: multiply;
  --c-img-tint-opacity: 0.20;

  /* Metal (semantic, fed by [data-track]; default = bronze/Defendo) */
  --c-metal:        var(--p-bronze);
  --c-metal-deep:   var(--p-bronze-deep);
  --c-metal-soft:   var(--p-bronze-soft);
  --c-metal-wash:   rgba(168,122,60,0.10);
  --c-metal-line:   rgba(168,122,60,0.34);

  /* Emblem rings inherit metal */
  --c-emblem-ring:  var(--c-metal);
  --c-emblem-core:  var(--c-metal-deep);
  --c-emblem-field: var(--c-surface-raised);

  /* Metal CTA band — light register: a warm bronze slab reading as struck metal.
     Theme-aware so dark mode does NOT become a glaring bronze stripe. */
  --c-cta-metal-bg:    linear-gradient(135deg, var(--c-metal-deep), var(--c-metal));
  --c-cta-metal-ink:   var(--c-ink-on-metal);
  --c-cta-metal-border:var(--c-metal-deep);
  /* button face that sits on the band */
  --c-cta-metal-btn-bg:  var(--c-surface-base);
  --c-cta-metal-btn-ink: var(--c-ink);
  /* ghost button border/label over the band */
  --c-cta-metal-ghost-border: rgba(0,0,0,0.4);
  --c-cta-metal-ghost-ink:    var(--c-ink-on-metal);
  --c-cta-metal-ghost-hover:  rgba(0,0,0,0.12);
}

/* ---- DARK register: candle-lit, deliberate stepped surfaces (not inverted) */
[data-theme="dark"] {
  color-scheme: dark;

  --c-surface-base:   var(--p-night-100);
  --c-surface-raised: var(--p-night-200);
  --c-surface-overlay:var(--p-night-300);
  --c-surface-sunk:   var(--p-night-000);

  --c-bg-page:        var(--p-night-000);

  --c-ink:            var(--p-night-text);
  --c-ink-muted:      var(--p-night-muted);
  --c-ink-faint:      #8d8064;
  --c-ink-on-metal:   #160f06;
  --c-ink-inverse:    var(--p-ink);

  --c-border:         #322819;
  --c-border-strong:  #45381f;
  --c-hairline:       #241c11;

  --c-elev-1: 0 1px 2px rgba(0,0,0,0.5);
  --c-elev-2: 0 6px 20px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --c-elev-3: 0 22px 60px rgba(0,0,0,0.66), 0 8px 18px rgba(0,0,0,0.5);

  --c-img-overlay: linear-gradient(180deg,
                     rgba(13,10,6,0.18) 0%,
                     rgba(13,10,6,0.46) 55%,
                     rgba(13,10,6,0.92) 100%);
  --c-img-filter: saturate(0.78) contrast(1.05) brightness(0.78) sepia(0.22);
  --c-img-blend: screen;
  --c-img-tint-opacity: 0.26;

  /* metal soft-warms in candle light */
  --c-metal:        var(--p-bronze-soft);
  --c-metal-deep:   var(--p-bronze);
  --c-metal-soft:   #d6ba8c;
  --c-metal-wash:   rgba(193,160,106,0.12);
  --c-metal-line:   rgba(193,160,106,0.30);

  --c-emblem-ring:  var(--c-metal);
  --c-emblem-core:  var(--c-metal-deep);
  --c-emblem-field: var(--c-surface-overlay);

  /* Metal CTA band — candle-lit register: a deep ceremonial band lit from a
     bronze edge, NOT a bright bronze slab. Stays dark to match the theme. */
  --c-cta-metal-bg: linear-gradient(135deg,
                      color-mix(in srgb, var(--c-metal-deep) 26%, var(--p-night-100)),
                      color-mix(in srgb, var(--c-metal-deep) 12%, var(--p-night-000)));
  --c-cta-metal-ink:   var(--p-night-text);
  --c-cta-metal-border:color-mix(in srgb, var(--c-metal) 40%, var(--c-border));
  --c-cta-metal-btn-bg:  var(--c-metal);
  --c-cta-metal-btn-ink: var(--c-ink-on-metal);
  --c-cta-metal-ghost-border: var(--c-metal-line);
  --c-cta-metal-ghost-ink:    var(--p-night-text);
  --c-cta-metal-ghost-hover:  var(--c-metal-wash);
}

/* ---------------------------------------------------------------------------
   PER-TRACK ACCENT — the metal swaps. Orthogonal to theme.
   Overrides the metal semantic group only; everything else inherits.
   --------------------------------------------------------------------------- */
[data-track="defendo"] {
  --c-metal:      var(--p-bronze);
  --c-metal-deep: var(--p-bronze-deep);
  --c-metal-soft: var(--p-bronze-soft);
  --c-metal-wash: rgba(168,122,60,0.10);
  --c-metal-line: rgba(168,122,60,0.34);
}
[data-theme="dark"][data-track="defendo"] {
  --c-metal:      var(--p-bronze-soft);
  --c-metal-deep: var(--p-bronze);
  --c-metal-soft: #d6ba8c;
  --c-metal-wash: rgba(193,160,106,0.12);
  --c-metal-line: rgba(193,160,106,0.30);
}

[data-track="kickboxing"] {
  --c-metal:      var(--p-copper);
  --c-metal-deep: var(--p-copper-deep);
  --c-metal-soft: var(--p-copper-soft);
  --c-metal-wash: rgba(176,100,52,0.11);
  --c-metal-line: rgba(176,100,52,0.36);
}
[data-theme="dark"][data-track="kickboxing"] {
  --c-metal:      var(--p-copper-soft);
  --c-metal-deep: var(--p-copper);
  --c-metal-soft: #e0a47c;
  --c-metal-wash: rgba(205,138,92,0.13);
  --c-metal-line: rgba(205,138,92,0.32);
}

[data-track="safekid"] {
  --c-metal:      var(--p-sage);
  --c-metal-deep: var(--p-sage-deep);
  --c-metal-soft: var(--p-sage-soft);
  --c-metal-wash: rgba(111,132,88,0.12);
  --c-metal-line: rgba(111,132,88,0.36);
}
[data-theme="dark"][data-track="safekid"] {
  --c-metal:      var(--p-sage-soft);
  --c-metal-deep: var(--p-sage);
  --c-metal-soft: #aebf97;
  --c-metal-wash: rgba(148,168,124,0.14);
  --c-metal-line: rgba(148,168,124,0.32);
}

/* ---------------------------------------------------------------------------
   TIER 3 — COMPONENT (built on semantic only; these are what blocks consume)
   --------------------------------------------------------------------------- */
:root {
  /* Type roles */
  --font-lineage: var(--p-serif);   /* lineage / story / display */
  --font-system:  var(--p-sans);    /* system / labels / body  */

  --t-display: var(--p-step-6);
  --t-h1:      var(--p-step-5);
  --t-h2:      var(--p-step-4);
  --t-h3:      var(--p-step-3);
  --t-h4:      var(--p-step-2);
  --t-lead:    var(--p-step-1);
  --t-body:    var(--p-step-0);
  --t-small:   var(--p-step--1);
  --t-micro:   var(--p-step--2);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.62;

  --ls-eyebrow: 0.18em;
  --ls-label:   0.06em;

  /* Button */
  --btn-radius: var(--p-radius-sm);
  --btn-pad-y: 0.72rem;
  --btn-pad-x: 1.4rem;

  /* Card */
  --card-radius: var(--p-radius-lg);
  --card-pad: var(--p-space-6);

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.1rem, 4vw, 2.6rem);

  /* Motion */
  --motion: var(--p-dur) var(--p-ease);
  --motion-fast: var(--p-dur-fast) var(--p-ease);
  --motion-slow: var(--p-dur-slow) var(--p-ease);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}