/* ═══════════════════════════════════════════════════════════════════
   THE CONSTRUCT — DESIGN TOKENS · v2.0 · PRODUCTION
   Canonical token sheet. Import this on any Construct surface,
   before the surface's own stylesheet:
   <link rel="stylesheet" href="design/tokens.css" />
   Source of truth: design/index.html (the Design System document)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ─── Void (backgrounds) ─── */
  --bg-0: #04050a;   /* base canvas — the void */
  --bg-1: #07080d;   /* card surface */
  --bg-2: #0a0c12;   /* elevated surface */
  --bg-3: #0e1018;   /* highest surface (active seg, hover) */

  /* ─── Lines ─── */
  --line:   #1a1d28; /* primary divider / card border */
  --line-2: #14171f; /* secondary / hairline */

  /* ─── Neutrals (structure) ─── */
  --n0: #ffffff;     /* peak — display headlines only */
  --n1: #d2d7e0;     /* primary text & strokes */
  --n2: #7a8090;     /* secondary text */
  --n3: #4a4f60;     /* tertiary / disabled / faint marks */
  --n4: #2a2e3a;     /* ghost borders / ticks */

  /* ─── Warm · Aon (ascendant — never used for Eon) ─── */
  --warm-0: #fffdf5;
  --warm-1: #fbecc8;   /* primary warm accent */
  --warm-2: #a18856;   /* muted warm / warm meta text */
  --warm-3: #5a5246;   /* warm ghost */
  --warm-glow: #ff9d3d; /* bloom & shadow only — never text */

  /* ─── Cool · Eon (descendant — never used for Aon) ─── */
  --cool-0: #ffffff;
  --cool-1: #cfe6f5;   /* primary cool accent */
  --cool-2: #7cb6e8;   /* muted cool */
  --cool-3: #5b7fa6;   /* cool meta text */
  --cool-4: #3f4660;   /* cool ghost */
  --cool-glow: #7c5cff; /* bloom & shadow only — never text */

  /* ─── Type ─── */
  --display: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Display scale (fluid) */
  --fs-display-xl: clamp(48px, 9.5vw, 150px);  /* w200 · lh 0.90 · ls -0.04em  */
  --fs-display-l:  clamp(38px, 6vw, 84px);     /* w200 · lh 0.98 · ls -0.025em */
  --fs-display-m:  clamp(26px, 3.4vw, 46px);   /* w300 · lh 1.04 · ls -0.015em */
  --fs-display-s:  clamp(22px, 2vw, 28px);     /* w400 · lh 1.1  · ls -0.01em  */
  /* Body scale */
  --fs-lede: clamp(16px, 1.5vw, 21px);         /* w300 · lh 1.6 */
  --fs-body: 15px;                             /* w300 · lh 1.6 */
  --fs-body-s: 14px;                           /* w300 · lh 1.6 */
  /* Meta (mono · uppercase) */
  --fs-meta: 10px;                             /* ls 0.34em */
  --fs-meta-sm: 9px;                           /* ls 0.30em */

  /* ─── Spacing & layout ─── */
  --space-1: 8px;     /* inline rhythm */
  --space-2: 16px;    /* stack within a card */
  --space-3: 24px;    /* between cards */
  --space-4: 40px;    /* heading → content */
  --space-5: 64px;    /* between sub-sections */
  --space-6: 120px;   /* between major sections */
  --edge: clamp(20px, 4.5vw, 76px);   /* page side gutter */
  --rail: 54px;                       /* HUD rail width */
  --container-max: 1400px;
  --container-narrow: 880px;

  /* ─── Motion ─── */
  --motion: 1;        /* global scalar 0–2 · all durations divide by it */
  --glow: 1;          /* accent bloom intensity 0–2 */
  --void-lift: 0;     /* 0 deep void … 1 lifted */
  --ease-out:   cubic-bezier(.2, .7, .3, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .2s;      /* hover feedback */
  --t-base: .35s;     /* state changes */
  --t-slow: .9s;      /* reveals */
  --t-breath: 5s;     /* ambient breathing (4–6s band) */
  --t-sweep: 60s;     /* rotations (30–80s band, linear) */
}

/* ─── Canonical motion primitives ───
   Ambient loops are 4–6s ease-in-out. Rotation is linear.
   Scale every duration by the --motion contract:
   animation-duration: calc(var(--t-breath) / max(var(--motion), .2)); */
@keyframes ct-breath  { 0%, 100% { opacity: .8; }  50% { opacity: 1; } }
@keyframes ct-bloom   { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.025); opacity: .85; } }
@keyframes ct-rise    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ct-pulse   { 0%, 100% { opacity: .4; }  50% { opacity: 1; } }
@keyframes ct-sweep   { to { transform: rotate(360deg); } }
@keyframes ct-flicker { 0%, 100% { opacity: .3; }  50% { opacity: 1; } }

/* ─── Reduced motion: stillness is a valid state of the structure ─── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}