/*!
 * theme.css — tema escuro/claro do site (luccagualda.com)
 *
 * O dark é o padrão e continua EXATAMENTE como sempre foi: cada token abaixo
 * reproduz o literal que já estava espalhado pelos CSS das páginas. O modo
 * claro não tem regras por página — ele só redefine os tokens em
 * :root[data-theme="light"] (o atributo é posto pelo assets/js/theme.js).
 *
 * Carregar ANTES do CSS da página: se uma página redefinir um token no dark
 * (ex.: --bg:#0a0a0a no analisador), vale o dela. No light, a especificidade
 * de :root[data-theme] ganha de qualquer :root da página.
 *
 * Nos CSS das páginas, no lugar de literais pensados só para o dark:
 *   texto branco translúcido ...... var(--fg-NN)             NN = alfa × 100
 *   texto branco sólido ........... var(--fg)
 *   borda / overlay / preenchimento rgba(var(--ink),.07)     mesmo alfa nos 2 temas
 *   superfície escura translúcida . rgba(var(--paper),.9)    nav, barras fixas
 *   sombra ou véu preto ........... rgba(0,0,0,calc(.5*var(--sa)))
 *   brilho colorido ............... rgba(7,196,44,calc(.4*var(--ga)))
 *   verde da marca como TEXTO ..... var(--ac-tx)             fundos seguem var(--ac)
 *   cor avulsa sem token .......... color-mix(in srgb,<cor do dark> var(--dk),<cor do light>)
 */

/* Dark: padrão da página — e também de qualquer "ilha" .theme-dark dentro do
   modo claro (mídia com texto branco por cima: vídeo, foto com véu escuro…). */
:root,
.theme-dark{
  /* ── paleta (a mesma que as páginas já declaravam) ── */
  --bg:#0a0a08;--bg2:#111110;--bg3:#161614;--bg4:#1c1c19;
  --tx:#f0ede6;--tx2:#6b6b67;--tx3:#9a9990;
  --bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);--bd3:rgba(255,255,255,.18);
  --ac:#07C42C;--ac2:#09d930;--acd:rgba(7,196,44,.12);
  --ac-tx:#07C42C;

  /* ── primitivos de tema ── */
  --ink:255,255,255;      /* "tinta" que contrasta com o fundo            */
  --paper:10,10,8;        /* o próprio fundo, para superfícies translúcidas */
  --paper-n:10,10,10;     /* idem, na variante neutra (#0a0a0a) de algumas páginas */
  --paper2:17,17,16;      /* superfície elevada translúcida               */
  --ta:1;--tb:0;          /* alfa do texto: a × ta + tb                   */
  --sa:1;                 /* multiplicador de sombras e véus pretos       */
  --ga:1;                 /* multiplicador de brilhos coloridos           */
  --dk:100%;              /* peso da cor do dark em color-mix()           */
}

/* ── texto translúcido, derivado dos primitivos ──
   Declarado em todo elemento (não só no :root) para ser recalculado dentro de
   uma ilha .theme-dark, que só troca os primitivos. */
*{
  --fg:rgb(var(--ink));
  --fg-12:rgba(var(--ink),calc(.12*var(--ta) + var(--tb)));
  --fg-20:rgba(var(--ink),calc(.2*var(--ta) + var(--tb)));
  --fg-22:rgba(var(--ink),calc(.22*var(--ta) + var(--tb)));
  --fg-25:rgba(var(--ink),calc(.25*var(--ta) + var(--tb)));
  --fg-26:rgba(var(--ink),calc(.26*var(--ta) + var(--tb)));
  --fg-30:rgba(var(--ink),calc(.3*var(--ta) + var(--tb)));
  --fg-32:rgba(var(--ink),calc(.32*var(--ta) + var(--tb)));
  --fg-35:rgba(var(--ink),calc(.35*var(--ta) + var(--tb)));
  --fg-38:rgba(var(--ink),calc(.38*var(--ta) + var(--tb)));
  --fg-40:rgba(var(--ink),calc(.4*var(--ta) + var(--tb)));
  --fg-45:rgba(var(--ink),calc(.45*var(--ta) + var(--tb)));
  --fg-50:rgba(var(--ink),calc(.5*var(--ta) + var(--tb)));
  --fg-55:rgba(var(--ink),calc(.55*var(--ta) + var(--tb)));
  --fg-60:rgba(var(--ink),calc(.6*var(--ta) + var(--tb)));
  --fg-64:rgba(var(--ink),calc(.6392156863*var(--ta) + var(--tb)));
  --fg-65:rgba(var(--ink),calc(.65*var(--ta) + var(--tb)));
  --fg-70:rgba(var(--ink),calc(.7*var(--ta) + var(--tb)));
  --fg-75:rgba(var(--ink),calc(.75*var(--ta) + var(--tb)));
  --fg-80:rgba(var(--ink),calc(.8*var(--ta) + var(--tb)));
  --fg-82:rgba(var(--ink),calc(.82*var(--ta) + var(--tb)));
  --fg-85:rgba(var(--ink),calc(.85*var(--ta) + var(--tb)));
  --fg-90:rgba(var(--ink),calc(.9*var(--ta) + var(--tb)));
}
/* numa ilha, o texto que só é herdado (sem cor própria) também volta ao do dark */
.theme-dark{color:var(--tx)}

/* ═══ MODO CLARO ═══════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#EDEAE5;                         /* Snowbound — Sherwin-Williams SW 7004 */
  --bg2:#F5F3EF;--bg3:#FAF9F6;--bg4:#FFFFFF;
  --tx:#161614;--tx2:#66655F;--tx3:#46453F;
  --bd:rgba(22,22,20,.10);--bd2:rgba(22,22,20,.16);--bd3:rgba(22,22,20,.24);
  --ac-tx:#047019;                      /* #07C42C escurecido: ≥4.7:1 até sobre fundo verde-claro */

  --ink:22,22,20;
  --paper:237,234,229;
  --paper-n:237,234,229;
  --paper2:245,243,239;
  --ta:1.1;--tb:.2;                     /* texto translúcido mantém o contraste do dark */
  --sa:.35;
  --ga:.55;
  --dk:0%;

  /* tokens semânticos de texto usados por algumas páginas */
  --ok-tx:var(--ac-tx);--warn-tx:#83571A;--err-tx:#A43E3E;

  scrollbar-color:#C9C5BE var(--bg);
}
/* date pickers, selects etc. que as páginas forçavam para o esquema escuro */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{color-scheme:light}

/* ═══ SWITCH DE TEMA ═══════════════════════════════════════════════════
   Injetado no menu superior por theme.js. Mesma estrutura do switch de
   referência (trilho + botão que vira sol/lua), na linguagem do site:
   trilho em pílula com borda fina como os badges, sol = o ponto verde com
   halo (o mesmo brilho do logo), lua = crescente no branco-quente do texto. */
.theme-li{display:flex;align-items:center}
.theme-switch{
  --tsw-knob:1.4em;--tsw-off:.3em;
  position:relative;display:block;flex-shrink:0;
  width:3.5em;height:2em;font-size:11px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
/* no celular fica na barra, à esquerda do hambúrguer */
.theme-switch.is-bar{margin-left:auto;margin-right:14px}
.theme-switch input{
  position:absolute;inset:-11px -6px;z-index:1;              /* área de toque de 44px */
  width:calc(100% + 12px);height:calc(100% + 22px);
  margin:0;opacity:0;cursor:pointer;
}
.theme-switch .ts-slider{
  position:absolute;inset:0;border-radius:100px;
  background:rgba(var(--ink),.06);border:1px solid rgba(var(--ink),.14);
  transition:border-color .25s,box-shadow .25s,background-color .35s;
}
/* ☀️ claro (desmarcado) */
.theme-switch .ts-slider::before{
  content:"";position:absolute;top:50%;left:var(--tsw-off);
  width:var(--tsw-knob);height:var(--tsw-knob);border-radius:50%;
  transform:translateY(-50%);
  background:linear-gradient(40deg,#07C42C,#9BEA7A 75%);
  box-shadow:0 0 0 1px rgba(4,112,25,.35),0 0 .7em rgba(7,196,44,.5);
  transition:left .4s cubic-bezier(.4,0,.2,1),background .4s,box-shadow .4s;
}
/* 🌙 escuro (marcado) */
.theme-switch input:checked + .ts-slider::before{
  left:calc(100% - var(--tsw-knob) - var(--tsw-off));
  background:transparent;
  box-shadow:inset -.19em -.13em .31em -.13em rgba(7,196,44,.85),inset -.62em -.25em 0 0 #f0ede6;
}
.theme-switch:hover .ts-slider{border-color:rgba(7,196,44,.45)}
.theme-switch input:focus-visible + .ts-slider{border-color:rgba(7,196,44,.6);box-shadow:0 0 0 3px rgba(7,196,44,.3)}
@media (prefers-reduced-motion:reduce){
  .theme-switch .ts-slider,.theme-switch .ts-slider::before{transition:none}
}