:root {
  /* color */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f7fa;
  --color-surface: #ffffff;
  --color-border: #e6e8ec;
  --color-text: #14161a;
  --color-text-muted: #5b6270;
  --color-accent: #8b0032;
  --color-accent-dark: #6e0027;
  --color-accent-contrast: #ffffff;
  --color-header-bg: rgba(255, 255, 255, 0.85);
  --color-brand-gray: #8993a6;

  /* type */
  --font-display: 'Manrope', 'Arial', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-hero: clamp(2.25rem, 3.5vw + 1.25rem, 4.5rem);
  --fs-h2: clamp(1.5rem, 1.2vw + 1.2rem, 2.5rem);
  --fs-h3: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* spacing (4px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* layout */
  --container-max: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 12px;
  --radius-sm: 8px;
  --header-height: 76px;
  --transition: 180ms ease;
}