:root {
  --color-primary-red: #d71920;
  --color-deep-red: #a90f16;
  --color-near-black: #0b0d10;
  --color-industrial-dark: #15191e;
  --color-graphite: #252b32;
  --color-white: #ffffff;
  --color-off-white: #f6f7f8;
  --color-light-gray: #e7e9ec;
  --color-mid-gray: #a4aab2;
  --color-text-gray: #5e6670;

  --color-surface-page: var(--color-white);
  --color-surface-muted: var(--color-off-white);
  --color-surface-dark: var(--color-industrial-dark);
  --color-text-primary: var(--color-near-black);
  --color-text-secondary: var(--color-text-gray);
  --color-text-inverse: var(--color-white);
  --color-border-subtle: var(--color-light-gray);
  --color-link: var(--color-deep-red);
  --color-link-hover: var(--color-primary-red);
  --color-focus: var(--color-primary-red);

  --font-family-base: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-base: 1rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.6;
  --line-height-heading: 1.2;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --container-sm: 42rem;
  --container-md: 64rem;
  --container-lg: 78rem;
  --container-xl: 90rem;
  --container-gutter: clamp(1rem, 4vw, 2rem);

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --shadow-subtle: 0 0.5rem 1.5rem rgb(11 13 16 / 8%);
  --transition-base: 160ms ease;
  --z-index-header: 50;

  --breakpoint-sm: 390px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;
}