:root {
  --color-ink: #0A1628;
  --color-ink-2: #0D2240;
  --color-accent: #4FC3C8;
  --color-accent-2: #38A5AB;
  --color-accent-soft: rgba(79, 195, 200, 0.1);
  --color-accent-border: rgba(79, 195, 200, 0.2);
  --color-cream: #FAFAF7;
  --color-white: #ffffff;

  --color-ink-5: rgba(10, 22, 40, 0.05);
  --color-ink-10: rgba(10, 22, 40, 0.1);
  --color-ink-60: rgba(10, 22, 40, 0.6);
  --color-ink-70: rgba(10, 22, 40, 0.7);
  --color-ink-80: rgba(10, 22, 40, 0.8);
  --color-ink-85: rgba(10, 22, 40, 0.85);

  --color-cream-5: rgba(250, 250, 247, 0.05);
  --color-cream-10: rgba(250, 250, 247, 0.1);
  --color-cream-40: rgba(250, 250, 247, 0.4);
  --color-cream-50: rgba(250, 250, 247, 0.5);
  --color-cream-60: rgba(250, 250, 247, 0.6);
  --color-cream-70: rgba(250, 250, 247, 0.7);
  --color-cream-75: rgba(250, 250, 247, 0.75);
  --color-cream-85: rgba(250, 250, 247, 0.85);
  --color-cream-90: rgba(250, 250, 247, 0.9);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.25rem, 5.5vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 3.5vw, 3rem);
  --fs-h3: 1.5rem;
  --fs-lead: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  --max-w-3: 48rem;
  --max-w-5: 64rem;
  --max-w-6: 72rem;

  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 22, 40, 0.06);
  --shadow-lg: 0 10px 30px rgba(10, 22, 40, 0.08);

  --bp-md: 768px;
  --bp-lg: 1024px;

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-ink);
  background: var(--color-cream);
}

::selection {
  background: var(--color-accent);
  color: var(--color-ink);
}

*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}