/* ====== Design Tokens ====== */
:root{
  --bg:#0b1020; --surface:#0f152b; --card:#121830; --elevated:#152040;
  --muted:#97a0c3; --text:#e6e9f5; --subtle:#c9d3ff;

  /* Brand & accent */
  --brand:#5eead4; --brand-600:#4bd6c1; --brand-700:#2ab5a1;
  --accent:#7aa2ff; --accent-700:#547fe6;

  /* Semantics */
  --success:#39d98a; --warn:#ffd166; --danger:#ff6b6b;

  /* Families */
  --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d;
  --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c;
  --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;

  /* Tints */
  --brand-tint:rgba(94,234,212,.28);
  --green-tint:rgba(34,197,94,.18);
  --red-tint:rgba(239,68,68,.18);
  --blue-tint:rgba(59,130,246,.18);

  /* Fields */
  --field-bg:#ffffff; --field-text:#0f1429; --field-border:#c9d3ff;
  --field-placeholder:#6b7394; --field-focus-bg:#ffffff;
  --field-focus-brd:var(--accent-700);
  --field-ring:0 0 0 3px rgba(59,130,246,.18);

  /* Elevation / radii */
  --shadow-1:0 6px 20px rgba(0,0,0,.25);
  --shadow-2:0 10px 35px rgba(0,0,0,.32),0 2px 10px rgba(0,0,0,.2);
  --radius-sm:10px; --radius:16px; --radius-lg:22px;

  /* Focus rings */
  --ring:0 0 0 3px var(--brand-tint);
  --ring-green:0 0 0 3px var(--green-tint);
  --ring-red:0 0 0 3px var(--red-tint);
  --ring-blue:0 0 0 3px var(--blue-tint);

  /* Spacing & type */
  --maxw:1200px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem; --space-8:2.5rem; --space-9:3rem;

  --lead:clamp(1.9rem,1.2rem + 2vw,2.6rem);
  --h1:clamp(1.6rem,1.1rem + 1.5vw,2rem);
  --h2:clamp(1.25rem,1rem + .8vw,1.5rem);
  --h3:clamp(1.1rem,.96rem + .4vw,1.25rem);
  --body:clamp(.98rem,.93rem + .2vw,1.05rem);
  --small:.92rem;

  /* Transitions */
  --t-fast:120ms ease;
  --t:180ms cubic-bezier(.2,.7,.2,1);
}

/* Light mode */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f7ff; --surface:#fff; --card:#fff; --elevated:#f7f9ff;
    --text:#0f1429; --muted:#5a6384; --subtle:#394264;
    --shadow-1:0 6px 20px rgba(18,24,48,.08);
    --shadow-2:0 14px 35px rgba(18,24,48,.12);
    --field-bg:#fff; --field-text:#0f1429; --field-border:#c9d3ff;
    --field-placeholder:#6b7394; --field-focus-bg:#fff; --field-focus-brd:var(--accent-700);
    --field-ring:0 0 0 3px rgba(84,127,230,.22);
    --brand-tint:rgba(84,127,230,.22);
    --green-tint:rgba(34,197,94,.14);
    --red-tint:rgba(239,68,68,.14);
    --blue-tint:rgba(59,130,246,.14);
    --ring:0 0 0 3px var(--brand-tint);
    --ring-green:0 0 0 3px var(--green-tint);
    --ring-red:0 0 0 3px var(--red-tint);
    --ring-blue:0 0 0 3px var(--blue-tint);
  }
}