/* Palette candidates for the preview page. Each redefines the design tokens only. */
:root[data-theme="emerald"] {
  --bg: #0a0f0d; --bg-2: #0f1613; --bg-3: #141c18; --bg-deep: #060a08;
  --accent: #2ee6a6; --accent-2: #9dffd9; --accent-ink: #06110c;
  --accent-glow: rgba(46, 230, 166, 0.3); --accent-soft: rgba(46, 230, 166, 0.14);
  --green: #2ee6a6; --pink: #ff7a9e;
}
:root[data-theme="ruby"] {
  --bg: #110b0e; --bg-2: #170f13; --bg-3: #1d1318; --bg-deep: #0a0608;
  --accent: #ff4d7d; --accent-2: #ffb15c; --accent-ink: #14060a;
  --accent-glow: rgba(255, 77, 125, 0.32); --accent-soft: rgba(255, 77, 125, 0.14);
  --pink: #ffb15c;
}
:root[data-theme="amethyst"] {
  --bg: #0c0a14; --bg-2: #120f1c; --bg-3: #181424; --bg-deep: #07060d;
  --accent: #a78bfa; --accent-2: #f0abfc; --accent-ink: #0c0a14;
  --accent-glow: rgba(167, 139, 250, 0.32); --accent-soft: rgba(167, 139, 250, 0.14);
  --pink: #f0abfc;
}
:root[data-theme="champagne"] {
  --bg: #0f0f11; --bg-2: #151518; --bg-3: #1b1b1f; --bg-deep: #0a0a0b;
  --accent: #e6c47a; --accent-2: #fff1c9; --accent-ink: #141208;
  --accent-glow: rgba(230, 196, 122, 0.28); --accent-soft: rgba(230, 196, 122, 0.14);
  --pink: #ff8a6b;
}
:root[data-theme="porcelain"] {
  --bg: #f6f4ef; --bg-2: #ffffff; --bg-3: #f0ede6; --bg-deep: #ebe7de;
  --card: rgba(20, 20, 26, 0.035); --card-2: rgba(20, 20, 26, 0.06);
  --line: rgba(20, 20, 26, 0.1); --line-strong: rgba(20, 20, 26, 0.2);
  --text: #14141a; --text-2: #4a4c58; --muted: #6b6e7c;
  --accent: #1f4fd6; --accent-2: #0ea5c9; --accent-ink: #ffffff;
  --accent-glow: rgba(31, 79, 214, 0.25); --accent-soft: rgba(31, 79, 214, 0.1);
  --green: #12a37a; --pink: #d6336c;
}
:root[data-theme="porcelain"] .site-header.is-scrolled { background: rgba(246, 244, 239, 0.8); }
:root[data-theme="porcelain"] .site-nav { background: rgba(255, 255, 255, 0.96); }
:root[data-theme="porcelain"] .hero::after { background: linear-gradient(90deg, rgba(246, 244, 239, 0.96) 0%, rgba(246, 244, 239, 0.8) 42%, rgba(246, 244, 239, 0.2) 75%), linear-gradient(to top, rgba(246, 244, 239, 0.98) 0%, rgba(246, 244, 239, 0) 40%); }
:root[data-theme="porcelain"] .ticker { background: rgba(246, 244, 239, 0.7); }
:root[data-theme="porcelain"] .figure figcaption { background: rgba(255, 255, 255, 0.8); }
:root[data-theme="porcelain"] .loupe__stage { background: #0b0d14; }
:root[data-theme="porcelain"] .fiction-mark, :root[data-theme="porcelain"] .timeline__where { color: #1f4fd6; }
:root[data-theme="porcelain"] .loader { background: #f6f4ef; }
@media (max-width: 54rem) { :root[data-theme="porcelain"] .hero::after { background: linear-gradient(to top, rgba(246, 244, 239, 0.98) 0%, rgba(246, 244, 239, 0.85) 45%, rgba(246, 244, 239, 0.5) 75%, rgba(246, 244, 239, 0.7) 100%); } }


/* ---------- Hidden palette panel ---------------------------------------- */
.palette-panel { position: fixed; right: 1rem; bottom: 1rem; z-index: 95; width: min(22rem, calc(100vw - 2rem)); padding: 1rem; border-radius: 18px; background: rgba(11, 12, 16, 0.92); border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); color: #eef1f7; font-family: "Inter", system-ui, sans-serif; }
.palette-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.palette-panel__title { margin: 0; font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; font-size: 1rem; }
.palette-panel__close { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #eef1f7; font-size: 1.25rem; line-height: 1; }
.palette-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.palette-panel__grid button { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem; font-weight: 600; color: #eef1f7; }
.palette-panel__grid button i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--sw), var(--sw2)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
.palette-panel__grid button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
.palette-panel__note { margin: 0.9rem 0 0.5rem; font-size: 0.75rem; color: #8e93a3; }
.palette-panel__link { display: flex; gap: 0.4rem; }
.palette-panel__link input { flex: 1; min-width: 0; padding: 0.55rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: #b9bfcc; font-size: 0.75rem; }
.palette-panel .btn--sm { background: #5b8cff; color: #0b0c10; }
@media (prefers-reduced-motion: no-preference) { .palette-panel { animation: rise 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } }