/* ============================================
   GENN.TECH — themes.css
   Theme definitions by role. Components never
   hard code colours; they consume these vars.
   Default (Phosphor) sits on :root. Per theme
   overrides key off html[data-theme].
   ============================================ */

/* ── Self hosted fonts ── IBM Plex Mono latin subset, weights actually
   used (400 body, 700 emphasis/headings). font-display swap so text
   paints immediately in the fallback. ── */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700.woff2') format('woff2');
}
/* Metric adjusted fallbacks. IBM Plex Mono advance is 0.6em; Menlo
   is 0.6022em and Consolas 0.55em. size-adjust neutralises the
   difference so the swap causes no visible layout shift. */
@font-face {
  font-family: 'Plex Fallback Mac';
  src: local('Menlo'), local('Monaco');
  size-adjust: 99.63%;
}
@font-face {
  font-family: 'Plex Fallback Win';
  src: local('Consolas');
  size-adjust: 109.09%;
}

/* ── Default theme: PHOSPHOR ── */
:root {
  /* surfaces */
  --bg: #050a05;          /* page background */
  --surface: #090f09;     /* raised panel */
  --surface-2: #0d160d;   /* second raised panel */
  /* borders */
  --border: rgba(0, 255, 65, 0.15);
  --border-strong: rgba(0, 255, 65, 0.4);
  /* text */
  --text: #c8f7c5;
  --muted: #6a9e68;
  /* accent */
  --accent: #00ff41;
  --accent-hover: #ffffff;
  --accent-dim: #00cc33;
  /* link, tag, secondary highlight */
  --link: #00d4ff;
  /* status */
  --success: #00ff41;
  --warning: #ffcc00;
  --danger: #ff3131;
  /* effects */
  --glow: rgba(0, 255, 65, 0.3);
  --glow-strong: rgba(0, 255, 65, 0.45);
  --link-glow: rgba(0, 212, 255, 0.25);
  --scanline: rgba(0, 0, 0, 0.15);
  /* type */
  --font-mono: 'IBM Plex Mono', 'Plex Fallback Mac', 'Plex Fallback Win', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --transition: 0.15s ease;
}

/* ── Theme invariant interactive states ── Every theme must provide a
   visible focus ring, a deliberate selection colour, and themed
   scrollbars where the browser supports it. ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection {
  background: var(--accent);
  color: var(--bg);
}
* {
  scrollbar-color: var(--muted) var(--bg);
}

/* ============================================
   THE SIX THEMES
   Selected by html[data-theme]. Phosphor sits
   on :root as the no JavaScript default; the
   others only apply through the attribute.
   Every theme defines every role: surfaces,
   borders, text, accent, link, status, glow,
   scanline tint.
   ============================================ */

/* ── AMBER — amber CRT on black brown ── */
html[data-theme="amber"] {
  --bg: #0a0705;
  --surface: #130d07;
  --surface-2: #1c140b;
  --border: rgba(255, 176, 32, 0.18);
  --border-strong: rgba(255, 176, 32, 0.45);
  --text: #ffedda;
  --muted: #b39068;
  --accent: #ffb020;
  --accent-hover: #ffffff;
  --accent-dim: #cc8c1a;
  --link: #ff8c5a;
  --success: #7ce38b;
  --warning: #ffd166;
  --danger: #ff6b6b;
  --glow: rgba(255, 176, 32, 0.3);
  --glow-strong: rgba(255, 176, 32, 0.45);
  --link-glow: rgba(255, 140, 90, 0.25);
  --scanline: rgba(0, 0, 0, 0.22);
}

/* ── ICE — cool cyan and white on dark blue grey ── */
html[data-theme="ice"] {
  --bg: #070b10;
  --surface: #0d131b;
  --surface-2: #121b26;
  --border: rgba(140, 200, 255, 0.18);
  --border-strong: rgba(140, 200, 255, 0.45);
  --text: #e8f3ff;
  --muted: #93afc8;
  --accent: #66d9ff;
  --accent-hover: #ffffff;
  --accent-dim: #4db8e0;
  --link: #9fb8ff;
  --success: #66e0b3;
  --warning: #ffd166;
  --danger: #ff7a7a;
  --glow: rgba(102, 217, 255, 0.3);
  --glow-strong: rgba(102, 217, 255, 0.45);
  --link-glow: rgba(159, 184, 255, 0.25);
  --scanline: rgba(0, 0, 0, 0.2);
}

/* ── SYNTHWAVE — pink and purple on deep purple ── */
html[data-theme="synthwave"] {
  --bg: #0d0518;
  --surface: #160b28;
  --surface-2: #1f1136;
  --border: rgba(255, 79, 214, 0.2);
  --border-strong: rgba(255, 79, 214, 0.45);
  --text: #f6e9ff;
  --muted: #bda4dd;
  --accent: #ff4fd6;
  --accent-hover: #ffffff;
  --accent-dim: #d63ab8;
  --link: #7ae0ff;
  --success: #7ce38b;
  --warning: #ffd166;
  --danger: #ff7a7a;
  --glow: rgba(255, 79, 214, 0.3);
  --glow-strong: rgba(255, 79, 214, 0.45);
  --link-glow: rgba(122, 224, 255, 0.25);
  --scanline: rgba(0, 0, 0, 0.2);
}

/* ── MONO SLATE — monochrome, neutral greys ── */
html[data-theme="mono"] {
  --bg: #0c0c0d;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --border: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.42);
  --text: #f1f1f2;
  --muted: #a5a5ab;
  --accent: #ffffff;
  --accent-hover: #d8d8dd;
  --accent-dim: #c0c0c6;
  --link: #a9c4d9;
  --success: #8fd6a8;
  --warning: #e8cf8a;
  --danger: #ef9a9a;
  --glow: rgba(255, 255, 255, 0.22);
  --glow-strong: rgba(255, 255, 255, 0.35);
  --link-glow: rgba(169, 196, 217, 0.25);
  --scanline: rgba(0, 0, 0, 0.2);
}

/* ── PAPER — quiet reading theme, dark text on off white ── */
html[data-theme="paper"] {
  --bg: #f6f3ec;
  --surface: #fffdf7;
  --surface-2: #ebe6da;
  --border: rgba(40, 34, 26, 0.18);
  --border-strong: rgba(40, 34, 26, 0.45);
  --text: #1f1b14;
  --muted: #5f584b;
  --accent: #10703a;
  --accent-hover: #0a5229;
  --accent-dim: #2d8a55;
  --link: #1a5fb4;
  --success: #10703a;
  --warning: #8a5a00;
  --danger: #b3261e;
  --glow: rgba(16, 112, 58, 0.22);
  --glow-strong: rgba(16, 112, 58, 0.35);
  --link-glow: rgba(26, 95, 180, 0.18);
  --scanline: rgba(0, 0, 0, 0.05);
}

/* Paper is a light surface: the glow and scanline roles above are
   dialled way back so Heavy mode stays comfortable to read. */

/* ── Shared theme switcher ── built by theme.js, identical on every
   page. Fixed top right where the old mode toggle sat. ── */
#theme-bar {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.theme-swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  /* keeps a 44px touch target without a visible box */
  position: relative;
}
.theme-swatch::before {
  content: '';
  position: absolute;
  inset: -8px;
}
.theme-swatch[aria-pressed="true"] {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.theme-swatch:hover { border-color: var(--accent); }