:root {
  --c3-white: #fff;
  --c3-surface: #f8f8fa;
  --c3-surface-strong: #f4f4f5;
  --c3-black: #000;
  --c3-black-hover: #18181b;
  --c3-text: #000;
  --c3-text-secondary: #52525b;
  --c3-text-muted: #71717a;
  --c3-border: #e5e5e7;
  --c3-border-strong: #d4d4d8;
  --c3-overlay: rgba(0, 0, 0, .38);
  --fs-h1: clamp(2.5rem, 1.95rem + 1.48vw, 4rem);
  --fs-h2: clamp(2rem, 1.63rem + .99vw, 3rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .48vw, 1.75rem);
  --fs-body-lg: clamp(1rem, .955rem + .12vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;
  --fs-label: .8125rem;
  --lh-display: .98;
  --lh-heading: 1.08;
  --lh-body: 1.5;
  --lh-small: 1.4;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --motion-fast: 140ms;
  --motion-default: 180ms;
  --motion-drawer: 240ms;
  --z-base: 1;
  --z-sticky-atc: 850;
  --z-header: 900;
  --z-overlay: 950;
  --z-drawer: 1000;
  --z-modal: 1100;
  --c3-gutter: 16px;
}

@media (min-width: 375px) { :root { --c3-gutter: 20px; } }
@media (min-width: 768px) { :root { --c3-gutter: 32px; } }
@media (min-width: 1024px) { :root { --c3-gutter: 40px; } }
@media (min-width: 1440px) { :root { --c3-gutter: 48px; } }
@media (min-width: 1920px) { :root { --c3-gutter: 64px; } }