/* ============================================================
   Temas do Clube do Livro — portados do app "leitura" (Tsundoku),
   mapeados pro sistema de tokens daqui (--paper/--ink/--wine/--gold...).
   "Clássico" é o padrão (fica no :root de cada página).
   Trocado por  document.documentElement[data-tema="..."]  (ver temas.js).
   Seletor :root[data-tema] tem especificidade > :root, então vence sempre.
   ============================================================ */

/* CAFÉ — the club's default since 23/10/2026 (picked by Gabie): latte, espresso and caramel */
:root[data-tema="cafe"] {
  --paper:#efe4d6; --paper-2:#f8f1e7; --card:#fffaf4;
  --ink:#2a1c13; --ink-soft:#6e5545; --ink-faint:#a38c7b;
  --wine:#8a4b2a; --wine-deep:#6b3820; --gold:#c69457;
  --line:rgba(42,28,19,.14); --line-soft:rgba(42,28,19,.08);
  --shadow-card:0 1px 0 rgba(255,255,255,.65) inset, 0 12px 30px -16px rgba(74,46,31,.38);
}
:root[data-tema="cafe"] body {
  background-image:
    radial-gradient(1100px 560px at 85% -10%, rgba(198,148,87,.16), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(107,56,32,.10), transparent 55%);
}
:root[data-tema="cafe"] body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='none' stroke='%237a4a2c'%3E%3Ccircle cx='150' cy='150' r='112' stroke-width='10' stroke-opacity='.075'/%3E%3Ccircle cx='150' cy='150' r='103' stroke-width='2' stroke-opacity='.06'/%3E%3Cpath d='M48 196a114 114 0 0 1 4-112' stroke-width='18' stroke-opacity='.045' stroke-linecap='round'/%3E%3Cpath d='M214 58a116 116 0 0 1 44 52' stroke-width='5' stroke-opacity='.06' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%237a4a2c'%3E%3Ccircle cx='110' cy='110' r='80' stroke-width='7' stroke-opacity='.06'/%3E%3Cpath d='M44 150a80 80 0 0 1 10-96' stroke-width='12' stroke-opacity='.04' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-position: right -110px top 40px, left -80px bottom 60px;
}
:root[data-tema="cafe"] .clube-nav a.on { background:var(--wine); }
@media (max-width:760px) {
  :root[data-tema="cafe"] .clube-nav a.on { color:var(--wine); background:rgba(138,75,42,.10); }
}

/* SUMÎ — branco quente minimalista, tinta quase preta, vermelho seco */
:root[data-tema="sumi"] {
  --paper:#fdfbf5; --paper-2:#ffffff; --card:#ffffff;
  --ink:#15110b; --ink-soft:#6f655a; --ink-faint:#a59c8f;
  --wine:#c8332e; --wine-deep:#8f231e; --gold:#b0894a;
  --line:rgba(21,17,11,.12); --line-soft:rgba(21,17,11,.07);
}

/* COTTAGE — biblioteca antiga: creme/marrom com azul desbotado de destaque */
:root[data-tema="cottage"] {
  --paper:#f4ead4; --paper-2:#faf2e1; --card:#fdf6e6;
  --ink:#3d2818; --ink-soft:#6e5a40; --ink-faint:#a08a66;
  --wine:#2a4a6b; --wine-deep:#1a3552; --gold:#b08a4a;
  --line:rgba(61,40,24,.14); --line-soft:rgba(61,40,24,.08);
}

/* PASTEL — vaporwave fofo: rosa/lavanda, tinta roxa, teal de destaque */
:root[data-tema="pastel"] {
  --paper:#fdf2f8; --paper-2:#fef7ff; --card:#ffffff;
  --ink:#4c1d95; --ink-soft:#7c5bb0; --ink-faint:#a78bfa;
  --wine:#0e7490; --wine-deep:#0b5a6e; --gold:#c026d3;
  --line:rgba(76,29,149,.13); --line-soft:rgba(76,29,149,.07);
}

/* ZINE — concreto + tinta preta + azul cobalto (brutalist) */
:root[data-tema="zine"] {
  --paper:#e7e5e0; --paper-2:#f0eeea; --card:#ffffff;
  --ink:#0a0a0a; --ink-soft:#5a5a5a; --ink-faint:#8a8884;
  --wine:#1d4ed8; --wine-deep:#1e40af; --gold:#f5b700;
  --line:rgba(10,10,10,.16); --line-soft:rgba(10,10,10,.09);
}

/* SYNTHWAVE — retrofuturista escuro: roxo profundo, rosa neon, ciano */
:root[data-tema="synth"] {
  --paper:#0d0a1f; --paper-2:#1a0f2e; --card:#1f1240;
  --ink:#f0e8ff; --ink-soft:#c2b3e0; --ink-faint:#8b7fae;
  --wine:#ff2dd1; --wine-deep:#c01ea1; --gold:#2ee6ff;
  --line:rgba(240,232,255,.16); --line-soft:rgba(240,232,255,.09);
}

/* ============== Seletor de temas (bolinhas) ============== */
.tema-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tema-label { font-size:13px; }
.tema-sw {
  width:24px; height:24px; border-radius:50%; padding:0; cursor:pointer; position:relative;
  background:var(--sw-bg); border:2px solid rgba(0,0,0,.14); transition:transform .14s;
}
.tema-sw::after {
  content:''; position:absolute; right:-2px; bottom:-2px; width:11px; height:11px;
  border-radius:50%; background:var(--sw-cor); border:2px solid var(--sw-bg);
}
.tema-sw:hover { transform:scale(1.18); }
.tema-sw.on { box-shadow:0 0 0 2px var(--ink); border-color:var(--sw-bg); }
.tema-sw:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ink); }