:root {
  --bg: #080808;
  --s1: #111;
  --s2: #181818;
  --s3: #222;
  --border: #2b2b2b;
  --text: #efefef;
  --muted: #555;
  --dim: #333;
  --red: #ff2d2d;
  --yellow: #ffe600;
  --green: #00ff88;
  --blue: #00b4ff;
  --orange: #ff7700;
  --pink: #ff2d78;
  --mode-color: var(--red);
}

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

/* LIGHT MODE — warm off-white "office paper" palette */
body.light-mode {
  /* surfaces */
  --bg:     #eceae4;
  --s1:     #e3e0d9;
  --s2:     #d8d5ce;
  --s3:     #ccc9c2;
  --border: #b8b4ae;
  --text:   #1a1816;
  --muted:  #6a6560;
  --dim:    #9e9a95;
  /* accents — same hue as dark mode but brought down for light-bg legibility */
  --red:    #c41010;
  --yellow: #8a7000;
  --green:  #009960;  /* same cyan-mint hue as #00ff88, just darker */
  --blue:   #0070b8;
  --orange: #bf5500;
  --pink:   #b50050;
}

/* Ko-fi sits on the header — keep its original neon palette in light mode */
body.light-mode .kofi-wrap {
  --yellow: #ffe600;
  --orange: #ff7700;
  --red:    #ff2d2d;
}

/* Scanline: very faint in light mode — same vibe, softer on light bg */
body.light-mode::after { opacity:.25; }

/* Dot-grid texture — light-mode equivalent of the dark scanline */
body.light-mode {
  background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Cards: elevated shadow + subtle diagonal gradient */
body.light-mode .card {
  background: linear-gradient(155deg, var(--s1) 0%, var(--s2) 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.09);
}
body.light-mode .card-accent { height: 3px; }

/* Tiles: subtle inset depth */
body.light-mode .tile {
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.6);
}

/* Reality card: override hardcoded black gradient with mode-tinted version */
body.light-mode .reality-card {
  background: linear-gradient(135deg, rgba(196,16,16,.07) 0%, var(--s2) 100%);
  border-color: rgba(196,16,16,.3);
}
body.light-mode.mode-grind .reality-card {
  background: linear-gradient(135deg, rgba(0,153,96,.07) 0%, var(--s2) 100%);
  border-color: rgba(0,153,96,.3);
}

/* SKIP NAV — visible only on keyboard focus */
.skip-nav {
  position:absolute;top:-48px;left:1rem;
  background:var(--mode-color);color:#000;
  padding:.5rem 1.2rem;border-radius:0 0 6px 6px;
  font-family:'Archivo Black',sans-serif;font-size:.8rem;letter-spacing:1px;
  z-index:9999;transition:top .15s;text-decoration:none;
}
.skip-nav:focus { top:0; }

/* GLOBAL FOCUS — keyboard-visible ring, suppressed on mouse click */
:focus-visible {
  outline:2px solid var(--mode-color);
  outline-offset:3px;
  border-radius:4px;
}
:focus:not(:focus-visible) { outline:none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  min-height: 100vh;
  cursor: crosshair;
  overflow-x: hidden;
}

/* SCANLINE */
body::after {
  content:'';
  position:fixed;inset:0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 4px);
  pointer-events:none;z-index:9998;
}

/* MAIN LAYOUT */
main { max-width:960px; margin:0 auto; padding:0 1.5rem 4rem; }

/* SECTION DIVIDER */
.divider {
  display:flex;align-items:center;gap:1rem;
  font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--dim);
  margin:1.5rem 0;
}
.divider::before,.divider::after { content:'';flex:1;height:1px;background:var(--border); }