:root {
  /* ── TYPOGRAPHY ───────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-4xl:  clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-hero: clamp(2.75rem, 5.5vw, 5rem);

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line Heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-base:    1.6;
  --lh-relaxed: 1.75;

  /* Letter Spacing */
  --ls-tight:  -0.03em;
  --ls-snug:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;

  /* ── SPACING ──────────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --section-gap: clamp(4.5rem, 9vw, 8rem);

  /* ── BORDER RADIUS — Playful: rounded, friendly (not bubbly) ─ */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* ── SHADOWS — Playful: soft, diffuse, lightly tinted ─────── */
  --shadow-sm:    0 1px 2px rgba(15, 31, 46, 0.06), 0 2px 6px rgba(15, 31, 46, 0.05);
  --shadow-md:    0 6px 20px rgba(15, 31, 46, 0.08);
  --shadow-lg:    0 18px 50px rgba(15, 31, 46, 0.12);
  --shadow-brand: 0 10px 30px rgba(43, 107, 240, 0.25);

  /* ── TRANSITIONS ──────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-base: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --max-w:      1200px;
  --max-w-text: 640px;
  --max-w-sm:   480px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* ── COLORS — Light, fresh: blue + green ─────────────────── */

  /* Backgrounds — cool light, four distinct values */
  --c-bg:      #F5F9F8;
  --c-bg-2:    #EAF1F0;
  --c-bg-3:    #DEE9E7;
  --c-surface: #FCFEFE;
  --c-dark:    #0E2230;
  --c-dark-2:  #143042;

  /* Brand — confident blue */
  --c-brand:      #2B6BF0;
  --c-brand-2:    #1E54CE;
  --c-brand-3:    #6E9BFF;
  --c-brand-soft: rgba(43, 107, 240, 0.10);
  --c-brand-mid:  rgba(43, 107, 240, 0.28);

  /* Accent — fresh green (pairs with the blue) */
  --c-accent:   #15B981;
  --c-accent-2: #5FD3A8;

  /* Text — deep blue-green ink on cool light */
  --c-text:       #0F1F2E;
  --c-text-2:     #41525E;
  --c-text-3:     #5E6B75;
  --c-text-inv:   #FCFEFE;
  --c-text-brand: #2B6BF0;

  /* Borders */
  --c-border:   rgba(15, 31, 46, 0.10);
  --c-border-2: rgba(15, 31, 46, 0.18);

  /* Status */
  --c-success:    #15B981;
  --c-success-bg: rgba(21, 185, 129, 0.10);
  --c-error:      #E0533D;
  --c-error-bg:   rgba(224, 83, 61, 0.10);
}