/* ──────────────────────────────────────────────────────────────
   Themes
   Each theme only swaps tokens from styles.css (:root is "Paper").
   themes.js sets <html data-theme> and loads the theme's fonts.
   ────────────────────────────────────────────────────────────── */

html[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #0A0A0C; --surface: #121216; --surface-2: #19191E;
  --ink: #EDEDF0; --ink-2: #C9C9D1; --mute: #8B8B96; --subtle: #5D5D68;
  --line: #222228; --line-2: #2E2E36;
  --accent: #A594FF; --accent-soft: rgba(165,148,255,0.14); --accent-deep: #8B78FF; --on-accent: #0A0A0C;
  --danger: #FF8A8A; --warn: #E7B65A; --shadow: #000000; --dot: rgba(255,255,255,0.03);
  --card-1: #141419; --card-2: #17151F; --card-3: #121820; --card-4: #1A1418;
  --noise: 0; --display-weight: 400;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
}

html[data-theme="swiss"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F4F4F4;
  --ink: #0A0A0A; --ink-2: #262626; --mute: #6E6E6E; --subtle: #A3A3A3;
  --line: #E8E8E8; --line-2: #D4D4D4;
  --accent: #E63312; --accent-soft: rgba(230,51,18,0.10); --accent-deep: #B8260B; --on-accent: #FFFFFF;
  --danger: #B8260B; --warn: #A25B00; --shadow: #000000; --dot: transparent;
  --card-1: #F4F4F4; --card-2: #EDEDED; --card-3: #F7F7F7; --card-4: #F1F1F1;
  --noise: 0; --display-weight: 600;
  --serif: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

html[data-theme="terminal"] {
  color-scheme: dark;
  --bg: #070B08; --surface: #0C120E; --surface-2: #121B15;
  --ink: #D6F5DC; --ink-2: #A8D8B2; --mute: #6F9B78; --subtle: #46664D;
  --line: #17271B; --line-2: #22382A;
  --accent: #3DF58A; --accent-soft: rgba(61,245,138,0.12); --accent-deep: #2BD474; --on-accent: #04130A;
  --danger: #FF7A6B; --warn: #F5D23D; --shadow: #000000; --dot: rgba(61,245,138,0.05);
  --card-1: #0C140F; --card-2: #0E1711; --card-3: #0B120E; --card-4: #101710;
  --noise: 0; --display-weight: 600;
  --serif: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'JetBrains Mono', ui-monospace, monospace;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

html[data-theme="sage"] {
  --bg: #EEF0E9; --surface: #FBFCF8; --surface-2: #E5E9DF;
  --ink: #17211A; --ink-2: #2E3B31; --mute: #5E6B60; --subtle: #98A398;
  --line: #DCE1D4; --line-2: #CBD2C2;
  --accent: #2F5D45; --accent-soft: rgba(47,93,69,0.12); --accent-deep: #224633; --on-accent: #F1F4EC;
  --danger: #9A3B2E; --warn: #8A6412; --shadow: #2F3D31; --dot: rgba(23,33,26,0.04);
  --card-1: #E1E7D8; --card-2: #D8E0CC; --card-3: #E6E9DF; --card-4: #EDE3D6;
  --noise: 0.35; --display-weight: 500;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

html[data-theme="nordic"] {
  --bg: #F2F5F9; --surface: #FFFFFF; --surface-2: #EAEFF5;
  --ink: #0D1626; --ink-2: #26324A; --mute: #5D6880; --subtle: #9AA4B5;
  --line: #DFE5EE; --line-2: #CDD5E1;
  --accent: #2357E8; --accent-soft: rgba(35,87,232,0.10); --accent-deep: #1A43B8; --on-accent: #FFFFFF;
  --danger: #C2364A; --warn: #9A6200; --shadow: #1B2A4A; --dot: rgba(13,22,38,0.04);
  --card-1: #E3EAF4; --card-2: #DCE6F5; --card-3: #E9EEF5; --card-4: #E4E6F6;
  --noise: 0.2; --display-weight: 600;
  --serif: 'Space Grotesk', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

html[data-theme="sunset"] {
  --bg: #FFF4EC; --surface: #FFFBF7; --surface-2: #FCEADF;
  --ink: #26140E; --ink-2: #4A2C22; --mute: #876457; --subtle: #C2A190;
  --line: #F4DFD2; --line-2: #EBCBB8;
  --accent: #EE4F2A; --accent-soft: rgba(238,79,42,0.12); --accent-deep: #C93C1B; --on-accent: #FFF7F2;
  --danger: #B3261E; --warn: #9A5B00; --shadow: #7A2A12; --dot: rgba(38,20,14,0.04);
  --card-1: #FFE2D1; --card-2: #FFD5BD; --card-3: #FDE8DB; --card-4: #FFDCE3;
  --noise: 0.3; --display-weight: 400;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

html[data-theme="graphite"] {
  color-scheme: dark;
  --bg: #121110; --surface: #1A1917; --surface-2: #23211E;
  --ink: #F2EDE6; --ink-2: #D6D0C6; --mute: #9A9288; --subtle: #625B53;
  --line: #2A2724; --line-2: #37332E;
  --accent: #F2A93B; --accent-soft: rgba(242,169,59,0.14); --accent-deep: #DB9223; --on-accent: #1A1206;
  --danger: #FF8A73; --warn: #F2C94C; --shadow: #000000; --dot: rgba(255,255,255,0.03);
  --card-1: #1C1A18; --card-2: #211E1A; --card-3: #1A1A1B; --card-4: #221C1B;
  --noise: 0; --display-weight: 500;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
}

html[data-theme="lavender"] {
  --bg: #F6F3FF; --surface: #FFFFFF; --surface-2: #EEE9FF;
  --ink: #1A1330; --ink-2: #352B52; --mute: #6D6488; --subtle: #A8A0C2;
  --line: #E6E0F7; --line-2: #D6CEF0;
  --accent: #6A45F5; --accent-soft: rgba(106,69,245,0.12); --accent-deep: #5331D8; --on-accent: #FFFFFF;
  --danger: #C02F5C; --warn: #946200; --shadow: #3A2A80; --dot: rgba(26,19,48,0.04);
  --card-1: #ECE5FF; --card-2: #E3DAFF; --card-3: #F0EBFF; --card-4: #FCE4F3;
  --noise: 0.2; --display-weight: 600;
  --serif: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

html[data-theme="newsprint"] {
  --bg: #EEEDE5; --surface: #FAF9F4; --surface-2: #E4E3D8;
  --ink: #171A15; --ink-2: #2B2F28; --mute: #5A5F56; --subtle: #8B8F86;
  --line: rgba(23,26,21,0.16); --line-2: #171A15;
  --accent: #4A6B52; --accent-soft: rgba(74,107,82,0.13); --accent-deep: #3A5641; --on-accent: #F3F1E8;
  --danger: #A3412F; --warn: #8A6A1E; --shadow: #171A15; --dot: rgba(23,26,21,0.045);
  --card-1: #CBD5BE; --card-2: #F7F5EE; --card-3: #D8DDD3; --card-4: #E5D3C6;
  --noise: 0.35; --display-weight: 800;
  --serif: 'Archivo', 'Arial Black', sans-serif;
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

/* Character overrides ------------------------------------------ */
html[data-theme="midnight"] :is(h1, h2, h3) { letter-spacing: -0.012em; }

html[data-theme="terminal"] :is(h1, h2) { letter-spacing: -0.045em; }
html[data-theme="terminal"] .help-card,
html[data-theme="terminal"] .subscribe-card { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-theme="terminal"] .hello h1::after,
html[data-theme="terminal"] .dir-hero h1::after {
  content: '_';
  color: var(--accent);
  animation: theme-blink 1.1s steps(1) infinite;
}

html[data-theme="newsprint"] :is(h1, h2) { letter-spacing: -0.035em; text-transform: none; }
html[data-theme="newsprint"] .help-card,
html[data-theme="newsprint"] .subscribe-card {
  border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--ink);
}
html[data-theme="newsprint"] .help-card:hover { transform: translate(-3px, -3px); box-shadow: inset 0 0 0 2px var(--ink), 6px 6px 0 var(--ink); }
html[data-theme="newsprint"] .help-card.ink { box-shadow: inset 0 0 0 2px var(--ink); }
html[data-theme="newsprint"] .help-card.ink:hover { box-shadow: inset 0 0 0 2px var(--ink), 6px 6px 0 var(--ink); }
html[data-theme="newsprint"] .hello-portrait .hello-photo { border-color: var(--ink); }
html[data-theme="newsprint"] :is(.dir-search, .dir-table, .dir-empty, .theme-switch, .ts-menu) {
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--ink);
}
html[data-theme="newsprint"] .dir-search:focus-within { box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 var(--ink); }
html[data-theme="newsprint"] :is(.dir-select select, .dir-tabs button, .dir-seg, .dir-try, .dir-more-btn, .m-ava, .theme-switch button) { border-radius: 0; }
html[data-theme="newsprint"] .m-head { border-bottom: 2px solid var(--ink); }

/* Newsprint is hard-cornered everywhere; the submit spinner is the one ring that has to stay round. */
html[data-theme="newsprint"] *,
html[data-theme="newsprint"] *::before,
html[data-theme="newsprint"] *::after { border-radius: 0 !important; }
html[data-theme="newsprint"] .submit-loader { border-radius: 999px !important; }
html[data-theme="newsprint"] rect { rx: 0; ry: 0; }

/* Newspaper rules between sections */
html[data-theme="newsprint"] :is(.help, .featured, .signoff, .footer) { border-top: 2px solid var(--ink); }
html[data-theme="newsprint"] .nav.is-scrolled { border-bottom: 2px solid var(--ink); }
html[data-theme="newsprint"] .nav-toggle { border: 2px solid var(--ink); }

/* Portrait: square photo framed on a hard-edged yellow card instead of the orbit art. */
html[data-theme="newsprint"] .hello-deco { display: none; }
html[data-theme="newsprint"] .hello-portrait::before {
  content: '';
  position: absolute;
  inset: 3%;
  background: var(--card-1);
  box-shadow: inset 0 0 0 2px var(--ink), 12px 12px 0 0 var(--ink);
}
html[data-theme="newsprint"] .hello-portrait .hello-photo {
  width: 80%; height: 80%;
  border: 2px solid var(--ink);
  object-position: center;
  box-shadow: none;
}
html[data-theme="newsprint"] .hello-portrait .hello-wave-bubble {
  bottom: 6%; right: 4%;
  border: 2px solid var(--ink);
  background: var(--card-4);
  box-shadow: 4px 4px 0 var(--ink);
}

/* Flat colour blocks and buttons with a hard shadow on hover */
html[data-theme="newsprint"] .featured-art { background: var(--card-1); box-shadow: inset 0 0 0 2px var(--ink); }
html[data-theme="newsprint"] :is(.featured .button, .form button, .letter-form button, .dir-more-btn) {
  box-shadow: 0 0 0 2px var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
html[data-theme="newsprint"] :is(.featured .button, .form button, .letter-form button, .dir-more-btn):hover {
  background: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink);
}

html[data-theme="swiss"] .help-card { border-radius: 4px; }
html[data-theme="swiss"] .italic { font-style: normal; color: var(--accent); }

@keyframes theme-blink { 50% { opacity: 0; } }

/* Smooth swap between themes */
html.theme-swapping *,
html.theme-swapping *::before,
html.theme-swapping *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease, box-shadow .35s ease !important;
}

/* ──────────────────────────────────────────────────────────────
   Theme switcher (top right of the nav)
   ────────────────────────────────────────────────────────────── */
.nav-inner { gap: 16px; }
.nav-links { margin-left: auto; }

.theme-switch {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px color-mix(in srgb, var(--shadow) 8%, transparent);
  font-family: var(--sans);
  user-select: none;
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.theme-switch button:hover { background: var(--surface-2); color: var(--ink); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ts-step { width: 30px; }
.ts-step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ts-current { gap: 8px; padding: 0 10px 0 6px; min-width: 128px; justify-content: flex-start !important; }
.ts-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.ts-count { margin-left: auto; font: 11px var(--mono); color: var(--subtle); font-variant-numeric: tabular-nums; }

.ts-swatch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
}
.ts-swatch i { position: absolute; inset: 0; }
.ts-swatch i:nth-child(2) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.ts-swatch i:nth-child(3) { inset: 6px; border-radius: 999px; }

.ts-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: 300px;
  max-height: min(70vh, 560px);
  padding: 6px;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px color-mix(in srgb, var(--shadow) 40%, transparent);
  animation: ts-in .22s cubic-bezier(.16,1,.3,1) both;
}
.ts-menu[hidden] { display: none; }
.ts-menu button {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
}
.ts-menu .ts-swatch { width: 26px; height: 26px; }
.ts-menu .ts-swatch i:nth-child(3) { inset: 8px; }
.ts-menu strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ts-menu small { display: block; font-size: 12px; color: var(--mute); }
.ts-menu kbd { font: 10.5px var(--mono); color: var(--subtle); }
.ts-menu button[aria-checked="true"] { background: var(--surface-2); }
.ts-menu button[aria-checked="true"] kbd::before { content: '✓ '; color: var(--accent); }
.ts-hint { padding: 8px 10px 4px; font: 11px var(--mono); color: var(--subtle); }

@keyframes ts-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .theme-switch { margin-left: auto; }
  .nav-toggle { order: 5; }
  .ts-current { min-width: 0; padding: 0 6px; }
  .ts-count { display: none; }
  .ts-menu { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
}
@media (max-width: 400px) {
  .ts-label { display: none; }
}