:root{
  /* Brand colors */
  --brand-50:#eff6ff;
  --brand-100:#dbeafe;
  --brand-200:#bfdbfe;
  --brand-300:#93c5fd;
  --brand-400:#60a5fa;
  --brand-500:#3b82f6;
  --brand-600:#1d4ed8; /* primary */
  --brand-700:#1e40af;
  --brand-800:#1e3a8a;
  --brand-900:#172554;

  /* Accent (CTA) — pick one; keep emerald for now */
  --accent:#10b981;

  /* Neutral / UI */
  --bg:#ffffff;
  --bg-soft:#fafafa;
  --text:#0f172a;       /* slate-900 */
  --text-muted:#475569; /* slate-600 */
  --border:#e5e7eb;     /* gray-200 */
  --shadow:0 8px 24px rgba(0,0,0,.08);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --fs-hero: clamp(28px, 5vw, 48px);
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-body: 16px;
  --lh: 1.5;

  /* Layout */
  --container: 1200px;
  --radius: 12px;

  /* Spacing */
  --s-0:0;
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-8:32px;
  --s-10:40px;
  --s-12:48px;
  --s-16:64px;
  --s-20:80px;
  --s-24:96px;
  --s-28:112px;
  --section-y: clamp(18px, 4vw, 48px);

}