:root,
[data-theme="dark"] {
  /* Colors — dark (default) */
  --color-bg:            #0a0a0a;
  --color-bg-elevated:   #111111;
  --color-bg-card:       rgba(255, 255, 255, 0.03);
  --color-crimson:       #8b0000;
  --color-red:           #cc1100;
  --color-red-glow:      rgba(139, 0, 0, 0.3);
  --color-gold:          #c9a84c;
  --color-text:          #e8e8e8;
  --color-text-muted:    #666666;
  --color-text-dim:      #444444;
  --color-glass:         rgba(255, 255, 255, 0.06);
  --color-glass-border:  rgba(255, 255, 255, 0.08);
  --color-glass-hover:   rgba(255, 255, 255, 0.1);
  --color-paper:         #f5f0e8;
  --color-paper-text:    #1a1a1a;
  --grain-opacity:       0.035;
  --vignette-opacity:    1;
  --particle-opacity:    1;
  color-scheme: dark;

  /* Fonts */
  --font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-2xs: 0.125rem;
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Timing */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   0.2s;
  --duration-normal: 0.4s;
  --duration-slow:   0.8s;
  --duration-slower: 1.2s;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 50%;

  /* Blur */
  --blur-glass:  20px;
  --blur-glow:   40px;

  /* Z-index layers */
  --z-grain:     1;
  --z-particles: 2;
  --z-content:   10;
  --z-nav:       100;
}

/* ============================================================
   THEME: Light
   ============================================================ */
[data-theme="light"] {
  --color-bg:            #f5f3ef;
  --color-bg-elevated:   #ffffff;
  --color-bg-card:       rgba(0, 0, 0, 0.02);
  --color-crimson:       #9b1b1b;
  --color-red:           #cc1100;
  --color-red-glow:      rgba(155, 27, 27, 0.15);
  --color-gold:          #a68a3e;
  --color-text:          #1a1a1a;
  --color-text-muted:    #777777;
  --color-text-dim:      #aaaaaa;
  --color-glass:         rgba(0, 0, 0, 0.03);
  --color-glass-border:  rgba(0, 0, 0, 0.08);
  --color-glass-hover:   rgba(0, 0, 0, 0.06);
  --color-paper:         #f5f0e8;
  --color-paper-text:    #1a1a1a;
  --grain-opacity:       0.02;
  --vignette-opacity:    0;
  --particle-opacity:    0.3;
  color-scheme: light;
}

/* ============================================================
   THEME: Midnight — deep blue-black
   ============================================================ */
[data-theme="midnight"] {
  --color-bg:            #0b0d14;
  --color-bg-elevated:   #121625;
  --color-bg-card:       rgba(100, 140, 255, 0.03);
  --color-crimson:       #5c3dcc;
  --color-red:           #7b5ee8;
  --color-red-glow:      rgba(92, 61, 204, 0.3);
  --color-gold:          #8fa8d6;
  --color-text:          #c8d0e0;
  --color-text-muted:    #5a6380;
  --color-text-dim:      #3a4060;
  --color-glass:         rgba(100, 140, 255, 0.05);
  --color-glass-border:  rgba(100, 140, 255, 0.08);
  --color-glass-hover:   rgba(100, 140, 255, 0.1);
  --color-paper:         #e0e4f0;
  --color-paper-text:    #1a1a2e;
  --grain-opacity:       0.03;
  --vignette-opacity:    1;
  --particle-opacity:    0.8;
  color-scheme: dark;
}

/* ============================================================
   THEME: Parchment — warm aged paper
   ============================================================ */
[data-theme="parchment"] {
  --color-bg:            #f0e8d8;
  --color-bg-elevated:   #faf4e8;
  --color-bg-card:       rgba(139, 90, 43, 0.04);
  --color-crimson:       #8b2500;
  --color-red:           #a63200;
  --color-red-glow:      rgba(139, 37, 0, 0.2);
  --color-gold:          #8b6914;
  --color-text:          #2c2416;
  --color-text-muted:    #7a6b5a;
  --color-text-dim:      #a89880;
  --color-glass:         rgba(139, 90, 43, 0.05);
  --color-glass-border:  rgba(139, 90, 43, 0.1);
  --color-glass-hover:   rgba(139, 90, 43, 0.08);
  --color-paper:         #f5f0e8;
  --color-paper-text:    #2c2416;
  --grain-opacity:       0.04;
  --vignette-opacity:    0.3;
  --particle-opacity:    0.2;
  color-scheme: light;
}