/* Color — Material Mode System
----------------------------------------------------------------------------- */

body {
  color: var(--color--foreground--100);
  background-color: var(--color--background--100);
  transition: color 0.6s ease, background-color 0.6s ease;
}

/* Mode: Dark (default) — Editorial, high contrast, Sweeney-like */
body.mode--dark {
  --color--foreground--100: rgb(255 255 255 / 1);
  --color--foreground--50:  rgb(255 255 255 / 0.6);
  --color--foreground--33:  rgb(255 255 255 / 0.45);
  --color--foreground--25:  rgb(255 255 255 / 0.4);
  --color--foreground--20:  rgb(255 255 255 / 0.27);
  --color--foreground--15:  rgb(255 255 255 / 0.22);
  --color--foreground--10:  rgb(255 255 255 / 0.17);
  --color--foreground--5:   rgb(255 255 255 / 0.12);
  --color--foreground--0:   rgb(255 255 255 / 0);
  --color--background--100: rgb(8 8 8 / 1);
  --color--background--0:   rgb(8 8 8 / 0);

  --mode--accent: #ffffff;
  --mode--accent-dim: rgba(255, 255, 255, 0.15);
  --mode--surface: rgba(255, 255, 255, 0.04);
  --mode--surface-hover: rgba(255, 255, 255, 0.08);
  --mode--border: rgba(255, 255, 255, 0.1);
  --mode--glow: none;
  --mode--tile-radius: 0px;
  --mode--tile-border: 1px solid rgba(255, 255, 255, 0.06);
  --mode--overlay-bg: rgba(8, 8, 8, 0.96);
  --mode--font-weight: 300;
  --mode--letter-spacing: 0.01em;
  --mode--heading-transform: none;

  /* Shader uniforms (read by JS) */
  --shader--color-a: 0.03, 0.03, 0.03;
  --shader--color-b: 0.12, 0.12, 0.12;
  --shader--speed: 0.3;
  --shader--contrast: 1.0;
}

/* Mode: Glass — Frosted translucency, blur, light refraction */
body.mode--glass {
  --color--foreground--100: rgb(15 23 42 / 1);
  --color--foreground--50:  rgb(15 23 42 / 0.5);
  --color--foreground--33:  rgb(15 23 42 / 0.333);
  --color--foreground--25:  rgb(15 23 42 / 0.25);
  --color--foreground--20:  rgb(15 23 42 / 0.2);
  --color--foreground--15:  rgb(15 23 42 / 0.15);
  --color--foreground--10:  rgb(15 23 42 / 0.1);
  --color--foreground--5:   rgb(15 23 42 / 0.05);
  --color--foreground--0:   rgb(15 23 42 / 0);
  --color--background--100: rgb(240 244 248 / 1);
  --color--background--0:   rgb(240 244 248 / 0);

  --mode--accent: #0f172a;
  --mode--accent-dim: rgba(15, 23, 42, 0.1);
  --mode--surface: rgba(255, 255, 255, 0.5);
  --mode--surface-hover: rgba(255, 255, 255, 0.7);
  --mode--border: rgba(255, 255, 255, 0.3);
  --mode--glow: none;
  --mode--tile-radius: 12px;
  --mode--tile-border: 1px solid rgba(255, 255, 255, 0.4);
  --mode--overlay-bg: rgba(240, 244, 248, 0.92);
  --mode--font-weight: 400;
  --mode--letter-spacing: 0em;
  --mode--heading-transform: none;

  --shader--color-a: 0.92, 0.95, 0.97;
  --shader--color-b: 0.85, 0.90, 0.95;
  --shader--speed: 0.15;
  --shader--contrast: 0.4;
}

/* Mode: Neon — Arcade/CRT, glow, scanlines */
body.mode--neon {
  --color--foreground--100: rgb(0 255 255 / 1);
  --color--foreground--50:  rgb(0 255 255 / 0.6);
  --color--foreground--33:  rgb(0 255 255 / 0.45);
  --color--foreground--25:  rgb(0 255 255 / 0.4);
  --color--foreground--20:  rgb(0 255 255 / 0.27);
  --color--foreground--15:  rgb(0 255 255 / 0.22);
  --color--foreground--10:  rgb(0 255 255 / 0.17);
  --color--foreground--5:   rgb(0 255 255 / 0.12);
  --color--foreground--0:   rgb(0 255 255 / 0);
  --color--background--100: rgb(5 5 10 / 1);
  --color--background--0:   rgb(5 5 10 / 0);

  --mode--accent: #00ffff;
  --mode--accent-dim: rgba(0, 255, 255, 0.15);
  --mode--surface: rgba(0, 255, 255, 0.04);
  --mode--surface-hover: rgba(0, 255, 255, 0.08);
  --mode--border: rgba(0, 255, 255, 0.2);
  --mode--glow: 0 0 10px rgba(0, 255, 255, 0.3), 0 0 30px rgba(0, 255, 255, 0.1);
  --mode--tile-radius: 0px;
  --mode--tile-border: 1px solid rgba(0, 255, 255, 0.25);
  --mode--overlay-bg: rgba(5, 5, 10, 0.96);
  --mode--font-weight: 400;
  --mode--letter-spacing: 0.05em;
  --mode--heading-transform: uppercase;

  --shader--color-a: 0.02, 0.02, 0.06;
  --shader--color-b: 0.0, 0.15, 0.15;
  --shader--speed: 0.6;
  --shader--contrast: 1.4;
}

/* Mode: Warm — Organic, paper texture, soft shadows */
body.mode--warm {
  --color--foreground--100: rgb(60 42 28 / 1);
  --color--foreground--50:  rgb(60 42 28 / 0.5);
  --color--foreground--33:  rgb(60 42 28 / 0.333);
  --color--foreground--25:  rgb(60 42 28 / 0.25);
  --color--foreground--20:  rgb(60 42 28 / 0.2);
  --color--foreground--15:  rgb(60 42 28 / 0.15);
  --color--foreground--10:  rgb(60 42 28 / 0.1);
  --color--foreground--5:   rgb(60 42 28 / 0.05);
  --color--foreground--0:   rgb(60 42 28 / 0);
  --color--background--100: rgb(245 235 220 / 1);
  --color--background--0:   rgb(245 235 220 / 0);

  --mode--accent: #3c2a1c;
  --mode--accent-dim: rgba(60, 42, 28, 0.1);
  --mode--surface: rgba(60, 42, 28, 0.04);
  --mode--surface-hover: rgba(60, 42, 28, 0.08);
  --mode--border: rgba(60, 42, 28, 0.12);
  --mode--glow: none;
  --mode--tile-radius: 4px;
  --mode--tile-border: 1px solid rgba(60, 42, 28, 0.1);
  --mode--overlay-bg: rgba(245, 235, 220, 0.96);
  --mode--font-weight: 400;
  --mode--letter-spacing: 0em;
  --mode--heading-transform: none;

  --shader--color-a: 0.94, 0.90, 0.84;
  --shader--color-b: 0.88, 0.82, 0.74;
  --shader--speed: 0.1;
  --shader--contrast: 0.3;
}

/* Mode: Grid — Data viz, monospace, technical */
body.mode--grid {
  --color--foreground--100: rgb(20 184 166 / 1);
  --color--foreground--50:  rgb(20 184 166 / 0.6);
  --color--foreground--33:  rgb(20 184 166 / 0.45);
  --color--foreground--25:  rgb(20 184 166 / 0.4);
  --color--foreground--20:  rgb(20 184 166 / 0.27);
  --color--foreground--15:  rgb(20 184 166 / 0.22);
  --color--foreground--10:  rgb(20 184 166 / 0.17);
  --color--foreground--5:   rgb(20 184 166 / 0.12);
  --color--foreground--0:   rgb(20 184 166 / 0);
  --color--background--100: rgb(10 15 20 / 1);
  --color--background--0:   rgb(10 15 20 / 0);

  --mode--accent: #14b8a6;
  --mode--accent-dim: rgba(20, 184, 166, 0.15);
  --mode--surface: rgba(20, 184, 166, 0.04);
  --mode--surface-hover: rgba(20, 184, 166, 0.08);
  --mode--border: rgba(20, 184, 166, 0.15);
  --mode--glow: 0 0 8px rgba(20, 184, 166, 0.2);
  --mode--tile-radius: 0px;
  --mode--tile-border: 1px solid rgba(20, 184, 166, 0.2);
  --mode--overlay-bg: rgba(10, 15, 20, 0.96);
  --mode--font-weight: 400;
  --mode--letter-spacing: 0.02em;
  --mode--heading-transform: uppercase;

  --shader--color-a: 0.04, 0.06, 0.08;
  --shader--color-b: 0.02, 0.12, 0.10;
  --shader--speed: 0.4;
  --shader--contrast: 0.8;
}

/* Neon mode — CRT scanline overlay */
body.mode--neon::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  z-index: 9999;
}

/* Neon mode — text glow on headings */
body.mode--neon .section h1 {
  text-shadow:
    0 0 10px rgba(0, 255, 255, 0.5),
    0 0 30px rgba(0, 255, 255, 0.2);
  animation: neon-flicker 3s linear infinite;
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.85; }
}

/* Grid mode — monospace for body text */
body.mode--grid {
  font-family: var(--font--family-mono), monospace;
}
body.mode--grid .section h1,
body.mode--grid .section h2 {
  font-family: var(--font--family-mono), monospace;
}