/* ── Design tokens ───────────────────────────────────────────────── */

:root {
  /* Brand */
  --brand-600: #124fc4;
  --brand-700: #0d3e9c;
  --brand-50:  #eaf0fc;

  /* Ink (text + borders) */
  --ink-900: #0a1330;
  --ink-700: #1f2a44;
  --ink-500: #5a6578;
  --ink-300: #c7ccd6;
  --ink-100: #f4f6fa;
  --surface: #ffffff;

  /* State */
  --success: #14a36b;
  --warning: #e0a800;
  --danger:  #d93838;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --fs-h1:    clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2:    clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:    1.25rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  --lh-tight: 1.1;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --tracking-tight: -0.02em;

  /* Radii */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10, 19, 48, 0.04);
  --shadow-md: 0 1px 2px rgba(10, 19, 48, 0.04),
               0 8px 24px rgba(10, 19, 48, 0.06);
  --shadow-lg: 0 8px 32px rgba(10, 19, 48, 0.10),
               0 2px 6px rgba(10, 19, 48, 0.05);
  --shadow-btn: 0 1px 2px rgba(13, 62, 156, 0.18),
                0 4px 12px rgba(18, 79, 196, 0.20);
  --ring-brand: 0 0 0 3px rgba(18, 79, 196, 0.18);
  --ring-danger: 0 0 0 3px rgba(217, 56, 56, 0.18);

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
  --section-pad-y: 64px;

  /* Motion */
  --t-fast: 200ms ease;
  --t-base: 250ms cubic-bezier(.2, .8, .2, 1);

  /* Z-index */
  --z-header: 50;
  --z-mobile-menu: 60;
  --z-modal: 100;
  --z-toast: 110;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-pad-y: 96px;
  }
}