:root {
  /* Colors - Dark Theme */
  --color-bg: #000000;
  --color-bg-elevated: #242424;
  --color-header-serif: #F2F2F2;
  --color-header-accent: #E3561F;
  --color-body-text: #E0E0E0;
  --color-ui-text: #B8B8B8;
  --color-ui-active: #F2F2F2;
  --color-divider: #2A2A2A;
  --color-focus: #E3561F;

  /* Typography - Web-Safe Font Stacks */
  --font-serif: 'Times New Roman', Times, Georgia, serif;
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Typography - NYTimes-style sizes (responsive) */
  /* Body: 22px desktop, 18px mobile */
  --text-body: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  /* Small/UI: 14px desktop, 13px mobile */
  --text-small: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);
  /* H1: 48px desktop, 32px mobile */
  --text-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
  /* H2: 32px desktop, 26px mobile */
  --text-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2rem);
  /* H3: 24px desktop, 20px mobile */
  --text-h3: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  /* H4: 20px desktop, 18px mobile */
  --text-h4: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  /* Blockquote: 24px desktop, 20px mobile */
  --text-quote: clamp(1.25rem, 1rem + 1vw, 1.5rem);

  /* Line Heights - NYTimes style */
  --lh-body: 1.62;      /* Comfortable long-form reading */
  --lh-heading: 1.125;    /* Tight headlines */
  --lh-tight: 1.2;        /* For smaller headings */
  --lh-quote: 1.45;       /* Pull quotes */

  /* Letter Spacing */
  --ls-tight: -0.01em;    /* Headlines */
  --ls-normal: 0;         /* Body */
  --ls-wide: 0.05em;      /* UI elements, all-caps */

  /* Spacing - 8px base scale */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.25rem;  /* 20px - paragraph spacing */
  --space-4: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-12: 6rem;    /* 96px */
  --space-16: 8rem;    /* 128px */

  /* Layout */
  --container-max: 1200px;
  --content-max: 665px;  /* Optimal reading width */
  --timeline-card-width: 480px;

  /* Animation */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index layers */
  --z-header: 100;
  --z-modal: 200;
  --z-tooltip: 300;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}