:root {
  /* Colors */
  --color-bg: #FFFFFF;             /* Clinical White */
  --color-bg-alt: #F4F4F0;         /* Off-white / Muted */
  --color-text: #111111;           /* Graphite */
  --color-text-light: #555555;
  --color-accent: #E5FF00;         /* Safety Yellow (for highlights, not text) */
  --color-accent-dark: #C2D900;
  --color-primary: #1F2937;        /* Dark Slate */
  --color-border: #E5E7EB;
  --color-error: #EF4444;
  --color-success: #10B981;

  /* Typography */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  /* Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;

  /* Layout */
  --max-width: 1440px;
  --container-px: var(--space-4);

  /* Radii - Sharp edges, brutalist */
  --radius-none: 0px;

  /* Borders */
  --border-thin: 1px solid var(--color-border);
  --border-thick: 4px solid var(--color-text);
}

@media (min-width: 768px) {
  :root {
    --container-px: var(--space-8);
  }
}