/* ══════════════════════════════════════════════════════════════
   LUMÉA · Tema claro / escuro (login, ecrã de ativação e painel)

   O escuro é o padrão. O claro liga-se com <html data-theme="light">,
   definido antes da pintura por um script inline no <head> e alternado
   por assets/theme.js (botões com [data-theme-toggle]).

   As páginas continuam a definir a paleta base no seu :root. Aqui ficam:
   1) tokens extra (superfícies, trilhos, sombras…) com valores do escuro;
   2) a paleta clara, que sobrepõe tudo por ter maior especificidade.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* canais RGB para rgba(var(--x), alfa) */
  --tint:244,232,255;      /* traços/realces claros sobre o fundo */
  --s0:16,10,22;           /* barra de topo, etiquetas sobre imagens */
  --s1:34,24,48;           /* topo dos cartões */
  --s2:24,16,33;           /* base dos cartões */
  --shade:0,0,0;           /* sombras */

  /* cores de preenchimento com texto escuro por cima (iguais nos dois temas) */
  --gold-fill:#EFC27A; --rose-fill:#FF7AA8; --mint-fill:#6EE7C7;

  --bd-hover:#453263; --bd-strong:#3D2E52;
  --track:#241A30; --track2:#3A2C4E;
  --well1:#281C36; --well2:#160E1F;
  --skel1:#1F162B; --skel2:#271B37;
  --fp:#574A6C; --ph:#4E4360; --scroll:#2C2038;
  --side-bg:linear-gradient(180deg,#171021,#100A17);
  --scrim:rgba(6,3,10,.6); --scrim-strong:rgba(8,4,12,.72);
  --takeover:radial-gradient(ellipse at 50% 28%,#2A1836,#0E0914 72%);
}

:root[data-theme="light"]{
  --bg:#FBF7F3; --panel:#FFFFFF; --panel2:#FFFFFF; --panel3:#F6EEE8;
  --line:rgba(42,22,48,.11); --line2:rgba(42,22,48,.065);
  --ink:#22152A; --mut:#5A4C64; --dim:#74667F;
  /* acentos mais escuros para texto legível sobre fundo claro (≥ 4,5:1) */
  --rose:#C93A6C; --gold:#9A6516; --lilac:#6A52C2; --mint:#16805F; --red:#C93434;

  --tint:42,22,48; --s0:251,247,243; --s1:255,255,255; --s2:255,251,248; --shade:90,45,75;

  --bd-hover:rgba(42,22,48,.28); --bd-strong:rgba(42,22,48,.22);
  --track:#EDE3DC; --track2:#D8CBC2;
  --well1:#FFFFFF; --well2:#F3EAE4;
  --skel1:#F1E8E2; --skel2:#FBF6F2;
  --fp:#B3A6BC; --ph:#A396AC; --scroll:#DCCBC2;
  --side-bg:linear-gradient(180deg,#FFFFFF,#FCF8F5);
  --scrim:rgba(34,21,42,.32); --scrim-strong:rgba(34,21,42,.42);
  --takeover:radial-gradient(ellipse at 50% 28%,#FFFFFF,#F3EAE3 72%);
  color-scheme:light;
}

/* luzes do fundo: tons pastel no claro (no escuro são manchas escuras) */
:root[data-theme="light"] .amb .g1,
:root[data-theme="light"] .bgfx .g1{background:radial-gradient(circle,#F4B3C8,transparent 60%);opacity:.55}
:root[data-theme="light"] .amb .g2,
:root[data-theme="light"] .bgfx .g2{background:radial-gradient(circle,#F2D7A6,transparent 60%);opacity:.55}
:root[data-theme="light"] ::selection{background:rgba(217,72,122,.18)}

/* transição suave só durante a troca de tema */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,fill .35s ease,stroke .35s ease,box-shadow .35s ease!important}

/* ── botão de tema ── */
.theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:block}
:root[data-theme="light"] .theme-btn .i-moon{display:none}
.theme-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-btn:hover svg{transform:rotate(-18deg)}
.theme-btn svg{transition:transform .35s cubic-bezier(.3,1.3,.4,1)}

/* versão flutuante (login, ecrã de ativação) */
.theme-fab{position:fixed;top:16px;right:16px;z-index:150;display:flex;align-items:center;gap:8px;height:38px;padding:0 13px;border-radius:99px;
  border:1px solid var(--line);background:rgba(var(--s1),.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--mut);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.theme-fab:hover{color:var(--ink);border-color:var(--bd-hover)}
.theme-fab svg{width:16px;height:16px}

@media (prefers-reduced-motion:reduce){
  .theme-anim,.theme-anim *{transition:none!important}
  .theme-btn svg{transition:none}
}