/* ============================================================================
   XENTH — Design Tokens
   Source of truth: XENTHGROUP_CLAUDE_DESIGN_BUILD_PACKAGE_v1
     03_VISUAL_SYSTEM/CSS_TOKENS.css
     03_VISUAL_SYSTEM/COLOR_ARCHITECTURE.md
     03_VISUAL_SYSTEM/TYPOGRAPHY_SYSTEM.md
     01_MISSION/DECISION_LOCKS.md

   Locked law:
     The operating system is monochrome.
     Progress earns gold.
     Perspective reveals purple.
     Ice blue is signal, never surface.
   ========================================================================== */

:root {
  /* --- Operating world: graphite / black / controlled white / slate ------- */
  --xenth-bg:          #050608;
  --xenth-surface:     #0b0d10;
  --xenth-surface-2:   #101317;
  --xenth-surface-3:   #16191e;
  --xenth-text:        #f5f5f6;
  --xenth-text-muted:  #9ea3ac;
  /* #6c7079 measured 4.07:1 on --xenth-bg — under WCAG AA for the small mono
     labels this drives. Lifted to hold >=4.5:1 on both bg and surface. */
  --xenth-text-dim:    #787c85;
  --xenth-border:      #2a2d33;
  --xenth-border-soft: #1c1f24;

  /* --- Earned state: gold = approved, verified, complete, proof ---------- */
  --xenth-gold:        #d9a428;
  --xenth-gold-deep:   #b6801c;
  --xenth-gold-soft:   #f2d489;

  /* --- Mythic state: purple = perspective, ascent, philosophy ------------ */
  --xenth-purple:      #4b2f82;
  --xenth-purple-deep: #311c5c;
  --xenth-purple-soft: #8a6bd6;

  /* --- Active state: ice signal = live, routing, current position -------- */
  --xenth-signal:      #4ea4ff;
  --xenth-signal-dim:  rgba(78, 164, 255, 0.28);

  /* --- Living Spine: semantic operational states ------------------------
     The Living Spine is the XENTH industrial design grammar expressed as a
     section rail. Its states are named for what they MEAN, not for a colour,
     so the grammar is portable across products while each surface renders it
     in its own locked palette.

     This website is monochrome by law (see the header of this file), so the
     canonical operational hues are translated here rather than imported:

       canonical            this surface
       ------------------   ----------------------------------------------
       muted white/gray  →  --xenth-border / text-dim / text-muted
       syntax lime       →  --xenth-signal   (ice blue is the LOCKED token
                            for "live, routing, current position", which is
                            exactly what the Living Core marks)
       amber             →  --xenth-text     (gold is reserved for earned
                            proof only; human authority reads as full white
                            plus the locked ice-blue focus ring)
       red               →  unmapped — a static marketing rail has no error
                            condition, so no exception state is rendered

     IMPLEMENTATION NOTE. These are indirection tokens on purpose. If the
     global XENTH operational palette is ever formally unified across
     products, remapping the six values below is the entire change — no
     component, script or content edit is required. Nothing outside this
     block references a Living Spine state colour directly.                */
  --spine-unknown:     var(--xenth-border);
  --spine-discovered:  var(--xenth-text-dim);
  --spine-validated:   var(--xenth-text-muted);
  --spine-authorized:  var(--xenth-text);
  --spine-operational: var(--xenth-signal);
  --spine-exception:   transparent;   /* no visible state without a real fault */

  /* --- Type families (LOCKED — no new fonts) ---------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Type scale — fluid, per TYPOGRAPHY_SYSTEM.md ---------------------- */
  --t-hero:    clamp(2.75rem, 1.30rem + 6.20vw, 5.50rem);  /*  44 →  88px */
  --t-h2:      clamp(2.00rem, 1.34rem + 2.80vw, 3.50rem);  /*  32 →  56px */
  --t-h3:      clamp(1.375rem, 1.13rem + 1.05vw, 1.9375rem);
  --t-h4:      clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --t-lead:    clamp(1.0625rem, 0.97rem + 0.42vw, 1.3125rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-label:   0.6875rem;

  --lh-hero:  0.98;
  --lh-head:  1.08;
  --lh-body:  1.62;

  --tr-hero:  -0.038em;
  --tr-head:  -0.022em;
  --tr-label:  0.12em;

  /* --- Spacing scale (4px 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:   2.5rem;
  --s-8:   3rem;
  --s-9:   4rem;
  --s-10:  5rem;
  --s-11:  6.5rem;
  --s-12:  8rem;

  /* Section rhythm — spacious operating fields, not dashboard density */
  --section-y: clamp(4rem, 2.6rem + 6vw, 8.5rem);

  /* --- Containers ------------------------------------------------------- */
  --container:      76rem;   /* 1216px — primary page container */
  --container-wide: 88rem;
  --container-text: 44rem;   /* ~65-72ch measure for prose */
  --gutter: clamp(1.25rem, 0.85rem + 1.9vw, 2.5rem);

  /* --- Borders & radii — architectural, not soft ------------------------- */
  --radius:    4px;
  --radius-lg: 6px;
  --hairline:  1px;

  /* --- Motion — essential behavior only ---------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  620ms;

  /* --- Focus ------------------------------------------------------------- */
  --focus-ring: 2px solid var(--xenth-signal);
  --focus-offset: 3px;
}

/* Breakpoints are documented here for builders; CSS uses them literally.
   sm 480px · md 720px · lg 960px · xl 1200px                                */