/* ============================================================
   CASCADE PIXEL — DESIGN TOKENS
   tokens.css · Phase 2A static layout
   All locked values from Visual.md. Secondary tones open.
   ============================================================ */

:root {

  /* ── LOCKED BRAND ANCHORS ─────────────────────────────── */
  --cp-lime:       #C8E83A;
  --cp-teal:       #2BC7B0;
  --cp-cobalt:     #1E5DD8;
  --cp-substrate:  #0A0E12;
  --cp-bone:       #F4F5F1;
  --cp-hud-green:  #2BFF7A;

  /* ── GRADIENT (continuous, never banded) ────────────────  */
  --cp-gradient: linear-gradient(160deg, #C8E83A 0%, #2BC7B0 50%, #1E5DD8 100%);
  --cp-gradient-text: linear-gradient(135deg, #C8E83A 0%, #2BC7B0 45%, #1E5DD8 100%);
  --cp-gradient-horizontal: linear-gradient(90deg, #C8E83A 0%, #2BC7B0 50%, #1E5DD8 100%);

  /* ── SECONDARY TONES (designer-open, extend between anchors) */
  --cp-ink:          #060A0D;   /* deeper than substrate, near-black */
  --cp-substrate-2:  #131820;   /* slightly lifted dark (from v2 scaffold) */
  --cp-substrate-3:  #1B2230;   /* card bg on dark (from v2 scaffold) */
  --cp-dark-1:       #0F1820;   /* alias of substrate-2 */
  --cp-dark-2:       #141F2A;   /* medium dark surface */
  --cp-dark-3:       #1A2535;   /* lighter dark surface */
  --cp-mid-1:        #8A9AAB;   /* mid-gray body text on dark */
  --cp-mid-2:        #5C6B7A;   /* subdued, metadata on dark */
  --cp-mid-gray:     #5C6470;   /* copy on dark (v2) */
  --cp-bone-dim:     #C8C9C5;   /* dimmed bone */
  --cp-bone-dark:    #E8E9E5;   /* bone at lower brightness */
  --cp-bone-2:       #ECEDE7;   /* near-bone for bone-bg surfaces */
  --cp-line:       rgba(10,14,18,0.08); /* hairline on bone */

  /* ── GLASS / TRANSPARENCY TOKENS ──────────────────────── */
  --cp-glass-light:  rgba(244,245,241,0.04);
  --cp-glass-mid:    rgba(244,245,241,0.07);
  --cp-glass-border: rgba(244,245,241,0.10);
  --cp-glass-hover:  rgba(244,245,241,0.12);
  --cp-hud-glow:     rgba(43,255,122,0.12);
  --cp-hud-border:   rgba(43,255,122,0.25);
  --cp-teal-glow:    rgba(43,199,176,0.15);
  --cp-cobalt-glow:  rgba(30,93,216,0.18);

  /* ── TYPOGRAPHY ──────────────────────────────────────────
     Display: Archivo Bold (LOCKED)
     Body:    Inter (OPEN default)
     Mono:    Space Mono (OPEN)
  ─────────────────────────────────────────────────────────── */
  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ── TYPE SCALE (clamp: mobile → desktop) ─────────────── */
  --text-hero:    clamp(3.5rem,  8vw,  7.5rem);
  --text-h1:      clamp(2.5rem,  5vw,  4.5rem);
  --text-h2:      clamp(1.75rem, 3vw,  2.75rem);
  --text-h3:      clamp(1.25rem, 2vw,  1.75rem);
  --text-label:   clamp(0.625rem, 1vw, 0.75rem);
  --text-body-lg: clamp(1rem,    1.5vw, 1.25rem);
  --text-body:    clamp(0.9375rem, 1.2vw, 1.0625rem);
  --text-small:   clamp(0.75rem, 1vw, 0.875rem);
  --text-mono:    clamp(0.6875rem, 0.9vw, 0.8125rem);

  /* ── TRACKING ─────────────────────────────────────────── */
  --track-display: 0.08em;
  --track-label:   0.18em;
  --track-mono:    0.10em;
  --track-normal:  0.01em;

  /* ── SPACING SCALE ────────────────────────────────────── */
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-120: 120px;
  --space-160: 160px;

  /* ── SECTION VERTICAL RHYTHM ─────────────────────────── */
  --section-pad: clamp(80px, 10vw, 160px);

  /* ── LAYOUT ───────────────────────────────────────────── */
  --max-width:   1280px;
  --gutter:      clamp(24px, 5vw, 80px);
  --grid-gap:    clamp(20px, 3vw, 40px);

  /* ── BORDERS (no sectioning borders — only hairlines on components) */
  --radius: 0px;  /* system default: sharp */

  /* ── MOTION ───────────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cascade:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-settle:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  200ms;
  --dur-base:  400ms;
  --dur-slow:  700ms;
  --dur-scene: 1200ms;

  /* ── SHADOWS (tinted, never plain gray) ─────────────────  */
  --shadow-teal:  0 8px 40px rgba(43,199,176,0.12);
  --shadow-cobalt: 0 8px 60px rgba(30,93,216,0.20);
  --shadow-lime:  0 4px 24px rgba(200,232,58,0.15);
  --shadow-hud:   0 0 32px rgba(43,255,122,0.18), 0 0 8px rgba(43,255,122,0.3);

}

/* ── REDUCED MOTION — removed per PATCH4 (always-on motion brand decision) ── */