/* theme.css — Know Longer's visual system.
 *
 * Eight color schemes, switched by data-theme on <html> (set pre-paint by
 * theme.js, chosen at /settings.html, saved per-browser).
 *
 * Design rules this file enforces:
 *   - Text is never gradient-filled and almost always neutral; color is
 *     reserved for interaction, structure, and small functional accents.
 *   - Gradients appear only in the page background (very light), the top
 *     spine, and primary buttons (two close stops, toned down).
 *   - Typeface is Geist throughout — clean tech-startup register.
 *
 * Every page's own stylesheet uses ONLY these variables for color.
 * Loaded AFTER each page's inline <style> so shared component rules win ties.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Geist+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------------------
 * TOKENS — one block per theme
 * ------------------------------------------------------------------------ */

/* Arctic (default) — near-white, cool grays, one electric blue */
:root, [data-theme="arctic"] {
  color-scheme: light;
  --accent: #2563eb; --accent2: #4c7cf0; --accent-strong: #1d4fc4;
  --on-accent: #ffffff;
  --accent-soft: #eef3fe; --accent-border: #cfdcfa;
  --bg0: #fbfcfe; --bg1: #f4f6fa;
  --surface: #ffffff; --surface2: #f4f6f9;
  --border: #dde3ed; --border-soft: #eaeef5;
  --text: #17202e; --text2: #46536b; --muted: #6f7a93; --faint: #9ba5ba;
  --key: #15803d; --key-strong: #116631; --key-soft: #e7f5ec;
  --meaning: #7c3aed;
  --gold: #9a6b0e; --gold-strong: #7a540b; --gold-soft: #faf3dd; --gold-border: #e9d9a6;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #cc3a3a; --danger-strong: #a32626; --danger-soft: #fdecec;
  --shadow: 0 1px 2px rgba(20,30,50,.04), 0 4px 14px rgba(20,30,50,.05);
  --shadow-pop: 0 4px 16px rgba(20,30,50,.11);
  --shadow-modal: 0 10px 40px rgba(20,30,50,.2);
  --overlay: rgba(20,28,44,.35);
}

/* Paper — white, black text, monochrome interaction */
[data-theme="paper"] {
  color-scheme: light;
  --accent: #151515; --accent2: #333333; --accent-strong: #000000;
  --on-accent: #ffffff;
  --accent-soft: #f1f1f1; --accent-border: #d9d9d9;
  --bg0: #ffffff; --bg1: #fafafa;
  --surface: #ffffff; --surface2: #f6f6f6;
  --border: #e1e1e1; --border-soft: #ededed;
  --text: #141414; --text2: #454545; --muted: #767676; --faint: #a3a3a3;
  --key: #2e2e2e; --key-strong: #000000; --key-soft: #f0f0f0;
  --meaning: #4a4a4a;
  --gold: #6e6e6e; --gold-strong: #4a4a4a; --gold-soft: #f4f4f2; --gold-border: #dcdcd8;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #c23434; --danger-strong: #9a2323; --danger-soft: #fbeaea;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.1);
  --shadow-modal: 0 10px 40px rgba(0,0,0,.18);
  --overlay: rgba(0,0,0,.35);
}

/* Carbon — near-black, white text, monochrome interaction */
[data-theme="carbon"] {
  color-scheme: dark;
  --accent: #f2f2f3; --accent2: #d9d9dc; --accent-strong: #ffffff;
  --on-accent: #121214;
  --accent-soft: #222226; --accent-border: #3a3a40;
  --bg0: #0e0e10; --bg1: #151518;
  --surface: #19191c; --surface2: #212125;
  --border: #2e2e33; --border-soft: #242428;
  --text: #f0f0f2; --text2: #c3c3c9; --muted: #8f8f98; --faint: #64646c;
  --key: #cdcdd3; --key-strong: #ffffff; --key-soft: #26262b;
  --meaning: #b9b9c4;
  --gold: #c9b06a; --gold-strong: #dcc687; --gold-soft: #292416; --gold-border: #4c4127;
  --mark: #6b5a1e; --mark-ink: #ffe9b0;
  --danger: #ef7070; --danger-strong: #ff9a9a; --danger-soft: #351d20;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.4);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.55);
  --shadow-modal: 0 10px 40px rgba(0,0,0,.65);
  --overlay: rgba(0,0,0,.6);
}

/* Graphite — layered grays with a steel-slate accent */
[data-theme="graphite"] {
  color-scheme: light;
  --accent: #4b5563; --accent2: #626e7e; --accent-strong: #353d48;
  --on-accent: #ffffff;
  --accent-soft: #e8ebef; --accent-border: #c8ced6;
  --bg0: #edeff1; --bg1: #e4e7ea;
  --surface: #f8f9fa; --surface2: #eef0f2;
  --border: #d2d7dc; --border-soft: #dfe3e7;
  --text: #24272b; --text2: #4a5058; --muted: #7b828b; --faint: #a5abb4;
  --key: #566274; --key-strong: #3c4654; --key-soft: #e6eaef;
  --meaning: #5d6678;
  --gold: #8a7a4e; --gold-strong: #6b5d38; --gold-soft: #efece2; --gold-border: #d6cfba;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #b74040; --danger-strong: #922c2c; --danger-soft: #f6e7e7;
  --shadow: 0 1px 2px rgba(30,35,42,.05), 0 4px 14px rgba(30,35,42,.06);
  --shadow-pop: 0 4px 16px rgba(30,35,42,.12);
  --shadow-modal: 0 10px 40px rgba(30,35,42,.2);
  --overlay: rgba(30,35,42,.35);
}

/* Sage — soft green-gray light */
[data-theme="sage"] {
  color-scheme: light;
  --accent: #4a7c59; --accent2: #5d8f6c; --accent-strong: #3a6347;
  --on-accent: #ffffff;
  --accent-soft: #eaf1eb; --accent-border: #cfe0d4;
  --bg0: #f7f9f5; --bg1: #eef3ec;
  --surface: #fdfdfc; --surface2: #f1f4ee;
  --border: #dbe2d6; --border-soft: #e6ebe1;
  --text: #232920; --text2: #4b5446; --muted: #79826f; --faint: #a3ab99;
  --key: #40704f; --key-strong: #2f553b; --key-soft: #e6f0e8;
  --meaning: #6d5fb0;
  --gold: #8f6f1c; --gold-strong: #6f5614; --gold-soft: #f6f0dc; --gold-border: #e0d3a5;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #b74a3a; --danger-strong: #933527; --danger-soft: #f8eae7;
  --shadow: 0 1px 2px rgba(35,41,32,.05), 0 4px 14px rgba(35,41,32,.06);
  --shadow-pop: 0 4px 16px rgba(35,41,32,.11);
  --shadow-modal: 0 10px 40px rgba(35,41,32,.2);
  --overlay: rgba(35,41,32,.35);
}

/* Sand — warm paper, bronze accent */
[data-theme="sand"] {
  color-scheme: light;
  --accent: #9c6a26; --accent2: #b07d33; --accent-strong: #7c531d;
  --on-accent: #ffffff;
  --accent-soft: #f6edde; --accent-border: #e6d4b2;
  --bg0: #fbf8f1; --bg1: #f5eee1;
  --surface: #fffdf8; --surface2: #f6f1e6;
  --border: #e5dccb; --border-soft: #eee7d8;
  --text: #2b2620; --text2: #56503f; --muted: #857b66; --faint: #ada38c;
  --key: #4c7a45; --key-strong: #3a5e35; --key-soft: #e9f1e6;
  --meaning: #7a5fb0;
  --gold: #9c6a26; --gold-strong: #7c531d; --gold-soft: #f6edde; --gold-border: #e6d4b2;
  --mark: #ffe4a0; --mark-ink: #4a3300;
  --danger: #bb4433; --danger-strong: #963225; --danger-soft: #f9eae6;
  --shadow: 0 1px 2px rgba(60,48,30,.05), 0 4px 14px rgba(60,48,30,.06);
  --shadow-pop: 0 4px 16px rgba(60,48,30,.11);
  --shadow-modal: 0 10px 40px rgba(60,48,30,.2);
  --overlay: rgba(43,38,32,.35);
}

/* Dusk — deep blue-gray night, periwinkle accent */
[data-theme="dusk"] {
  color-scheme: dark;
  --accent: #8b93f8; --accent2: #9fa6ff; --accent-strong: #a9b0ff;
  --on-accent: #10131f;
  --accent-soft: #232a48; --accent-border: #3c4670;
  --bg0: #10141f; --bg1: #181d2d;
  --surface: #1a2030; --surface2: #212840;
  --border: #303a54; --border-soft: #273047;
  --text: #e4e8f4; --text2: #b6bdd4; --muted: #8790ac; --faint: #5f6883;
  --key: #5fd0a0; --key-strong: #86e0bb; --key-soft: #17342b;
  --meaning: #b79ffb;
  --gold: #d8b158; --gold-strong: #e7c87e; --gold-soft: #2b2515; --gold-border: #52462a;
  --mark: #6b5a1e; --mark-ink: #ffe9b0;
  --danger: #ef7070; --danger-strong: #ff9a9a; --danger-soft: #371d26;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.5);
  --shadow-modal: 0 10px 40px rgba(0,0,0,.6);
  --overlay: rgba(6,9,18,.6);
}

/* Pine — dark green, mint accent */
[data-theme="pine"] {
  color-scheme: dark;
  --accent: #57c99b; --accent2: #6fd8ac; --accent-strong: #83e2bb;
  --on-accent: #06120c;
  --accent-soft: #17302a; --accent-border: #2a4c3d;
  --bg0: #0e1512; --bg1: #141d18;
  --surface: #16201a; --surface2: #1c2822;
  --border: #2b3a31; --border-soft: #22302a;
  --text: #e4ede7; --text2: #b7c5bc; --muted: #87988d; --faint: #5c6c62;
  --key: #57c99b; --key-strong: #83e2bb; --key-soft: #17302a;
  --meaning: #9d8ef0;
  --gold: #cfae56; --gold-strong: #dfc47c; --gold-soft: #292314; --gold-border: #4c4326;
  --mark: #66551c; --mark-ink: #ffe9b0;
  --danger: #ef7070; --danger-strong: #ff9a9a; --danger-soft: #33201f;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.5);
  --shadow-modal: 0 10px 40px rgba(0,0,0,.6);
  --overlay: rgba(3,8,6,.6);
}

/* Derived */
:root {
  --g: linear-gradient(135deg, var(--accent), var(--accent2));
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

/* ---------------------------------------------------------------------------
 * SHARED IDENTITY
 * ------------------------------------------------------------------------ */

html { background: var(--bg1); }

body {
  font-family: var(--font);
  background: linear-gradient(165deg, var(--bg0), var(--bg1)) fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* The spine: a slim gradient strip across the top of every page. */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--g);
  z-index: 1000;
  pointer-events: none;
}

/* Headings: neutral ink, tight modern setting. Never gradient-filled. */
h1, h2, h3 {
  font-family: var(--font);
  color: var(--text);
  letter-spacing: -0.015em;
  font-weight: 650;
}

button, input, select { font-family: inherit; }
input, select { background: var(--surface); color: var(--text); }
input::placeholder { color: var(--faint); }

mark { background: var(--mark); color: var(--mark-ink); border-radius: 3px; padding: 0 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

img.thumb { background: var(--border-soft); }

/* ---------------------------------------------------------------------------
 * TOP BAR — shared project navigation (injected by KL.topbar)
 * ------------------------------------------------------------------------ */

.klbar {
  position: sticky; top: 0; z-index: 40;
  margin: 0 0 18px;
  padding: 10px 0;
  display: flex; align-items: center; gap: 4px;
  background: color-mix(in srgb, var(--bg0) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.klbar::-webkit-scrollbar { display: none; }

.klbar .logo {
  display: flex; align-items: center; color: var(--text);
  text-decoration: none; margin-right: 14px; flex-shrink: 0;
}
.klbar .logo:hover { color: var(--accent); }
.klbar .logo img.kl-logo { display: block; height: 26px; width: auto; }
/* show the light-theme (dark-ink) logo by default; dark themes flip it */
.kl-logo-dark { display: none !important; }
[data-theme="carbon"] .kl-logo-light, [data-theme="dusk"] .kl-logo-light,
[data-theme="pine"] .kl-logo-light, [data-theme="miami"] .kl-logo-light,
[data-theme="gilded"] .kl-logo-light, [data-theme="navy"] .kl-logo-light,
[data-theme="cocoa"] .kl-logo-light { display: none !important; }
[data-theme="carbon"] .kl-logo-dark, [data-theme="dusk"] .kl-logo-dark,
[data-theme="pine"] .kl-logo-dark, [data-theme="miami"] .kl-logo-dark,
[data-theme="gilded"] .kl-logo-dark, [data-theme="navy"] .kl-logo-dark,
[data-theme="cocoa"] .kl-logo-dark { display: block !important; }

.klbar .tab {
  padding: 6px 11px; border-radius: 7px; font-size: 13px;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
}
.klbar .tab:hover { color: var(--text); background: var(--surface2); }
.klbar .tab.on { color: var(--accent); background: var(--accent-soft); font-weight: 550; }

.klbar .tab .soonb { font-size: 8.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); margin-left: 3px; }

.klbar .sp { flex: 1; }

.klbar .backbtn, .klbar .gear {
  padding: 4px 10px; border-radius: 7px; font-size: 17px; line-height: 1.35;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  background: none; border: 1px solid var(--border-soft); cursor: pointer;
  flex-shrink: 0;
}
.klbar .backbtn:hover, .klbar .gear:hover { color: var(--text); border-color: var(--border); }
.klbar .gear { margin-left: 6px; }

/* ---------------------------------------------------------------------------
 * SHARED COMPONENTS
 * ------------------------------------------------------------------------ */

/* Rectangular chip — the site's standard small tappable unit. */
.rchip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text2);
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
}
.rchip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Segmented control (sort switches etc.) */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px;
       overflow: hidden; background: var(--surface); }
.seg button { border: none; background: none; padding: 6px 12px; font-size: 12.5px;
              color: var(--muted); cursor: pointer; border-right: 1px solid var(--border-soft); }
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--text); background: var(--surface2); }
.seg button.on { color: var(--accent); background: var(--accent-soft); font-weight: 550; }

/* Primary button — the one place a (toned-down) gradient lives. */
.btnp {
  background: var(--g); color: var(--on-accent);
  border: none; border-radius: 9px; cursor: pointer;
  font-weight: 600;
}
.btnp:hover { filter: brightness(1.05); }

/* Panels/cards */
.panelc {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

a.card, .card.live { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); }
a.card { transition: border-color .15s ease, box-shadow .15s ease; }
a.card:hover { box-shadow: var(--shadow-pop); }

.back { color: var(--muted); }
.back:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

[data-theme="carbon"] ::-webkit-scrollbar, [data-theme="dusk"] ::-webkit-scrollbar,
[data-theme="pine"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="carbon"] ::-webkit-scrollbar-thumb, [data-theme="dusk"] ::-webkit-scrollbar-thumb,
[data-theme="pine"] ::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 999px; border: 2px solid var(--bg1);
}
[data-theme="carbon"] ::-webkit-scrollbar-track, [data-theme="dusk"] ::-webkit-scrollbar-track,
[data-theme="pine"] ::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------------
 * EXPANSION PACK — twelve more schemes
 * ------------------------------------------------------------------------ */

/* Merlot — warm white with a deep maroon accent */
[data-theme="merlot"] {
  color-scheme: light;
  --accent: #8a2438; --accent2: #a13148; --accent-strong: #6d1b2c;
  --on-accent: #ffffff;
  --accent-soft: #f7e9ec; --accent-border: #eaccd3;
  --bg0: #fcf9f9; --bg1: #f7eff1;
  --surface: #ffffff; --surface2: #f7f1f2;
  --border: #e7dbde; --border-soft: #efe5e7;
  --text: #231a1d; --text2: #54464a; --muted: #837378; --faint: #ab9ba0;
  --key: #2f6f4f; --key-strong: #245741; --key-soft: #e7f2ec;
  --meaning: #7a4fb0;
  --gold: #97701c; --gold-strong: #785815; --gold-soft: #f8f1dd; --gold-border: #e5d5a7;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #c23434; --danger-strong: #9a2323; --danger-soft: #fbeaea;
  --shadow: 0 1px 2px rgba(50,25,32,.05), 0 4px 14px rgba(50,25,32,.06);
  --shadow-pop: 0 4px 16px rgba(50,25,32,.12);
  --shadow-modal: 0 10px 40px rgba(50,25,32,.2);
  --overlay: rgba(35,26,29,.35);
}

/* Amethyst — near-white with violet */
[data-theme="amethyst"] {
  color-scheme: light;
  --accent: #7c3aed; --accent2: #9257f2; --accent-strong: #6527cc;
  --on-accent: #ffffff;
  --accent-soft: #f3edfd; --accent-border: #ddd0f6;
  --bg0: #fbfafe; --bg1: #f4f1fa;
  --surface: #ffffff; --surface2: #f5f3f9;
  --border: #e1dcee; --border-soft: #eae6f3;
  --text: #1d1731; --text2: #4c4468; --muted: #766e93; --faint: #a29bbd;
  --key: #15803d; --key-strong: #116631; --key-soft: #e7f5ec;
  --meaning: #7c3aed;
  --gold: #9a6b0e; --gold-strong: #7a540b; --gold-soft: #faf3dd; --gold-border: #e9d9a6;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #cc3a3a; --danger-strong: #a32626; --danger-soft: #fdecec;
  --shadow: 0 1px 2px rgba(35,25,60,.05), 0 4px 14px rgba(35,25,60,.06);
  --shadow-pop: 0 4px 16px rgba(35,25,60,.12);
  --shadow-modal: 0 10px 40px rgba(35,25,60,.2);
  --overlay: rgba(29,23,49,.35);
}

/* Miami — night violet with hot pink and cyan. The loud one. */
[data-theme="miami"] {
  color-scheme: dark;
  --accent: #f72585; --accent2: #22d3ee; --accent-strong: #ff5ca8;
  --on-accent: #ffffff;
  --accent-soft: #321a3e; --accent-border: #5c2a63;
  --bg0: #140f22; --bg1: #1d1332;
  --surface: #1e1834; --surface2: #262046;
  --border: #3b3263; --border-soft: #2d2650;
  --text: #f2ecfa; --text2: #c9bfe0; --muted: #968cb8; --faint: #675e8a;
  --key: #34d399; --key-strong: #6ee7b7; --key-soft: #143b31;
  --meaning: #22d3ee;
  --gold: #f0c05a; --gold-strong: #f6d488; --gold-soft: #33290f; --gold-border: #5c4c22;
  --mark: #6b5a1e; --mark-ink: #ffe9b0;
  --danger: #ff6b81; --danger-strong: #ff97a6; --danger-soft: #3d1c2c;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.4);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.55);
  --shadow-modal: 0 10px 40px rgba(0,0,0,.65);
  --overlay: rgba(9,6,20,.6);
}

/* Silver — cool metallic light grays */
[data-theme="silver"] {
  color-scheme: light;
  --accent: #64748b; --accent2: #7c8aa0; --accent-strong: #4b5972;
  --on-accent: #ffffff;
  --accent-soft: #ecf0f4; --accent-border: #ccd5df;
  --bg0: #f5f7f9; --bg1: #eceff2;
  --surface: #fbfcfd; --surface2: #f0f3f6;
  --border: #d6dce3; --border-soft: #e2e7ec;
  --text: #1f242b; --text2: #49515c; --muted: #79828d; --faint: #a4abb5;
  --key: #52707e; --key-strong: #3d5560; --key-soft: #e6eef2;
  --meaning: #6a7288;
  --gold: #8a7a4e; --gold-strong: #6b5d38; --gold-soft: #f1eee3; --gold-border: #d9d2bd;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #b74040; --danger-strong: #922c2c; --danger-soft: #f6e7e7;
  --shadow: 0 1px 2px rgba(30,36,44,.05), 0 4px 14px rgba(30,36,44,.06);
  --shadow-pop: 0 4px 16px rgba(30,36,44,.11);
  --shadow-modal: 0 10px 40px rgba(30,36,44,.2);
  --overlay: rgba(31,36,43,.35);
}

/* Gilded — charcoal and gold */
[data-theme="gilded"] {
  color-scheme: dark;
  --accent: #d4af37; --accent2: #e2c25c; --accent-strong: #e8cd74;
  --on-accent: #221b06;
  --accent-soft: #2a2412; --accent-border: #4e421e;
  --bg0: #131110; --bg1: #1b1713;
  --surface: #1d1a16; --surface2: #26221c;
  --border: #38321f; --border-soft: #2b2720;
  --text: #ece7dc; --text2: #c6bfae; --muted: #97907d; --faint: #6a6455;
  --key: #9dbb85; --key-strong: #bad3a6; --key-soft: #26301c;
  --meaning: #c3aae8;
  --gold: #d4af37; --gold-strong: #e2c25c; --gold-soft: #2a2412; --gold-border: #4e421e;
  --mark: #6b5a1e; --mark-ink: #ffe9b0;
  --danger: #ef7070; --danger-strong: #ff9a9a; --danger-soft: #362020;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.4);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.55);
  --shadow-modal: 0 10px 40px rgba(0,0,0,.65);
  --overlay: rgba(8,7,5,.6);
}

/* Amber — warm light with a true amber accent */
[data-theme="amber"] {
  color-scheme: light;
  --accent: #d97706; --accent2: #ea8b1e; --accent-strong: #b26005;
  --on-accent: #ffffff;
  --accent-soft: #fdf1e0; --accent-border: #f2d9b0;
  --bg0: #fdfaf4; --bg1: #f9f2e6;
  --surface: #fffdf9; --surface2: #f8f3ea;
  --border: #eadfcb; --border-soft: #f1e8d8;
  --text: #2a2115; --text2: #5a4d3a; --muted: #8a7c64; --faint: #b2a58c;
  --key: #4c7a45; --key-strong: #3a5e35; --key-soft: #e9f1e6;
  --meaning: #8a5fb0;
  --gold: #d97706; --gold-strong: #b26005; --gold-soft: #fdf1e0; --gold-border: #f2d9b0;
  --mark: #ffe4a0; --mark-ink: #4a3300;
  --danger: #c23a2a; --danger-strong: #9c2b1d; --danger-soft: #fae9e6;
  --shadow: 0 1px 2px rgba(62,48,25,.05), 0 4px 14px rgba(62,48,25,.06);
  --shadow-pop: 0 4px 16px rgba(62,48,25,.11);
  --shadow-modal: 0 10px 40px rgba(62,48,25,.2);
  --overlay: rgba(42,33,21,.35);
}

/* Emerald — crisp white with vivid green */
[data-theme="emerald"] {
  color-scheme: light;
  --accent: #059669; --accent2: #10b981; --accent-strong: #047a55;
  --on-accent: #ffffff;
  --accent-soft: #e6f6f0; --accent-border: #bfe6d8;
  --bg0: #f9fcfa; --bg1: #eff7f3;
  --surface: #ffffff; --surface2: #f2f7f4;
  --border: #d9e5de; --border-soft: #e5eee8;
  --text: #142620; --text2: #3f5c50; --muted: #6c8a7c; --faint: #9cb3a7;
  --key: #059669; --key-strong: #047a55; --key-soft: #e6f6f0;
  --meaning: #7c3aed;
  --gold: #9a6b0e; --gold-strong: #7a540b; --gold-soft: #faf3dd; --gold-border: #e9d9a6;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #cc3a3a; --danger-strong: #a32626; --danger-soft: #fdecec;
  --shadow: 0 1px 2px rgba(15,45,32,.05), 0 4px 14px rgba(15,45,32,.06);
  --shadow-pop: 0 4px 16px rgba(15,45,32,.11);
  --shadow-modal: 0 10px 40px rgba(15,45,32,.2);
  --overlay: rgba(20,38,32,.35);
}

/* Navy — deep navy night with a sky accent */
[data-theme="navy"] {
  color-scheme: dark;
  --accent: #38bdf8; --accent2: #5ccbfa; --accent-strong: #7dd7fb;
  --on-accent: #06202e;
  --accent-soft: #143047; --accent-border: #245a7a;
  --bg0: #0b1526; --bg1: #111e36;
  --surface: #142238; --surface2: #1b2c48;
  --border: #2b405f; --border-soft: #21344f;
  --text: #e3ecf6; --text2: #b3c3d8; --muted: #8195af; --faint: #586c85;
  --key: #4ade80; --key-strong: #86efac; --key-soft: #143526;
  --meaning: #a5b4fc;
  --gold: #ddb45c; --gold-strong: #eac982; --gold-soft: #2c2513; --gold-border: #544726;
  --mark: #6b5a1e; --mark-ink: #ffe9b0;
  --danger: #f87171; --danger-strong: #fca5a5; --danger-soft: #3a2028;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.5);
  --shadow-modal: 0 10px 40px rgba(0,0,0,.6);
  --overlay: rgba(4,9,18,.6);
}

/* Rainbow — neutral page, full spectrum where the gradient lives */
[data-theme="rainbow"] {
  color-scheme: light;
  --accent: #8b5cf6; --accent2: #ec4899; --accent-strong: #7443e0;
  --on-accent: #ffffff;
  --accent-soft: #f4f0fd; --accent-border: #e0d4f8;
  --bg0: #fefefe; --bg1: #f7f7fb;
  --surface: #ffffff; --surface2: #f5f5f8;
  --border: #e2e2ea; --border-soft: #ececf2;
  --text: #17171c; --text2: #47474f; --muted: #75757e; --faint: #a3a3ab;
  --key: #16a34a; --key-strong: #128040; --key-soft: #e7f6ec;
  --meaning: #8b5cf6;
  --gold: #ca8a04; --gold-strong: #a16f03; --gold-soft: #fbf3d9; --gold-border: #ecd9a0;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #dc2626; --danger-strong: #b01c1c; --danger-soft: #fdeaea;
  --shadow: 0 1px 2px rgba(23,23,28,.05), 0 4px 14px rgba(23,23,28,.06);
  --shadow-pop: 0 4px 16px rgba(23,23,28,.11);
  --shadow-modal: 0 10px 40px rgba(23,23,28,.2);
  --overlay: rgba(23,23,28,.35);
  --g: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6);
}

/* Sakura — soft blossom pink light */
[data-theme="sakura"] {
  color-scheme: light;
  --accent: #d15577; --accent2: #dd6f8e; --accent-strong: #b53e60;
  --on-accent: #ffffff;
  --accent-soft: #fbeaee; --accent-border: #f2cdd8;
  --bg0: #fdf8f9; --bg1: #faf0f3;
  --surface: #fffdfd; --surface2: #f9f2f4;
  --border: #eedbe0; --border-soft: #f3e6ea;
  --text: #2b2024; --text2: #5c4b52; --muted: #8d7982; --faint: #b5a3ab;
  --key: #4c8a5f; --key-strong: #3a6b49; --key-soft: #e8f3ec;
  --meaning: #8a5fb0;
  --gold: #a1761b; --gold-strong: #7f5c14; --gold-soft: #f9f2dd; --gold-border: #e7d6a6;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #c23434; --danger-strong: #9a2323; --danger-soft: #fbeaea;
  --shadow: 0 1px 2px rgba(60,32,42,.05), 0 4px 14px rgba(60,32,42,.06);
  --shadow-pop: 0 4px 16px rgba(60,32,42,.11);
  --shadow-modal: 0 10px 40px rgba(60,32,42,.2);
  --overlay: rgba(43,32,36,.35);
}

/* Cocoa — dark roast browns with a caramel accent */
[data-theme="cocoa"] {
  color-scheme: dark;
  --accent: #d29a6b; --accent2: #ddad83; --accent-strong: #e5bd97;
  --on-accent: #241205;
  --accent-soft: #32271d; --accent-border: #55402c;
  --bg0: #171210; --bg1: #201915;
  --surface: #211b17; --surface2: #2b231d;
  --border: #40352b; --border-soft: #322a23;
  --text: #ede5dd; --text2: #c8bcb0; --muted: #98897b; --faint: #6a5f54;
  --key: #9cbf8a; --key-strong: #b9d5aa; --key-soft: #27301f;
  --meaning: #c0a6e8;
  --gold: #d4ab4f; --gold-strong: #e2c176; --gold-soft: #2c2413; --gold-border: #524526;
  --mark: #6b5a1e; --mark-ink: #ffe9b0;
  --danger: #ef7070; --danger-strong: #ff9a9a; --danger-soft: #382020;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.4);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.55);
  --shadow-modal: 0 10px 40px rgba(0,0,0,.65);
  --overlay: rgba(10,7,5,.6);
}

/* Newsprint — warm editorial grays with a press-red accent */
[data-theme="newsprint"] {
  color-scheme: light;
  --accent: #b3372b; --accent2: #c44b3c; --accent-strong: #922a20;
  --on-accent: #ffffff;
  --accent-soft: #f7e9e7; --accent-border: #eccbc6;
  --bg0: #f7f6f3; --bg1: #efeeea;
  --surface: #fcfbf9; --surface2: #f2f1ed;
  --border: #dcdad2; --border-soft: #e6e4dd;
  --text: #1f1e1b; --text2: #4c4a44; --muted: #7d7b73; --faint: #a8a69d;
  --key: #3f6f50; --key-strong: #2f553d; --key-soft: #e8f0ea;
  --meaning: #6a5fa8;
  --gold: #8f701c; --gold-strong: #6f5715; --gold-soft: #f4efdc; --gold-border: #e0d4a8;
  --mark: #ffe9a8; --mark-ink: #4a3a00;
  --danger: #b3372b; --danger-strong: #922a20; --danger-soft: #f7e9e7;
  --shadow: 0 1px 2px rgba(31,30,27,.05), 0 4px 14px rgba(31,30,27,.06);
  --shadow-pop: 0 4px 16px rgba(31,30,27,.11);
  --shadow-modal: 0 10px 40px rgba(31,30,27,.2);
  --overlay: rgba(31,30,27,.35);
}
