:root {
  --color-bg: #ffffff;
  --color-surface: #f7f8fb;
  --color-surface-2: #eef1f6;
  --color-ink: #0b1220;
  --color-ink-muted: #475569;
  --color-brand: #1e3a8a;
  --color-brand-strong: #1e2a6b;
  --color-brand-soft: #eef2ff;
  --color-accent: #0ea5a1;
  --color-accent-ink: #047773;
  --color-warn: #b45309;
  --color-error: #b91c1c;
  --color-success: #047857;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-focus-on-light: #2563eb;
  --color-focus-on-dark: #ffffff;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display: 36px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body-lg: 17px;
  --fs-body: 16px;
  --fs-small: 14px;

  --lh-display: 1.1;
  --lh-tight: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.25;
  --lh-body: 1.55;

  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 18, 32, 0.08);
  --shadow-lg: 0 16px 40px rgba(11, 18, 32, 0.12);

  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 200ms;
}

@media (min-width: 600px) {
  :root {
    --fs-display: 44px;
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-body-lg: 18px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 56px;
    --fs-h1: 40px;
    --fs-h2: 32px;
    --fs-h3: 22px;
    --fs-body: 17px;
    --lh-display: 1.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}