/* TagPet · temas de cor
   Cada tema só troca as variáveis de tagpet-beleza.css.
   Ativado por <html data-tema="...">. Sem atributo = Layout 1 (Clássico). */

/* ===== Layout 2 · Oceano ===== */
html[data-tema="oceano"]{
  --tp-primary:#0b3b5c;--tp-primary-2:#11628f;--tp-on-primary:#fff;
  --tp-accent:#18b3c4;--tp-on-accent:#fff;--tp-accent-soft:#d7f3f6;--tp-accent-ink:#0b6f7b;
  --tp-heading:#0b3b5c;--tp-text:#10263a;--tp-body-text:#3f5466;--tp-muted:#5f7486;
  --tp-paper:#f3f8fa;--tp-glow:#c9ecf2;--tp-glow-2:#e3f4f7;--tp-line:#dbe8ee;
  --tp-reward-a:#eefaf8;--tp-reward-b:#cdeee8;--tp-reward-line:#9fdccf;--tp-reward-ink:#126b5e;--tp-reward-amount:#0f8a78;
  --tp-shadow-rgb:11,59,92;--tp-logo:#0b3b5c;--tp-nav-text:#9ff0f8;
}

/* ===== Layout 3 · Floresta ===== */
html[data-tema="floresta"]{
  --tp-primary:#1f4d36;--tp-primary-2:#2f6f4c;--tp-on-primary:#fff;
  --tp-accent:#e0a526;--tp-on-accent:#2a2310;--tp-accent-soft:#f8ecc9;--tp-accent-ink:#83590a;
  --tp-heading:#1f4d36;--tp-text:#1c2b22;--tp-body-text:#44564a;--tp-muted:#66786b;
  --tp-paper:#f5f6f0;--tp-glow:#e0ead0;--tp-glow-2:#edf1e4;--tp-line:#e1e5d8;
  --tp-reward-a:#fff8e3;--tp-reward-b:#f6e3ae;--tp-reward-line:#e9cd7c;--tp-reward-ink:#7f5a0b;--tp-reward-amount:#a8720a;
  --tp-shadow-rgb:31,77,54;--tp-logo:#1f4d36;--tp-nav-text:#f6d27a;
}

/* ===== Layout 4 · Noite (escuro) ===== */
html[data-tema="noite"]{
  color-scheme:dark;
  --tp-primary:#2b3766;--tp-primary-2:#4a5fa8;--tp-on-primary:#fff;
  --tp-accent:#ffb547;--tp-on-accent:#1a1406;--tp-accent-soft:rgba(255,181,71,.15);--tp-accent-ink:#ffc46b;
  --tp-heading:#f3f5fa;--tp-text:#e6e9f0;--tp-body-text:#b9c0cf;--tp-muted:#949cae;
  --tp-paper:#12151c;--tp-glow:#27304a;--tp-glow-2:#181d29;--tp-card:#1c212c;--tp-line:#2e3545;--tp-chip:rgba(255,255,255,.05);
  --tp-reward-a:#2a2418;--tp-reward-b:#3a2d14;--tp-reward-line:#6b5222;--tp-reward-ink:#ffcf80;--tp-reward-amount:#ffb547;
  --tp-shadow-rgb:0,0,0;--tp-logo:#f3f5fa;--tp-nav-text:#ffc46b;
}

/* ===== Layout 5 · Couro ===== */
html[data-tema="couro"]{
  --tp-primary:#4a2c1d;--tp-primary-2:#7a4a2e;--tp-on-primary:#fff;
  --tp-accent:#d08a3c;--tp-on-accent:#fff;--tp-accent-soft:#f6e4cf;--tp-accent-ink:#8a4f17;
  --tp-heading:#4a2c1d;--tp-text:#2b1b12;--tp-body-text:#5a4638;--tp-muted:#7d6a5c;
  --tp-paper:#f8f3ec;--tp-glow:#efdcc4;--tp-glow-2:#f5ebdf;--tp-line:#eadfd1;
  --tp-reward-a:#fff5e6;--tp-reward-b:#f3dcb8;--tp-reward-line:#e3c08a;--tp-reward-ink:#8a4f17;--tp-reward-amount:#b5651d;
  --tp-shadow-rgb:74,44,29;--tp-logo:#4a2c1d;--tp-nav-text:#f4c38b;
}

/* ===== Layout 6 · Algodão-doce ===== */
html[data-tema="algodao"]{
  --tp-primary:#a82a63;--tp-primary-2:#d9558f;--tp-on-primary:#fff;
  --tp-accent:#ffb3cc;--tp-on-accent:#6d1640;--tp-accent-soft:#ffe3ee;--tp-accent-ink:#b0306b;
  --tp-heading:#8f2357;--tp-text:#3a1a2a;--tp-body-text:#6a4b5a;--tp-muted:#8c6f7d;
  --tp-paper:#fff7fa;--tp-glow:#ffd6e6;--tp-glow-2:#ffedf4;--tp-line:#f6dde7;
  --tp-reward-a:#fff5f0;--tp-reward-b:#ffdccf;--tp-reward-line:#ffbfa8;--tp-reward-ink:#a0442a;--tp-reward-amount:#d9562f;
  --tp-shadow-rgb:168,42,99;--tp-logo:#8f2357;--tp-nav-text:#ffd0e1;
}

/* ===== Layout 7 · Lavanda ===== */
html[data-tema="lavanda"]{
  --tp-primary:#4f3590;--tp-primary-2:#7d5fd0;--tp-on-primary:#fff;
  --tp-accent:#c9b6ff;--tp-on-accent:#35206e;--tp-accent-soft:#ece5ff;--tp-accent-ink:#5f40b8;
  --tp-heading:#4a2f8a;--tp-text:#251a3d;--tp-body-text:#5a5070;--tp-muted:#7d7395;
  --tp-paper:#f9f7fd;--tp-glow:#e2d8ff;--tp-glow-2:#f0ebff;--tp-line:#e7e1f3;
  --tp-reward-a:#fff7ec;--tp-reward-b:#ffe6c4;--tp-reward-line:#ffd199;--tp-reward-ink:#9a5714;--tp-reward-amount:#d27419;
  --tp-shadow-rgb:79,53,144;--tp-logo:#4a2f8a;--tp-nav-text:#e1d6ff;
}

/* ===== Layout 8 · Vinho & Pêssego ===== */
html[data-tema="vinho"]{
  --tp-primary:#6e1e3a;--tp-primary-2:#9b2d52;--tp-on-primary:#fff;
  --tp-accent:#ffb38a;--tp-on-accent:#5a1a10;--tp-accent-soft:#ffe6d8;--tp-accent-ink:#a8442a;
  --tp-heading:#6e1e3a;--tp-text:#2e1520;--tp-body-text:#5e4650;--tp-muted:#846b75;
  --tp-paper:#fdf6f3;--tp-glow:#f9d7cc;--tp-glow-2:#fcebe5;--tp-line:#f1dfda;
  --tp-shadow-rgb:110,30,58;--tp-logo:#6e1e3a;--tp-nav-text:#ffc7a8;
}

/* ===== Layout 9 · Menta & Rosé ===== */
html[data-tema="menta"]{
  --tp-primary:#17695b;--tp-primary-2:#2a9c86;--tp-on-primary:#fff;
  --tp-accent:#ff9fb1;--tp-on-accent:#6b1424;--tp-accent-soft:#ffe3e8;--tp-accent-ink:#b8324e;
  --tp-heading:#145e52;--tp-text:#15302b;--tp-body-text:#48615b;--tp-muted:#6b827c;
  --tp-paper:#f4fbf8;--tp-glow:#c9efe2;--tp-glow-2:#e3f7ef;--tp-line:#d9ece5;
  --tp-shadow-rgb:23,105,91;--tp-logo:#145e52;--tp-nav-text:#c9f5e8;
}

/* ===== Layout 10 · Girassol ===== */
html[data-tema="girassol"]{
  --tp-primary:#183f82;--tp-primary-2:#2f6fd6;--tp-on-primary:#fff;
  --tp-accent:#ffc93c;--tp-on-accent:#3a2a00;--tp-accent-soft:#fff1c4;--tp-accent-ink:#8f6200;
  --tp-heading:#183f82;--tp-text:#172338;--tp-body-text:#4b5870;--tp-muted:#6c7890;
  --tp-paper:#fffcf2;--tp-glow:#ffeca6;--tp-glow-2:#fff6d6;--tp-line:#f1e9cf;
  --tp-reward-a:#fff8e0;--tp-reward-b:#ffe9a3;--tp-reward-line:#f7d46a;--tp-reward-ink:#7f5500;--tp-reward-amount:#c27e00;
  --tp-shadow-rgb:24,63,130;--tp-logo:#183f82;--tp-nav-text:#ffe28a;
}

/* =====================================================
   Barrinha de escolha de layout (só para demonstração)
   ===================================================== */
.tp-seletor{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;
  display:flex;align-items:center;gap:6px;
  width:min(420px,calc(100% - 24px));
  padding:6px;border-radius:999px;
  background:rgba(18,20,28,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);
  font-family:"Nunito",system-ui,sans-serif;
}
.tp-seletor button{
  flex:0 0 40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;font-size:18px;font-weight:800;line-height:1;
}
.tp-seletor button:hover{background:rgba(255,255,255,.2)}
.tp-seletor button:focus-visible,.tp-seletor select:focus-visible{outline:2px solid #ffb27d;outline-offset:2px}
.tp-seletor .tp-amostra{flex:0 0 22px;height:22px;border-radius:50%;margin-left:4px;
  background:linear-gradient(135deg,var(--tp-primary-2) 0 50%,var(--tp-accent) 50% 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.tp-seletor select{
  flex:1;min-width:0;height:40px;border:0;border-radius:999px;padding:0 12px;
  background:transparent;color:#fff;font:700 13px/1 "Nunito",system-ui,sans-serif;cursor:pointer;text-overflow:ellipsis;
  color-scheme:dark;
}
.tp-seletor option,.tp-seletor optgroup{background:#1b1e28;color:#fff}
body.visitor-mode{padding-bottom:84px}