/* ============================================================
   tokens.css - design tokens (colors, type, spacing, elevation).
   Load FIRST. The palette is the Optimus light + cyan theme
   (white surfaces, slate text, cyan-700 accents; WCAG AA).
   ============================================================ */
:root{
  /* Surfaces */
  --bg:#ffffff;
  --bg-elevated:#f1f5f9;
  --bg-card:#ffffff;
  --soft:#f8fafc;

  /* Text */
  --fg:#334155;        /* slate-700 body */
  --fg-bright:#0f172a; /* slate-900 headings */
  --muted:#64748b;     /* slate-500 secondary (AA on white) */

  /* Lines */
  --line:#e2e8f0;
  --line-bright:#cbd5e1;

  /* Brand (cyan) - cyan-700 for accent TEXT so it passes AA on white */
  --brand:#0e7490;
  --brand-dark:#155e75;
  --brand-light:#0e7490;
  --accent:#0891b2;
  --accent-dim:#0e7490;
  --ring:#22d3ee;

  /* Status */
  --success:#059669;
  --warning:#d97706;

  /* Elevation & glow (soft, slate-tinted for white surfaces) */
  --shadow: 0 1px 3px rgba(15,23,42,.08), 0 6px 20px rgba(15,23,42,.06);
  --shadow-lg: 0 10px 34px rgba(15,23,42,.12), 0 3px 10px rgba(15,23,42,.07);
  --glow: 0 6px 18px rgba(8,145,178,.20);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  --gradient-accent: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  --gradient-dark: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);

  /* Typography */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; /* bold display headings */

  /* Dark "stage" band tokens (used by .band--dark sections) */
  --bg-dark:#0a1426;
  --fg-on-dark:#eaf1fb;
  --muted-on-dark:rgba(255,255,255,.72);
  --brand-on-dark:#5fd4ec;   /* brighter cyan that reads on dark */
  --line-on-dark:rgba(255,255,255,.12);

  /* Spacing / shape */
  --container:1180px;
  --radius:20px;
  --radius-sm:12px;
  --header-h:90px;
  --section-y:clamp(72px, 9vw, 132px); /* roomier vertical rhythm */

  /* Layering */
  --z-header:50;
  --z-canvas:0;
}