/* grokbot.guru themes (Juno, 2026-10-02)
   One block per theme, keyed on <html data-theme="...">. Themes change COLOR TOKENS ONLY:
   no layout, no animation, no copy. That is what keeps every animation working in every theme.
   To add a theme: copy a block, change the values, register it in /theme-picker.js. */

/* ---- 1. Night Desk (default) : cool white reading ground + night band up top ---- */
:root, html[data-theme="night-desk"] {
  --paper: #f8f9fc; --paper-deep: #e9edf5; --rule: #d2d8e4; --card: #ffffff;
  --ink: #14131f; --ink-soft: #4d5166; --crew-band: #14122b;
  --teal: #0f6e6a; --teal-deep: #0a524f; --pink: #f25aa6; --orange: #e87a2e; --gold: #d4a017; --purple: #6b4fa0;
  --link: #5b3fa6; --link-hover: #3f2a7a; --header-bg: #ffffff; --shelf-bg: #ffffff;
  --band-bg:
    radial-gradient(60rem 26rem at 78% 18%, rgba(242,90,166,.20), transparent 60%),
    radial-gradient(40rem 22rem at 8% 92%, rgba(107,79,160,.35), transparent 65%),
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,.55), transparent 2px),
    radial-gradient(1px 1px at 34% 64%, rgba(255,255,255,.4), transparent 2px),
    radial-gradient(1.4px 1.4px at 61% 12%, rgba(255,255,255,.5), transparent 2px),
    radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,.45), transparent 2px),
    linear-gradient(180deg, #14122b 0%, #1e1a42 100%);
  --band-ink: #f2f3fa; --band-head: #ffffff; --band-soft: #b9b8d9; --band-rule: rgba(255,255,255,.14);
  --band-accent: #d4a017; --band-edge: #f25aa6;
  --frame-edge: #ffffff; --frame-fill: #0d0b1f;
  --cta-bg: #f25aa6; --cta-ink: #14122b; --cta-hover: #ff7cbc; --ghost-edge: rgba(255,255,255,.6);
  --door-panel: rgba(255,255,255,.06); --door-hover: rgba(255,255,255,.12);
  --door-1: #3fd1c3; --door-2: #d4a017; --door-3: #ff9a52;
  --you-glow: 0 0 18px rgba(242,90,166,.65);
  --night: #14122b; --night-2: #1e1a42; --lit: #f2f3fa; --lit-soft: #b9b8d9;  /* used by the Galaxy module */
  color-scheme: light;
}

/* ---- 2. Classic (retro) : the original Sept. 2026 cream newsroom look ---- */
html[data-theme="classic"] {
  --paper: #f7f5f0; --paper-deep: #ebe6dc; --rule: #d9d2c5; --card: #fffef8;
  --ink: #1c1a17; --ink-soft: #5a564e; --crew-band: #1c1a17;
  --link: #0f6e6a; --link-hover: #0a524f;
  --header-bg: color-mix(in srgb, #f7f5f0 92%, #fff); --shelf-bg: #f7f5f0;
  --band-bg: #f7f5f0;
  --band-ink: #1c1a17; --band-head: #1c1a17; --band-soft: #5a564e; --band-rule: #d9d2c5;
  --band-accent: #0f6e6a; --band-edge: #1c1a17;
  --frame-edge: #1c1a17; --frame-fill: #ebe6dc;
  --cta-bg: #0f6e6a; --cta-ink: #ffffff; --cta-hover: #0a524f; --ghost-edge: #1c1a17;
  --door-panel: #fffef8; --door-hover: #ffffff;
  --door-1: #0f6e6a; --door-2: #6b4fa0; --door-3: #e87a2e;
  --you-glow: none;
  --night: #1c1a17; --night-2: #2a2622; --lit: #f2f3fa; --lit-soft: #cfc8ba;
}

/* ---- Theme picker (shared by all themes) ---- */
.theme-picker { position: relative; flex: 0 0 auto; font-family: var(--font-sans); }
.theme-picker-btn {
  display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap, 2.75rem); padding: 0 .65rem;
  background: transparent; border: 1px solid var(--rule); color: var(--ink); cursor: pointer;
  font: 700 .72rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
}
.theme-picker-btn:hover, .theme-picker-btn:focus-visible { border-color: var(--ink); }
.theme-swatch { width: .95rem; height: .95rem; border-radius: 50%; border: 1px solid var(--ink); display: inline-block;
  background: conic-gradient(var(--sw-a) 0 50%, var(--sw-b) 50% 100%); }
.theme-picker-menu {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30; min-width: 13rem; margin: 0; padding: .35rem;
  list-style: none; background: var(--card); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--paper-deep);
}
.theme-picker-menu[hidden] { display: none; }
.theme-picker-menu button {
  width: 100%; display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; min-height: var(--tap, 2.75rem);
  background: transparent; border: 0; color: var(--ink); cursor: pointer; text-align: left; font: 600 .92rem/1.2 var(--font-sans);
}
.theme-picker-menu button:hover, .theme-picker-menu button:focus-visible { background: var(--paper-deep); }
.theme-picker-menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; }
.theme-picker-menu .theme-note { display: block; font-weight: 400; font-size: .76rem; color: var(--ink-soft); }
@media (max-width: 760px) { .theme-picker-btn .theme-picker-label { display: none; } }
/* keep the masthead on one line (Remy lock): picker goes icon-only and search gives up a little width on mid desktops */
@media (min-width: 721px) and (max-width: 1240px) {
  .theme-picker-btn .theme-picker-label { display: none; }
  .theme-picker-btn { padding: 0 .7rem; }
  .top .site-search { flex-basis: 11.5rem; min-width: 9rem; }
}