/* ═══════════════════════════════════════════════════════════════════════════
   TERRA — visual directions
   Four complete palettes over one design system. Switch with the dock at the
   foot of the page, or ?theme=ivory|dusk|atlas|midnight in the URL.
   Each keeps the Fraunces editorial spine; only colour & mood change.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A · MIDNIGHT — nocturnal plum & champagne (the default) ───────────── */
body[data-theme="midnight"]{
  background:
    radial-gradient(1200px 700px at 78% -8%, #221d33 0%, transparent 60%),
    radial-gradient(900px 600px at 8% 12%, #1a2230 0%, transparent 55%),
    var(--ink);
}

/* ── B · IVORY — daylight editorial, airy & coach-forward ──────────────── */
body[data-theme="ivory"]{
  --ink:#EDE5D5; --ink-1:#F7F1E6; --ink-2:#E8DECB; --ink-line:#D8CCB6;
  --tx:#2A2620; --tx-soft:#675E50; --tx-mute:#9B9080;
  --gold:#9A7327; --gold-bright:#B5832F; --terra:#B85C3C; --sage:#5F8470;
  --shadow:0 30px 60px -34px rgba(60,46,20,.4);
  background:
    radial-gradient(1100px 680px at 82% -6%, #F8F2E6 0%, transparent 60%),
    radial-gradient(900px 600px at 6% 8%, #F2EAD9 0%, transparent 55%),
    var(--ink);
}
body[data-theme="ivory"] #stars{ opacity:0 }
body[data-theme="ivory"] .land{ fill:#222b33; stroke:#2c3742 }   /* dark map inset stays premium on ivory */

/* ── C · DESERT DUSK — warm clay, copper & olive (Mediterranean romance) ─ */
body[data-theme="dusk"]{
  --ink:#1E1613; --ink-1:#271B17; --ink-2:#30231C; --ink-line:#3F2D25;
  --tx:#F2E6D8; --tx-soft:#C7AD96; --tx-mute:#8C7565;
  --gold:#CC8A4E; --gold-bright:#E8B277; --terra:#D2674A; --sage:#94A06A;
  background:
    radial-gradient(1200px 720px at 80% -8%, #3a241a 0%, transparent 60%),
    radial-gradient(900px 600px at 6% 14%, #2a1d1a 0%, transparent 55%),
    var(--ink);
}
body[data-theme="dusk"] .land{ fill:#2a211c; stroke:#3a2c24 }

/* ── D · ATLAS — cool teal, sage & bone (calm, clarifying, advisor) ────── */
body[data-theme="atlas"]{
  --ink:#0F1A1B; --ink-1:#142322; --ink-2:#18282A; --ink-line:#27393A;
  --tx:#E9EFEC; --tx-soft:#A4B8B2; --tx-mute:#6E8682;
  --gold:#C9A86A; --gold-bright:#E2C68C; --terra:#CD8A5A; --sage:#74B49E;
  background:
    radial-gradient(1200px 720px at 80% -8%, #123031 0%, transparent 60%),
    radial-gradient(900px 600px at 6% 12%, #0f2326 0%, transparent 55%),
    var(--ink);
}
body[data-theme="atlas"] .land{ fill:#15262a; stroke:#1f343a }

/* ── E · AURORA — bold violet & lime over near-black (the new default) ──── */
body[data-theme="mix"]{
  --ink:#0A0A0F; --ink-1:#14141C; --ink-2:#1C1C26; --ink-line:#272636;
  --tx:#F4F3F0; --tx-soft:#9D9CAA; --tx-mute:#65646F;
  --gold:#7C5CFF; --gold-bright:#B9A6FF; --terra:#E0866B; --sage:#C2E85C;
  --lime:#D8FF5C; --violet:#7C5CFF; --violet2:#B9A6FF;
  --shadow:0 26px 60px -30px rgba(0,0,0,.78);
  background:
    radial-gradient(1100px 640px at 78% -10%, #1d1640 0%, transparent 60%),
    radial-gradient(900px 600px at 6% 12%, #141026 0%, transparent 55%),
    var(--ink);
}
body[data-theme="mix"] .land{ fill:#14141f; stroke:#27243c }

/* selected chips/tabs are always light-coloured → keep their label dark on every theme */
.domain-tab.sel{ color:#16140f }

/* ── the switcher dock ─────────────────────────────────────────────────── */
#theme-dock{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:6px; padding:8px 10px;
  background:color-mix(in srgb, var(--ink-1) 78%, transparent);
  border:1px solid var(--ink-line); border-radius:100px;
  backdrop-filter:blur(14px); box-shadow:0 18px 40px -22px rgba(0,0,0,.6);
}
#theme-dock .td-label{ color:var(--tx-mute); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; padding:0 8px 0 6px; white-space:nowrap }
.td-swatch{ width:26px; height:26px; border-radius:50%; cursor:pointer; position:relative;
  border:1.5px solid transparent; transition:.3s var(--ease); display:grid; place-items:center }
.td-swatch span{ width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.td-swatch:hover{ transform:translateY(-2px) }
.td-swatch.on{ border-color:var(--gold) }
.td-swatch.on::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid color-mix(in srgb,var(--gold) 50%, transparent) }
@media(max-width:600px){ #theme-dock .td-label{ display:none } }
@media print, (prefers-reduced-motion: reduce){ .td-swatch{ transition:none } }