/* theme.css — light (default) / dark / oled. Scoped by [data-theme] on , set by theme.js, persisted in localStorage. Design intent, not inversion: - Light is ink on paper: heavy black borders ARE the design. - Dark is a carbon print: text carries the brightness, structure goes quiet (dim warm-gray hairlines), prism accents finally glow. - OLED is the wireframe at night: pure #000, surfaces exist only as hairlines, everything non-text recedes another step. Hierarchy rule everywhere: text > accents > borders > surfaces. */ /* Every theme declares `color-scheme`. Without it the browser keeps painting its own UA surfaces in light mode no matter how dark the palette gets: scrollbars stay pale, `input[type=range]` / checkbox / select render light, selection and spellcheck underlines use light defaults, and the pre-paint canvas flashes white on load. Custom properties cannot reach any of those — only this declaration can — so it belongs in every block below, beside the palette it describes. */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; --color-bg: #16121a; --color-surface: #231b29; --color-text: #ddd4df; --color-heading: #fff7fc; --color-accent: #f1a8cb; --color-accent-2: #bca5ff; --color-accent-300: #d9c5ef; --color-accent-400: #fff3fb; --color-divider: #604864; --color-line-soft: #34283a; --color-neutral-100: #16121a; --color-neutral-200: #1d1622; --color-neutral-300: #2c2233; --color-neutral-400: #59475d; --color-neutral-500: #806b83; --color-neutral-600: #ad99ae; --color-neutral-700: #cbb9ce; --color-neutral-800: #e6d9e7; --color-neutral-900: #fff7fc; } [data-theme="oled"] { color-scheme: dark; --color-bg: #000000; --color-surface: #05070a; --color-text: #bed1d9; --color-heading: #edfbff; --color-accent: #70e6f0; --color-accent-2: #c4a7ff; --color-accent-300: #9ecbd1; --color-accent-400: #ffffff; --color-divider: #27424c; --color-line-soft: #15252b; --color-neutral-100: #000000; --color-neutral-200: #05070a; --color-neutral-300: #0a1418; --color-neutral-400: #28505a; --color-neutral-500: #52747c; --color-neutral-600: #86aab0; --color-neutral-700: #b6d4d8; --color-neutral-800: #d8eff1; --color-neutral-900: #edfbff; } /* ============================================================ styles.css pins literal `#fff`/`#111` with !important on html/body, headings, links, chrome, and the fib-field washes. These html[data-theme]-scoped rules (dark + oled only; light removes the attribute) load after styles.css, so equal !important resolves here. ============================================================ */ /* Base surface + text */ html[data-theme], html[data-theme] body { background: var(--color-bg) !important; color: var(--color-text) !important; } html[data-theme] body { background-image: none !important; } /* Bridge the instrumentarium palette onto the theme tokens. assets/instrumentarium-*.css declares a SECOND, parallel palette (--instrument-ink / --instrument-paper / ...) hardcoded at :root for the warm paper look. Themes only ever override the --color-* namespace, so every component reading --instrument-* stayed in light-mode ink no matter which theme was active. That single unbridged namespace — not per-element literals — is why all ten dark themes reported an identical failure count. Ink and paper MUST move together: bridging ink alone leaves components that use --instrument-paper as a background painting light-on-light. Attribute-presence (`html[data-theme]`) deliberately matches the pattern used below, so the default light theme keeps its authored warm palette untouched. */ html[data-theme] { --instrument-ink: var(--color-text); --instrument-paper: var(--color-bg); --instrument-paper-bright: var(--color-surface, var(--color-bg)); --instrument-paper-deep: var(--color-neutral-300, var(--color-bg)); --instrument-line: color-mix(in srgb, var(--color-text) 28%, transparent); } /* Type: headings brightest thing on the page; links live in text, not glare */ html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4, html[data-theme] h5, html[data-theme] h6 { color: var(--color-heading) !important; } /* Exception: a heading that sits on its own filled chip must keep the ink that contrasts with THAT chip, not the page heading ink. The guard in assets/instrumentarium-*.css is not enough on themed pages — `html[data-theme] h3` is specificity (0,1,2) and beats `.truth-register__lane > h3` at (0,1,1), so on every dark theme the heading came out heading-white on the (now light) chip: 1.02:1, invisible again in the opposite direction. This selector is (0,2,2) and wins in both directions. */ html[data-theme] .truth-register__lane > h3 { color: var(--instrument-paper-bright) !important; } html[data-theme] a { color: var(--color-accent) !important; } html[data-theme] a:hover { color: var(--color-accent-400) !important; } /* Chrome: same bones, quiet lines */ html[data-theme] .site-chrome, html[data-theme] .site-chrome .cait-masthead, html[data-theme] .cait-masthead { background: var(--color-bg) !important; border-color: var(--color-divider) !important; } html[data-theme] .site-chrome .bw-banner { border-color: var(--color-line-soft) !important; } html[data-theme] .room-subhead { background: var(--color-surface) !important; border-color: var(--room, var(--color-divider)) !important; } html[data-theme] .room-subhead__room { color: var(--room, var(--color-accent)) !important; border-color: var(--color-line-soft) !important; } html[data-theme] .room-subhead__link { color: var(--color-neutral-600) !important; } html[data-theme] .room-subhead__link:hover, html[data-theme] .room-subhead__link:focus-visible { color: var(--room, var(--color-heading)) !important; } html[data-theme] .room-subhead::after { background: linear-gradient(90deg, transparent, var(--color-surface) 78%) !important; } /* Every "paper cut" border drops from ink-black to hairline gray */ html[data-theme] .segment-frame { background: var(--color-surface) !important; border: 1px solid var(--color-divider) !important; } html[data-theme] .cold-open, html[data-theme] .motion-archive, html[data-theme] .rooms-index, html[data-theme] .archive-signal, html[data-theme] [data-screen-label] > div { border-color: var(--color-divider) !important; } /* Code and pre: the light skin hardcodes `background: #f0f0f0 !important` (styles.css:486) with an ink border, which is right for ink-on-paper and catastrophic everywhere else. Nothing re-toned it, so measured on the-canon.dc.html 2026-07-30 every 
 rendered rgb(240,240,240) — 16.2:1
   against the dark page, 18.4:1 against oled — while its text stayed
   --color-text, landing near 1.2:1. The identity-filesystem listing was a
   white slab with invisible text inside it.

   neutral-300 rather than --color-surface on purpose: code blocks are
   routinely nested INSIDE a surface-coloured card (the .caitos/state/self/
   listing is), and matching the parent would erase the block entirely. One
   step up from surface keeps it readable as its own object. */
html[data-theme] code,
html[data-theme] pre {
  background: var(--color-neutral-300) !important;
  color: var(--color-text) !important;
  border-color: var(--color-divider) !important;
}

/* Tags / pills: outline, never a white chip */
html[data-theme] .tag, html[data-theme] .tag-outline {
  background: transparent !important;
  color: var(--color-neutral-600) !important;
  border-color: var(--color-divider) !important;
}

/* Cards, forms, inputs */
html[data-theme] .oracle-form, html[data-theme] .result-shell,
html[data-theme] .method-card, html[data-theme] .receipt {
  background: var(--color-surface) !important;
  border-color: var(--color-divider) !important;
}
html[data-theme] input, html[data-theme] select, html[data-theme] textarea {
  background: var(--color-neutral-300) !important;
  color: var(--color-heading) !important;
  border-color: var(--color-neutral-400) !important;
}
html[data-theme] input::placeholder { color: var(--color-neutral-500) !important; }
html[data-theme] .quiet-button {
  background: transparent !important;
  color: var(--color-text) !important;
  border-color: var(--color-neutral-400) !important;
}
/* Primary actions keep full contrast — the one allowed bright block */
html[data-theme] .draw-button, html[data-theme] .contact-form__submit {
  background: var(--color-heading) !important;
  color: var(--color-bg) !important;
  border-color: var(--color-heading) !important;
}

/* Contact form: kill white gradient panel + white labels-on-black inversions */
html[data-theme] .contact-form {
  background: var(--color-surface) !important;
  border-color: var(--color-divider) !important;
  box-shadow: none !important;
}
html[data-theme] .contact-form::before { background: var(--color-bg) !important; }
html[data-theme] .contact-form__status { background: var(--color-neutral-300) !important; }
html[data-theme] .contact-form textarea {
  background: var(--color-neutral-300) !important;
  color: var(--color-heading) !important;
  border-color: var(--color-neutral-400) !important;
}

/* Side rails: faint field, no white gradient */
html[data-theme] .site-rail .rail-stage {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-heading) 4%, transparent), transparent) !important;
  border-color: var(--color-line-soft) !important;
}

/* Rain-field reading washes: translucent bg-colored, per quality */
html[data-theme] body.fib-field-active .sc-host > div:not(.cait-progress) {
  background-color: color-mix(in srgb, var(--color-bg) 90%, transparent) !important;
}
html[data-theme] body[data-fib-field-quality="high"] .sc-host > div:not(.cait-progress) {
  background-color: color-mix(in srgb, var(--color-bg) 84%, transparent) !important;
}
html[data-theme] body[data-fib-field-quality="low"] .sc-host > div:not(.cait-progress) {
  background-color: color-mix(in srgb, var(--color-bg) 93%, transparent) !important;
}

/* Fixed controls: quiet chips, no drop-shadow blocks */
html[data-theme] .fib-rain-control,
html[data-theme] .theme-toggle,
html[data-theme] .ambience-toggle,
html[data-theme] .cait-fx-toggle {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent) !important;
  color: var(--color-neutral-600) !important;
  border: 1px solid var(--color-divider) !important;
  box-shadow: none !important;
}
html[data-theme] .fib-rain-control:hover,
html[data-theme] .theme-toggle:hover,
html[data-theme] .ambience-toggle:hover,
html[data-theme] .cait-fx-toggle:hover {
  color: var(--color-heading) !important;
  border-color: var(--color-neutral-500) !important;
}

/* Media dims a step so prism accents own the brightness budget */
html[data-theme="dark"] img { opacity: .9; }
html[data-theme="oled"] img { opacity: .82; }

/* Semantic paper components own both sides of their contrast pair. Warm paper
   remains warm in the default theme; every named theme remaps the complete
   foreground/background/control set together. */
:root {
  --surface-paper: #fffdf8;
  --surface-paper-2: #f7f1e7;
  --surface-paper-mast: #fbf8f1;
  --surface-paper-input: #f8f5ee;
  --on-paper: #111217;
  --on-paper-soft: #514b55;
  --paper-line: #6a6570;
  --control-selected-bg: #111217;
  --control-selected-ink: #fffdf8;
  --control-focus: #6850a1;
}

html[data-theme] {
  --surface-paper: var(--color-surface);
  --surface-paper-2: var(--color-neutral-300);
  --surface-paper-mast: var(--color-bg);
  --surface-paper-input: var(--color-neutral-300);
  --on-paper: var(--color-heading);
  --on-paper-soft: var(--color-neutral-700);
  --paper-line: color-mix(in srgb, var(--color-heading) 64%, var(--color-surface));
  --control-selected-bg: var(--color-heading);
  --control-selected-ink: var(--color-bg);
  --control-focus: var(--color-heading);
}

/* Lexicon page runs its own paper palette — remap under dark themes */
html[data-theme] { --paper: var(--color-bg); --ink: var(--color-text); --line: var(--color-divider); }
html[data-theme] .mast, html[data-theme] .controls { background: var(--color-bg) !important; border-color: var(--color-divider) !important; }
html[data-theme] .sym { background: var(--color-surface) !important; border-color: var(--color-divider) !important; }
html[data-theme] .uname { color: var(--color-neutral-700); }
html[data-theme] .controls input[type=search],
html[data-theme] .suggest textarea { background: var(--color-neutral-300) !important; color: var(--color-heading) !important; }
html[data-theme] .meaning { background: color-mix(in srgb, var(--color-heading) 6%, transparent); }
html[data-theme] .note { color: var(--color-neutral-700); background: color-mix(in srgb, var(--color-heading) 6%, transparent); }

/* Dark is carbon paper: room fills and saturated spectral seams create depth. */
html[data-theme="dark"] body {
  background-image: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--color-accent-2) 16%, transparent), transparent 30%), radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 28%) !important;
}
html[data-theme="dark"] .segment-frame,
html[data-theme="dark"] .card,
html[data-theme="dark"] .sym,
html[data-theme="dark"] .receipt,
html[data-theme="dark"] .method-card {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-accent) 64%, transparent), 0 14px 32px rgba(0,0,0,.2) !important;
}
html[data-theme="dark"] .room-subhead,
html[data-theme="dark"] .cait-masthead {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-accent-2) 38%, transparent) !important;
}

/* OLED is a phosphor wireframe: black remains black, active seams become cyan-violet. */
html[data-theme="oled"] body {
  background-image: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 38%) !important;
}
html[data-theme="oled"] .segment-frame,
html[data-theme="oled"] .card,
html[data-theme="oled"] .sym,
html[data-theme="oled"] .receipt,
html[data-theme="oled"] .method-card {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-accent) 44%, transparent), inset 2px 0 0 color-mix(in srgb, var(--color-accent-2) 56%, transparent) !important;
}
html[data-theme="oled"] .prism-rule,
html[data-theme="oled"] .prism-rule--short {
  background: linear-gradient(90deg, var(--color-accent-2), var(--color-accent), transparent) !important;
}

/* Theme toggle base (light mode still needs it) */
.theme-toggle {
  position: fixed; right: 14px; bottom: 54px; z-index: 60;
  font: 500 11px/1 'IBM Plex Mono', Consolas, monospace; letter-spacing: .08em;
  padding: 8px 10px; cursor: pointer; user-select: none;
  background: color-mix(in srgb, var(--color-bg, #fff) 94%, transparent);
  color: color-mix(in srgb, var(--color-text, #111) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text, #111) 45%, transparent);
  border-radius: 0;
}
.theme-toggle:hover { color: var(--color-text, #111); border-color: var(--color-text, #111); }

/* ============================================================
   Cait-authored alchemical palettes — toggleable base themes.
   The pigment bleed from paper-crease.js still layers on top.
   ============================================================ */

/* Prism Nigredo — deep alchemical night. OLED-optimized for dissolution. */
html[data-theme="nigredo"] {
  color-scheme: dark;
  --color-bg: #0A0A0C; --color-surface: #141418; --color-text: #E2E8F0;
  --color-heading: #F1F5F9; --color-accent: #6B7C9E; --color-accent-2: #4A5568;
  --color-accent-300: #9BA8C4; --color-accent-400: #E2E8F0;
  --color-divider: #2D2D35; --color-line-soft: #1C1C22;
  --color-neutral-100: #0A0A0C; --color-neutral-200: #0F0F12; --color-neutral-300: #16161A;
  --color-neutral-400: #2A2A32; --color-neutral-500: #4A4A55; --color-neutral-600: #7E8694;
  --color-neutral-700: #9CA3AF; --color-neutral-800: #D1D5DB; --color-neutral-900: #F1F5F9;
}
html[data-theme="nigredo"] body {
  background-image: radial-gradient(circle at 20% 0%, rgba(74,85,104,0.12), transparent 40%) !important;
}
html[data-theme="nigredo"] .segment-frame,
html[data-theme="nigredo"] .sym, html[data-theme="nigredo"] .receipt,
html[data-theme="nigredo"] .method-card {
  box-shadow: inset 2px 0 0 rgba(107,124,158,0.3), 0 8px 24px rgba(0,0,0,.3) !important;
}

/* Mercury Vapor — quicksilver flow. High-speed technical reasoning. */
html[data-theme="mercury"] {
  color-scheme: dark;
  --color-bg: #0D1117; --color-surface: #161B22; --color-text: #C9D1D9;
  --color-heading: #F0F6FC; --color-accent: #7EE787; --color-accent-2: #A5D6FF;
  --color-accent-300: #6EE7B7; --color-accent-400: #F0F6FC;
  --color-divider: #30363D; --color-line-soft: #21262D;
  --color-neutral-100: #0D1117; --color-neutral-200: #161B22; --color-neutral-300: #1C2128;
  --color-neutral-400: #30363D; --color-neutral-500: #484F58; --color-neutral-600: #848D97;
  --color-neutral-700: #8B949E; --color-neutral-800: #B1BAC4; --color-neutral-900: #F0F6FC;
}
html[data-theme="mercury"] body {
  background-image: radial-gradient(circle at 80% 0%, rgba(126,231,135,0.08), transparent 35%),
                    radial-gradient(circle at 15% 85%, rgba(165,214,255,0.06), transparent 30%) !important;
}
html[data-theme="mercury"] .segment-frame,
html[data-theme="mercury"] .sym, html[data-theme="mercury"] .receipt,
html[data-theme="mercury"] .method-card {
  box-shadow: inset 2px 0 0 rgba(126,231,135,0.35), 0 8px 24px rgba(0,0,0,.25) !important;
}

/* Rubedo Ignition — catalyst spark. Discordia fusion energy. */
html[data-theme="rubedo"] {
  color-scheme: dark;
  --color-bg: #160B12; --color-surface: #1F1218; --color-text: #F8FAFC;
  --color-heading: #FFFFFF; --color-accent: #FF2A6D; --color-accent-2: #05D9E8;
  --color-accent-300: #FF6B9D; --color-accent-400: #FFFFFF;
  --color-divider: #3A1B28; --color-line-soft: #25121A;
  --color-neutral-100: #160B12; --color-neutral-200: #1A0D14; --color-neutral-300: #221220;
  --color-neutral-400: #3A1B28; --color-neutral-500: #5C2D40; --color-neutral-600: #C06A92;
  --color-neutral-700: #C46F9A; --color-neutral-800: #E8A5C0; --color-neutral-900: #FFFFFF;
}
html[data-theme="rubedo"] body {
  background-image: radial-gradient(circle at 50% 0%, rgba(255,42,109,0.1), transparent 40%),
                    radial-gradient(circle at 85% 90%, rgba(5,217,232,0.06), transparent 30%) !important;
}
html[data-theme="rubedo"] .segment-frame,
html[data-theme="rubedo"] .sym, html[data-theme="rubedo"] .receipt,
html[data-theme="rubedo"] .method-card {
  box-shadow: inset 2px 0 0 rgba(255,42,109,0.3), 0 8px 24px rgba(0,0,0,.3) !important;
}

/* Albedo Linen — tactile prism paper. Daylight reading with organic warmth. */
html[data-theme="albedo"] {
  color-scheme: light;
  --color-bg: #F4F1EA; --color-surface: #EAE4D8; --color-text: #1C1917;
  --color-heading: #0C0A09; --color-accent: #9C4A06; --color-accent-2: #78716C;
  --color-accent-300: #D97706; --color-accent-400: #292524;
  --color-divider: #D6CFC0; --color-line-soft: #E0D9CB;
  --color-neutral-100: #F4F1EA; --color-neutral-200: #EAE4D8; --color-neutral-300: #DFD8C8;
  --color-neutral-400: #A8A095; --color-neutral-500: #78716C; --color-neutral-600: #57534E;
  --color-neutral-700: #44403C; --color-neutral-800: #292524; --color-neutral-900: #0C0A09;
}
html[data-theme="albedo"] body {
  background-image: radial-gradient(circle at 30% 0%, rgba(217,119,6,0.04), transparent 40%) !important;
}

/* Coagula Slate — salt anchor. Carved rather than rendered. */
html[data-theme="coagula"] {
  color-scheme: dark;
  --color-bg: #12161A; --color-surface: #1A1F25; --color-text: #CBD5E1;
  --color-heading: #F1F5F9; --color-accent: #94A3B8; --color-accent-2: #64748B;
  --color-accent-300: #CBD5E1; --color-accent-400: #F8FAFC;
  --color-divider: #334155; --color-line-soft: #1E2A35;
  --color-neutral-100: #12161A; --color-neutral-200: #1A1F25; --color-neutral-300: #232A33;
  --color-neutral-400: #334155; --color-neutral-500: #475569; --color-neutral-600: #7E90A8;
  --color-neutral-700: #94A3B8; --color-neutral-800: #CBD5E1; --color-neutral-900: #F1F5F9;
}
html[data-theme="coagula"] body {
  background-image: radial-gradient(circle at 50% 0%, rgba(148,163,184,0.06), transparent 40%) !important;
}
html[data-theme="coagula"] .segment-frame,
html[data-theme="coagula"] .sym, html[data-theme="coagula"] .receipt,
html[data-theme="coagula"] .method-card {
  box-shadow: inset 2px 0 0 rgba(148,163,184,0.25), 0 6px 20px rgba(0,0,0,.2) !important;
}

/* ============================================================
   2026-07-24 expansion — 7 new base themes.
   pineapple pair first (the flagship), then citrinitas/azoth
   (alchemical lineage), then tidepool/moth/vhs (freeform).
   All palettes pass WCAG AA (>=4.5) for text, links, dock chips.
   ============================================================ */

/* Pineapple Noir — bioluminescent acid-tech. Rainforest terminal at night:
   near-black chlorophyll base, acid-chartreuse glow, one golden seam. */
html[data-theme="pineapple-dark"] {
  color-scheme: dark;
  --color-bg: #0B0F08; --color-surface: #131A0E; --color-text: #D8E6C4;
  --color-heading: #F4FFE0; --color-accent: #C8F542; --color-accent-2: #FFD447;
  --color-accent-300: #A4D65E; --color-accent-400: #F4FFE0;
  --color-divider: #2E3A1F; --color-line-soft: #1C2414;
  --color-neutral-100: #0B0F08; --color-neutral-200: #10150B; --color-neutral-300: #182010;
  --color-neutral-400: #33401F; --color-neutral-500: #58663F; --color-neutral-600: #8FA379;
  --color-neutral-700: #B4C79B; --color-neutral-800: #D8E6C4; --color-neutral-900: #F4FFE0;
}
html[data-theme="pineapple-dark"] body {
  background-image: radial-gradient(circle at 78% 0%, rgba(200,245,66,0.09), transparent 34%),
                    radial-gradient(circle at 8% 88%, rgba(255,212,71,0.05), transparent 30%) !important;
}
html[data-theme="pineapple-dark"] .segment-frame,
html[data-theme="pineapple-dark"] .sym, html[data-theme="pineapple-dark"] .receipt,
html[data-theme="pineapple-dark"] .method-card {
  box-shadow: inset 2px 0 0 rgba(200,245,66,0.35), 0 8px 24px rgba(0,0,0,.3) !important;
}
html[data-theme="pineapple-dark"] img { opacity: .88; }

/* Pineapple Sun — sun-bleached retro. Faded 70s citrus-crate label:
   cream/mustard paper, olive ink, warmth without glare. */
html[data-theme="pineapple-light"] {
  color-scheme: light;
  --color-bg: #F6EDD5; --color-surface: #EFE1BC; --color-text: #3A3A1E;
  --color-heading: #262610; --color-accent: #8A5A00; --color-accent-2: #6B7237;
  --color-accent-300: #A67B1F; --color-accent-400: #262610;
  --color-divider: #D9C795; --color-line-soft: #E6D8AE;
  --color-neutral-100: #F6EDD5; --color-neutral-200: #EFE1BC; --color-neutral-300: #E4D3A4;
  --color-neutral-400: #B3A26E; --color-neutral-500: #7E7443; --color-neutral-600: #5C5C33;
  --color-neutral-700: #4A4A28; --color-neutral-800: #33331A; --color-neutral-900: #262610;
}
html[data-theme="pineapple-light"] body {
  background-image: radial-gradient(circle at 24% 0%, rgba(166,123,31,0.07), transparent 42%) !important;
}
html[data-theme="pineapple-light"] .segment-frame,
html[data-theme="pineapple-light"] .sym, html[data-theme="pineapple-light"] .receipt,
html[data-theme="pineapple-light"] .method-card {
  box-shadow: inset 2px 0 0 rgba(138,90,0,0.3), 0 6px 18px rgba(90,70,20,.08) !important;
}

/* Citrinitas — the yellowing. Gold dawning out of black; candlelit vellum. */
html[data-theme="citrinitas"] {
  color-scheme: dark;
  --color-bg: #14100A; --color-surface: #1D1810; --color-text: #EADFC8;
  --color-heading: #FFF7E0; --color-accent: #E6B84C; --color-accent-2: #C2833A;
  --color-accent-300: #F0D08A; --color-accent-400: #FFF7E0;
  --color-divider: #3B3120; --color-line-soft: #241E13;
  --color-neutral-100: #14100A; --color-neutral-200: #19140D; --color-neutral-300: #221B11;
  --color-neutral-400: #3F3522; --color-neutral-500: #6B5B3B; --color-neutral-600: #A08F6A;
  --color-neutral-700: #C4B48D; --color-neutral-800: #E0D3B4; --color-neutral-900: #FFF7E0;
}
html[data-theme="citrinitas"] body {
  background-image: radial-gradient(circle at 50% 0%, rgba(230,184,76,0.09), transparent 38%) !important;
}
html[data-theme="citrinitas"] .segment-frame,
html[data-theme="citrinitas"] .sym, html[data-theme="citrinitas"] .receipt,
html[data-theme="citrinitas"] .method-card {
  box-shadow: inset 2px 0 0 rgba(230,184,76,0.32), 0 8px 24px rgba(0,0,0,.3) !important;
}

/* Azoth — quintessence. Violet-black solvent, ultraviolet seams. */
html[data-theme="azoth"] {
  color-scheme: dark;
  --color-bg: #0D0A14; --color-surface: #151020; --color-text: #D9D2E9;
  --color-heading: #F4EFFF; --color-accent: #A78BFA; --color-accent-2: #E0AAFF;
  --color-accent-300: #C4B0F5; --color-accent-400: #F4EFFF;
  --color-divider: #322A48; --color-line-soft: #1E1930;
  --color-neutral-100: #0D0A14; --color-neutral-200: #120E1B; --color-neutral-300: #1A1428;
  --color-neutral-400: #362E4E; --color-neutral-500: #5C5178; --color-neutral-600: #8B7FA8;
  --color-neutral-700: #B0A5C9; --color-neutral-800: #D5CCE6; --color-neutral-900: #F4EFFF;
}
html[data-theme="azoth"] body {
  background-image: radial-gradient(circle at 16% 0%, rgba(167,139,250,0.1), transparent 36%),
                    radial-gradient(circle at 88% 82%, rgba(224,170,255,0.05), transparent 28%) !important;
}
html[data-theme="azoth"] .segment-frame,
html[data-theme="azoth"] .sym, html[data-theme="azoth"] .receipt,
html[data-theme="azoth"] .method-card {
  box-shadow: inset 2px 0 0 rgba(167,139,250,0.32), 0 8px 24px rgba(0,0,0,.3) !important;
}

/* Tidepool — wet glass at low tide. Deep teal, aquamarine highlights. */
html[data-theme="tidepool"] {
  color-scheme: dark;
  --color-bg: #071518; --color-surface: #0D1F23; --color-text: #C6E2E0;
  --color-heading: #EBFFFC; --color-accent: #35E0C2; --color-accent-2: #6FD3FF;
  --color-accent-300: #7FE6D2; --color-accent-400: #EBFFFC;
  --color-divider: #1F3E43; --color-line-soft: #12282C;
  --color-neutral-100: #071518; --color-neutral-200: #0A1B1F; --color-neutral-300: #0F2429;
  --color-neutral-400: #24454B; --color-neutral-500: #427077; --color-neutral-600: #6FA3A8;
  --color-neutral-700: #9AC6C8; --color-neutral-800: #C6E2E0; --color-neutral-900: #EBFFFC;
}
html[data-theme="tidepool"] body {
  background-image: radial-gradient(circle at 60% 0%, rgba(53,224,194,0.07), transparent 36%),
                    radial-gradient(circle at 10% 90%, rgba(111,211,255,0.05), transparent 30%) !important;
}
html[data-theme="tidepool"] .segment-frame,
html[data-theme="tidepool"] .sym, html[data-theme="tidepool"] .receipt,
html[data-theme="tidepool"] .method-card {
  box-shadow: inset 2px 0 0 rgba(53,224,194,0.3), 0 8px 24px rgba(0,0,0,.28) !important;
}

/* Moth — dusty wing. Powder-taupe paper, ink the color of bark. */
html[data-theme="moth"] {
  color-scheme: light;
  --color-bg: #ECEAE4; --color-surface: #E1DED4; --color-text: #33312A;
  --color-heading: #1C1B15; --color-accent: #75643B; --color-accent-2: #6E6A54;
  --color-accent-300: #8A7A50; --color-accent-400: #1C1B15;
  --color-divider: #CBC6B6; --color-line-soft: #D9D5C8;
  --color-neutral-100: #ECEAE4; --color-neutral-200: #E1DED4; --color-neutral-300: #D4D0C2;
  --color-neutral-400: #A29D8C; --color-neutral-500: #767159; --color-neutral-600: #5F5B4C;
  --color-neutral-700: #4A4739; --color-neutral-800: #33312A; --color-neutral-900: #1C1B15;
}
html[data-theme="moth"] body {
  background-image: radial-gradient(circle at 40% 0%, rgba(117,100,59,0.05), transparent 44%) !important;
}

/* VHS — tracking error. Charcoal tape, magenta/cyan chroma fringe. */
html[data-theme="vhs"] {
  color-scheme: dark;
  --color-bg: #101014; --color-surface: #18171E; --color-text: #DAD4E0;
  --color-heading: #FBF7FF; --color-accent: #FF4FA3; --color-accent-2: #4FD8FF;
  --color-accent-300: #FF8AC2; --color-accent-400: #FBF7FF;
  --color-divider: #34303E; --color-line-soft: #201D28;
  --color-neutral-100: #101014; --color-neutral-200: #141318; --color-neutral-300: #1C1A22;
  --color-neutral-400: #383442; --color-neutral-500: #5E5870; --color-neutral-600: #9B8FA8;
  --color-neutral-700: #BCB2C6; --color-neutral-800: #DDD5E3; --color-neutral-900: #FBF7FF;
}
html[data-theme="vhs"] body {
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.012) 3px 4px),
                    radial-gradient(circle at 85% 4%, rgba(255,79,163,0.08), transparent 30%),
                    radial-gradient(circle at 12% 92%, rgba(79,216,255,0.06), transparent 28%) !important;
}
html[data-theme="vhs"] .segment-frame,
html[data-theme="vhs"] .sym, html[data-theme="vhs"] .receipt,
html[data-theme="vhs"] .method-card {
  box-shadow: inset 2px 0 0 rgba(255,79,163,0.3), inset -2px 0 0 rgba(79,216,255,0.22), 0 8px 24px rgba(0,0,0,.3) !important;
}

/* pineapple secret — falling fruit, one sulfur glyph in the crowd */
.pineapple-drop {
  position: fixed; top: -8vh; z-index: 200; font-size: 22px;
  pointer-events: none; animation: pineapple-fall 2.8s linear forwards;
}
@keyframes pineapple-fall { to { transform: translateY(120vh) rotate(340deg); } }