/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  --bg:          #edf5ff;
  --surface:     rgba(255,255,255,0.78);
  --surface-s:   #ffffff;
  --glass:       rgba(255,255,255,0.62);
  --hover:       rgba(59,130,246,0.055);

  --border:      rgba(99,155,230,0.16);
  --border-md:   rgba(99,155,230,0.26);
  --border-hi:   rgba(59,130,246,0.42);

  --text:        #1c3558;
  --text-2:      #4a6a8f;
  --text-3:      #93aec8;

  --blue:        #3b82f6;
  --blue-2:      #14d9c4;
  --grad:        linear-gradient(135deg, #3b82f6 0%, #14d9c4 100%);
  --blue-dim:    rgba(59,130,246,0.10);
  --blue-glow:   rgba(59,130,246,0.22);
  --teal:        #0ea5c9;
  --teal-dim:    rgba(14,165,201,0.10);

  --red:         #ef4444;
  --red-dim:     rgba(239,68,68,0.09);
  --amber:       #f59e0b;
  --amber-dim:   rgba(245,158,11,0.10);
  --green:       #10b981;
  --green-dim:   rgba(16,185,129,0.10);
  --purple:      #8b5cf6;
  --purple-dim:  rgba(139,92,246,0.10);
  --accent:      #6366f1;

  --font:        'Nunito', sans-serif;
  --mono:        'DM Mono', monospace;

  --r-sm:        8px;
  --r:           12px;
  --r-lg:        16px;
  --r-xl:        22px;
  --r-pill:      999px;

  --sh-xs:  0 1px 4px rgba(30,90,180,0.06);
  --sh-sm:  0 2px 12px rgba(30,90,180,0.09);
  --sh:     0 4px 24px rgba(30,90,180,0.11);
  --sh-lg:  0 8px 40px rgba(30,90,180,0.14);
  --sh-xl:  0 16px 64px rgba(30,90,180,0.18);
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}