:root {
  /* === Dark Theme Base — Monochrome === */
  --color-paper:      #050507;
  --color-paper-2:    #0c0c10;
  --color-paper-3:    #16161b;
  --color-rule:       rgba(255, 255, 255, 0.06);
  --color-rule-hover: rgba(255, 255, 255, 0.15);
  --color-ink:        #f0f0f2;
  --color-muted:      #6b6b78;
  --color-dim:        #3d3d46;

  /* === Accent — Silver/Chrome === */
  --color-accent:     #e8e8ec;
  --color-accent-2:   #a8a8b3;
  --color-accent-3:   #c0c0c8;
  --gradient-main:    linear-gradient(135deg, #e8e8ec 0%, #9090a0 50%, #606070 100%);
  --gradient-accent:  linear-gradient(135deg, #ffffff 0%, #c0c0c8 100%);
  --gradient-warm:    linear-gradient(135deg, #f0f0f2 0%, #d0d0d8 50%, #a8a8b3 100%);
  --gradient-glass:   linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);

  /* === Typography === */
  --font-display:   "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --font-body:      "Inter", "Space Grotesk", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", "Space Mono", "Fira Code", monospace;

  /* === Spacing — 4pt === */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* === Type Scale === */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.35rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.5rem;
  --text-3xl:  3.25rem;
  --text-4xl:  4.5rem;
  --text-hero: clamp(2.5rem, 6vw + 1rem, 5.5rem);

  /* === Motion === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1);
  --dur-fast:    150ms;
  --dur-normal:  300ms;
  --dur-slow:    500ms;
  --dur-reveal:  700ms;

  /* === Shadows === */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow:  0 0 30px rgba(255, 255, 255, 0.08);
  --shadow-glow-purple: 0 0 30px rgba(255, 255, 255, 0.05);

  /* === Glassmorphism === */
  --glass-bg:    rgba(255, 255, 255, 0.02);
  --glass-border:rgba(255, 255, 255, 0.06);
  --glass-blur:  blur(20px);

  /* === Z-index === */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
}