:root {
  /* ---------- Brand color tokens ---------- */
  /* Primary teal — node graph + vital signal energy */
  --io-teal:        #01E7C1;
  --io-teal-600:    #00C9A8;
  --io-teal-100:    #D6FAF1;

  /* Periwinkle / accent-dark — gradient partner to teal, hover state */
  --io-blue:        #657EFC;
  --io-blue-600:    #4D67E8;
  --io-blue-100:    #E0E5FF;

  /* Deep navy — wordmark + densest brand ink */
  --io-navy:        #16055f;
  --io-ink:         #1a1a2e;       /* primary text */

  /* Surfaces */
  --io-bg:          #ffffff;
  --io-bg-alt:      #f8f8fb;
  --io-bg-dark:     #0b0b1a;

  /* Lines + muted */
  --io-border:      #e5e7eb;
  --io-muted:       #6b7280;

  /* ---------- Semantic surface tokens ---------- */
  --bg:             var(--io-bg);
  --bg-alt:         var(--io-bg-alt);
  --bg-inverse:     var(--io-bg-dark);

  --fg:             var(--io-ink);
  --fg-muted:       var(--io-muted);
  --fg-on-dark:     #ffffff;
  --fg-accent:      var(--io-blue);

  --border:         var(--io-border);
  --border-strong:  #cfd2da;

  --accent:         var(--io-teal);
  --accent-dark:    var(--io-blue);
  --accent-darker:  var(--io-navy);

  /* ---------- Signature gradient ---------- */
  /* The brain logo and #cta banner share this teal→periwinkle ramp. */
  --io-gradient:        linear-gradient(135deg, var(--io-teal) 0%, #818cf8 100%);
  --io-gradient-vert:   linear-gradient(180deg, var(--io-teal) 0%, var(--io-blue) 100%);
  --io-hero-overlay:    radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.1));

  /* ---------- Radii ---------- */
  --radius-sm:  6px;
  --radius:     12px;     /* default card / button */
  --radius-lg:  24px;     /* hero visual block */
  --radius-pill: 999px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-cta:        0 8px 24px rgba(79,70,229,0.30);
  --shadow-btn:        0 8px 24px rgba(0,0,0,0.15);

  /* ---------- Spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 80px;       /* section vertical padding ≈ 5rem */

  --container-max: 1200px;

  /* ---------- Type families ---------- */
  --font-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type sizes (matched to source fluid clamps) ---------- */
  --fs-hero:    clamp(2.2rem, 5vw, 3.5rem);   /* hero h1 — Be Vietnam Pro 700 */
  --fs-h1:      clamp(2rem,   4.5vw, 3rem);
  --fs-h2:      clamp(1.8rem, 4vw,   2.6rem); /* .section-title */
  --fs-h3:      1.5rem;
  --fs-h4:      1.1rem;
  --fs-body-lg: 1.15rem;
  --fs-body:    1rem;
  --fs-sm:      0.95rem;
  --fs-xs:      0.82rem;
  --fs-eyebrow: 0.78rem;     /* .section-label */

  --lh-tight:   1.15;
  --lh-base:    1.6;
  --lh-loose:   1.7;

  --tracking-eyebrow: 0.10em;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 0.2s;
}