:root {
  /* Base font sizes */
  --font-size-base: 16px;
  --font-size-h1: 2rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Container widths */
  --container-max-width: 1200px;
  --container-padding: 1rem;
  
  /* Breakpoints */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* Media query mixins */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.35rem;
    --font-size-h3: 1.15rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.75rem;
  }
}

@media (max-width: 576px) {
  :root {
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1.1rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
  }
}