/* ─── DARK MODE (default) ─────────────────────────────────── */
:root {
  /* Main palette */
  --ink:    #1a1410;
  --paper:  #e8e0d0;
  --aged:   #c9b99a;
  --rust:   #8b3a2a;
  --mold:   #3d4a2e;
  --fog:    #6b6560;
  --pale:   #f2ece0;
  --deep:   #0d0a08;
  --glow:   #c4a882;

  /* Surfaces */
  --surface:       #12100d;
  --surface-low:   #0f0d0a;
  --surface-deep:  #0a0807;
  --surface-strip: #0f0c09;

  /* Borders */
  --border:        #2a2218;
  --border-subtle: #1e1a16;
  --border-faint:  #1a1710;

  /* Muted text */
  --text-ghost: #4a4540;
  --text-dim:   #3a3530;
}

/* ─── LIGHT MODE ──────────────────────────────────────────── */
[data-theme="light"] {
  --deep:  #e2d3b0;
  --paper: #1c1510;
  --pale:  #1c1510;
  --aged:  #4a3f30;
  --fog:   #8a7a65;
  --glow:  #9a8860;
  --ink:   #b8a882;
  --rust:  #7a2e1a;
  --mold:  #3a4828;

  --surface:       #ede0c4;
  --surface-low:   #e8d8b8;
  --surface-deep:  #f0e6ce;
  --surface-strip: #e0d0a0;

  --border:        #b8a882;
  --border-subtle: #c8b894;
  --border-faint:  #d4c4a0;

  --text-ghost: #6a5a48;
  --text-dim:   #7a6a58;
}

/* ─── THEME TRANSITIONS ───────────────────────────────────── */
body,
nav,
footer,
.nav-logo,
.nav-links a,
.theme-toggle,
.mode-label,
.mode-sep {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ─── RESET ───────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ─── BODY ────────────────────────────────────────────────── */
body {
  background-color: var(--deep);
  color: var(--paper);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: crosshair;
}

/* ─── NOISE OVERLAY ───────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 9999;
  animation: flicker 10s infinite;
}

[data-theme="light"] body::before {
  opacity: 0.06;
  animation: flickerLight 10s infinite;
}

@keyframes flicker {
  0%, 94%, 100% { opacity: 0.04; }
  95%   { opacity: 0.08; }
  96.5% { opacity: 0.02; }
  98%   { opacity: 0.05; }
}

@keyframes flickerLight {
  0%, 94%, 100% { opacity: 0.06; }
  95%   { opacity: 0.09; }
  96.5% { opacity: 0.03; }
  98%   { opacity: 0.07; }
}

/* ─── NAV ─────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(13,10,8,0.95) 0%, transparent 100%);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(42,34,24,0.4);
}

[data-theme="light"] nav {
  background: linear-gradient(to bottom, rgba(226,211,176,0.97) 0%, transparent 100%);
  border-bottom-color: rgba(184,168,130,0.5);
}

.nav-logo {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--aged);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--pale); }

/* ─── THEME TOGGLE ────────────────────────────────────────── */
.theme-toggle {
  font-family: 'Special Elite', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mode-label {
  color: var(--fog);
  transition: color 0.2s;
}

.mode-sep {
  color: var(--fog);
}

.mode-label.is-active {
  color: var(--pale);
}

/* ─── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bobble {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── RESPONSIVE NAV ──────────────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 16px 20px; }
  .nav-links { display: none; }
}