/* ==========================================================================
   Assertica — "New Era" token EXTENSION layer
   --------------------------------------------------------------------------
   This file adds tokens. It never redefines an existing one.

   Every `--blue`, `--orange`, `--navy`, `--purple`, `--font-display`,
   `--font-body` … in the production theme keeps its exact production value.
   New Era only introduces:
     1. a deeper end of the navy ramp (the "void" the particles live in),
     2. glass-surface tokens for the frosted overlays,
     3. a light display weight role for the cinematic type,
     4. motion tokens for scroll-scrubbed choreography.

   Load order is mandatory:
       assertica-theme/style.css   (or design-system styles.css)  ← brand
       design-system/new-era/tokens.css                           ← this file
       design-system/new-era/new-era.css                          ← components
   ========================================================================== */

/* Webfonts are enqueued by functions.php as a <link>; an @import here
   would not begin downloading until this file had already arrived. */

:root {
  /* --- Brand anchors, restated for standalone use -------------------------
     Identical values to assertica-theme/style.css. Declared here only so this
     layer renders on its own; when the theme is loaded these are no-ops. */
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --blue-light: #60A5FA;
  --orange: #F97316;
  --orange-light: #FB923C;
  --navy: #0F172A;
  --navy-light: #1E293B;
  --slate: #334155;
  --gray: #94A3B8;
  --light: #F1F5F9;
  --white: #FFFFFF;
  --purple: #8B5CF6;
  --purple-light: #A78BFA;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* --- 1. The void ramp ---------------------------------------------------
     Navy is the brand's dark canvas, but a star field needs to go darker than
     #0F172A or the particles have nothing to sit against. These extend the
     SAME hue family downward — they do not replace --navy, which stays the
     raised surface colour. */
  --void:        #04060D;   /* deepest — the page ground */
  --void-2:      #070A14;   /* one step up — section wash */
  --void-3:      #0A0E1B;   /* nearest to --navy, blends into the theme */

  /* --- 2. Glass surfaces --------------------------------------------------
     The frosted overlay panels. Kept as rgba over the void, never as a solid,
     so the particle field reads through them. */
  --glass:            rgba(255, 255, 255, 0.035);
  --glass-strong:     rgba(255, 255, 255, 0.06);
  --glass-border:     rgba(255, 255, 255, 0.10);
  --glass-border-lit: rgba(255, 255, 255, 0.20);
  --glass-blur:       18px;

  /* --- Ink on the void ---------------------------------------------------- */
  --ink-bright: rgba(255, 255, 255, 0.96);  /* revealed headline words */
  --ink-dim:    rgba(255, 255, 255, 0.28);  /* un-revealed headline words */
  --ink-body:   rgba(226, 232, 240, 0.74);  /* lead paragraphs   — 8.1:1 on --void */
  --ink-muted:  rgba(203, 213, 225, 0.72);  /* eyebrows, captions — 6.2:1 on --void */

  /* --- Particle field ----------------------------------------------------
     The warm/cool split. These ARE --orange and --blue, expressed as linear
     RGB triplets for the shader. Changing the brand changes the field. */
  --field-warm: 249, 115, 22;   /* --orange */
  --field-cool: 37,  99, 235;   /* --blue   */
  --field-mid:  139,  92, 246;  /* --purple — where the two swarms meet */

  /* --- 3. Cinematic display role ------------------------------------------
     The rest of Assertica sets display type in Space Grotesk 700 / -1.5px.
     Over the particle field that is too heavy — solid strokes fight the
     swarm. New Era keeps the FAMILY and drops the WEIGHT. This role is
     scoped to `.ne` sections only; the 700 ramp is untouched elsewhere. */
  --weight-display-cinematic: 300;
  --text-cinematic: clamp(2.6rem, 6.2vw, 5.6rem);
  --tracking-cinematic: -0.03em;
  --leading-cinematic: 1.06;

  /* --- 4. Motion ----------------------------------------------------------
     The site's own 0.2–0.3s UI motion is unchanged. These are the longer,
     scroll-scrubbed values the canvas choreography needs. */
  --dur-morph:  1200ms;   /* one phase-to-phase particle morph */
  --dur-veil:   600ms;    /* overlay cross-fade */
  --dur-word:   420ms;    /* per-word headline reveal */
  --stagger-word: 55ms;
  --ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-veil: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Control radius -----------------------------------------------------
     Interactive controls (buttons, nav CTA, filters) use a tight radius, not
     the 100px capsule. Nested capsules — a round chip inside a pill button
     inside a pill nav — are the single most dated thing a dark UI can do, and
     12px sits naturally under the 20px glass cards.
     Labels (`.ne-eyebrow`, `.ne-stack` tags) stay pills: the shape difference
     is what tells a label apart from something you can press. */
  --radius-control: 12px;
  --radius-control-sm: 10px;

  /* --- Layout ------------------------------------------------------------- */
  --ne-container: 1200px;   /* same 1200px container as the rest of the site */
  --ne-narrow: 760px;
  --ne-stage: 100svh;       /* one pinned stage = one phase */
}