:root {
  /* Color tokens mapped to existing theme palette */
  --color-bg: #ffffff; /* page backgrounds */
  --color-fg: #111111; /* default text */
  --color-muted: #6d6d6d; /* secondary text (#6D6D6D) */
  --color-accent: #0099e5; /* primary links/buttons */
  --color-accent-contrast: #ffffff;
  --color-danger: #ff4c4c; /* error/attention */
  --color-dark: #191e21; /* header background */
  --color-light: #f9f9f9; /* light surfaces */
  --color-border: #d1e0ee; /* light borders (#D1E0EE) */

  /* Spacing scale */
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 0.75rem;
  --size-4: 1rem;
  --size-5: 1.25rem;
  --size-6: 1.5rem;
  --size-7: 2rem;
  --size-8: 3rem;

  /* Typography */
  --font-sans: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-condensed: "Ubuntu Condensed", var(--font-sans);
  --font-size-0: 0.875rem;
  --font-size-1: 1rem;
  --font-size-2: 1.125rem;
  --font-size-3: clamp(1.125rem, 1vw + 1rem, 1.375rem);
  --font-size-4: clamp(1.25rem, 1.25vw + 1rem, 1.75rem);
  --line-height: 1.5;

  /* Radii & shadows */
  --radius-1: 4px;
  --radius-2: 8px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.12);

  /* Z-index */
  --z-header: 1000;
  --z-overlay: 1100;

  /* Breakpoints (used for container queries fallbacks) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b0b0b;
    --color-fg: #f3f4f6;
    --color-muted: #9ca3af;
    --color-border: #1f2937;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}