:root {
  --color-brand: #99c417;
  --color-text-primary: #111111;
  --color-text-secondary: #666666;
  --color-background: #fafaf8;
  --color-surface: #ffffff;
  --color-surface-secondary: #f3f3ef;
  --color-border: #e5e5e0;

  --font-family-base: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --font-size-display-xl: clamp(3.75rem, 7vw, 6.5rem);
  --font-size-display-l: clamp(2.75rem, 5vw, 4.5rem);
  --font-size-heading-m: clamp(2rem, 3vw, 2.875rem);
  --font-size-heading-s: clamp(1.375rem, 2vw, 1.875rem);
  --font-size-body-l: 1.125rem;
  --font-size-body: 1rem;
  --font-size-caption: 0.875rem;
  --font-size-label: 0.75rem;

  --line-height-tight: 1.04;
  --line-height-heading: 1.12;
  --line-height-body: 1.75;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --radius-s: 1.25rem;
  --radius-m: 1.5rem;
  --radius-l: 2rem;

  --border-subtle: 1px solid var(--color-border);

  --button-height-base: 3rem;
  --button-height-header: 2rem;

  --container-max: 90rem;
  --content-max: 80rem;

  --breakpoint-tablet: 64rem;
  --breakpoint-mobile: 48rem;

  --z-header: 20;
  --z-panel: 25;
  --z-mobile-nav: 40;

  --transition-base: 220ms ease;
  --transition-slow: 320ms ease;

  --shadow-soft: 0 20px 50px rgba(17, 17, 17, 0.06);
}