/* Formative Labs — design tokens
   Single source of truth for all design values.
   Referenced by DESIGN.md; consumed by every page.
   ─────────────────────────────────────────────── */
:root {

  /* ── Colors ──────────────────────────────────────────────────────────────── */

  /* Brand palette */
  --color-void:         #111114;   /* base surface */
  --color-void-overlay: rgba(17,17,20,0.92); /* navbar backdrop */
  --color-surface:      #2a2a35;   /* elevated surface, scrollbar */
  --color-near-void:    #0a0a0c;   /* CTA text on gradient */
  --color-teal:         #00e5c3;   /* Live Teal — active signal, ≤10% surface */
  --color-blue:         #3b7cf4;   /* Steady Blue — depth partner */
  --color-violet:       #a78bfa;   /* Observe Violet — product tier only */

  /* Text */
  --text-primary:       #e8e8ef;   /* Monitor White — primary text */
  --text-secondary:     rgba(232,232,239,0.6);  /* Dim White — nav, sub-headings */
  --text-muted:         rgba(232,232,239,0.35); /* labels, captions */
  --text-faint:         rgba(232,232,239,0.25); /* dates, counts */

  /* Surfaces & borders */
  --border-hairline:    rgba(255,255,255,0.06); /* section dividers */
  --border-soft:        rgba(255,255,255,0.08); /* card edges at rest */
  --surface-card:       rgba(255,255,255,0.025); /* card bg one step above void */
  --surface-raised:     rgba(255,255,255,0.04);  /* slightly elevated */

  /* Gradients */
  --gradient-stack:     linear-gradient(135deg, #00e5c3, #3b7cf4); /* primary CTAs */
  --gradient-progress:  linear-gradient(90deg,  #00e5c3, #3b7cf4); /* scroll/scan bars */

  /* ── Typography ──────────────────────────────────────────────────────────── */

  --font-serif:   'Instrument Serif', Georgia, serif;
  --font-sans:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Scale */
  --text-display:       clamp(52px, 8vw, 96px);   /* articles.html h1 */
  --text-article-hero:  clamp(48px, 7.5vw, 96px); /* article.html h1 */
  --text-headline-lg:   clamp(36px, 5vw, 62px);   /* featured article title */
  --text-headline:      clamp(20px, 2.6vw, 30px); /* standard article title */
  --text-body:          clamp(16px, 1.8vw, 18px); /* prose body */
  --text-label:         12px;   /* labels, filters */
  --text-fine:          11px;   /* mono caps, dates */

  /* ── Spacing ─────────────────────────────────────────────────────────────── */

  --space-page:         40px;   /* horizontal page padding */
  --space-nav:          64px;   /* navbar height */
  --space-section-sm:   80px;
  --space-section-lg:   120px;

  /* ── Border radii ────────────────────────────────────────────────────────── */

  --radius-pill:        100px;
  --radius-card:        14px;
  --radius-btn:         8px;
  --radius-tag:         6px;

  /* ── Motion ──────────────────────────────────────────────────────────────── */

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);  /* standard decelerate */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* tag pill activate */
}