:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-ink: #0b1b2b;
  --color-muted: #44546a;
  --color-line: #d6e0ea;
  --color-link: #0b5ea8;
  --color-eyebrow: #8fd3ff;
  --color-accent: #8fd3ff;
  --color-accentInk: #0b1b2b;
  --color-focus: #0b5ea8;
  --color-brand: #0b1b2b;
  --color-brandInk: #ffffff;
  --color-heroBg: #0b1b2b;
  --color-heroInk: #ffffff;
  --color-heroMuted: #c5d2df;
  --color-tint: #e8f4fd;
  --font-body: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --size-xs: 13px;
  --size-sm: 15px;
  --size-base: 17px;
  --size-lg: 20px;
  --size-xl: 24px;
  --size-2xl: 34px;
  --size-3xl: 44px;
  --size-4xl: 68px;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --leading-tight: 1.05;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-btn: 2px;
  --radius-card: 4px;
}
/* Breakpoints (media queries cannot use variables): md=768px, lg=1080px, xl=1152px */