:root {
  /* === Planet Earth Dark Palette === */
  --color-bg:            #0A0E1A;
  --color-bg-alt:        #131829;
  --color-surface:       #161B2E;
  --color-text:          #E8E4DE;
  --color-text-muted:    #8B8680;
  --color-accent:        #60A5FA;
  --color-accent-light:  rgba(96, 165, 250, 0.15);
  --color-border:        rgba(255, 255, 255, 0.08);

  /* Zone colors — brighter for dark backgrounds */
  --color-zone-build:    #60A5FA;
  --color-zone-pipeline: #A78BFA;
  --color-zone-run:      #34D399;
  --color-zone-product:  #FBBF24;
  --color-zone-ai:       #F472B6;

  /* Zone badge backgrounds — dark tinted */
  --color-badge-build-bg:    rgba(96, 165, 250, 0.15);
  --color-badge-build-fg:    #93C5FD;
  --color-badge-pipeline-bg: rgba(167, 139, 250, 0.15);
  --color-badge-pipeline-fg: #C4B5FD;
  --color-badge-run-bg:      rgba(52, 211, 153, 0.15);
  --color-badge-run-fg:      #6EE7B7;
  --color-badge-product-bg:  rgba(251, 191, 36, 0.15);
  --color-badge-product-fg:  #FCD34D;
  --color-badge-ai-bg:       rgba(244, 114, 182, 0.15);
  --color-badge-ai-fg:       #F9A8D4;

  /* SVG map states */
  --map-dim:             0.08;
  --map-default:         0.45;
  --map-active:          1.0;

  /* Pace layer colors */
  --color-pace-fashion:        #F97316;
  --color-pace-commerce:       #EAB308;
  --color-pace-infrastructure: #22D3EE;
  --color-pace-governance:     #818CF8;
  --color-pace-culture:        #FB7185;

  /* === Typography === */
  --font-serif:   'Georgia', 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:    clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base:  clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg:    clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-xl:    clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-hero:  clamp(2.5rem, 2rem + 2.5vw, 4.5rem);

  /* === Spacing === */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   2rem;
  --space-xl:   4rem;
  --space-2xl:  8rem;

  /* === Layout === */
  --scrolly-narrative-w: 40%;
  --scrolly-figure-w:    60%;

  /* === Transitions === */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:    200ms;
  --duration-normal:  500ms;
  --duration-slow:    800ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}