/* ============================================================================
   tema.css: os tokens de tema do Liryon, em UM arquivo, para TODOS os módulos.

   De onde veio: do cb_css_base() em cb_ui.php (T54/T79), que já era a fonte
   dos tokens do Comboard. Antes desta data as 8 telas do hub administrativo
   carregavam uma CÓPIA própria dos tokens (com valores diferentes: fundo oliva
   #1C1A11 contra o neutro #1C1C1C do Comboard), o /price tinha preto puro
   #080808, o /create outro vocabulário de nomes, e o regmarca era azul-marinho
   claro. Quatro fundos escuros, três vocabulários. Impossível trocar uma cor em
   um lugar.

   O que este arquivo carrega: reset, os tokens dos dois temas e o "auto" (que
   segue o sistema), a tipografia base e o dimensionamento dos ícones. Os NOMES
   dos tokens são os do hub, já documentados em TICKTICK-ESTILO.md. Os VALORES
   são a paleta "Tema 1A1500", aprovada pelo dono em 13/09/2026: o escuro nasce
   do #1A1500 (preto quente, âmbar) e o claro é o espelho, com o mesmo #1A1500
   como tinta. Referência visual e tabela de valores: design/tema-1a1500.html.

   Regras que continuam valendo (T79): hierarquia por TRANSLUCIDEZ (branco ou
   tinta em camadas), não por cinza nomeado; acento com quatro estados
   (repouso, hover, active, off); fonte de sistema 14px/400/20px; raio 8px.

   27/09/2026 (T91): os valores abaixo passaram a ser o PADRÃO DE FÁBRICA. O
   dono escolhe a aparência da casa e cada pessoa a sua em /aparencia.php; o
   core/aparencia.php emite, logo depois deste arquivo, um <style> com os
   MESMOS seletores e os valores escolhidos (base, acento, intensidade). Sem
   escolha gravada ele não emite nada. Por isso: cor nova em qualquer tela é
   token daqui, nunca hex solto, senão a escolha do dono não a alcança.

   Como usar em um módulo: <link rel="stylesheet" href="/core/tema.css?v=N">
   (liryon_tema_link() em core/tema.php monta a tag com o carimbo do arquivo),
   e a classe do tema no <html> por liryon_tema_class(). Módulos com nomes
   próprios de token fazem a ponte por alias (--fundo:var(--bg)) até migrarem.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---- Escuro (principal) --------------------------------------------------- */
html.theme-dark,
html.theme-auto{
  --bg:#1A1500;
  --surface:#231E0A;            /* branco 4% sobre o fundo */
  --surface2:#2C2814;           /* branco 8% */
  --border:rgba(255,240,200,.09);
  --hover:rgba(255,240,200,.05);
  --sutil:rgba(255,240,200,.03);
  --input:#130F00;
  --text:#F4F0E6;
  --muted:rgba(244,240,230,.45);
  --muted2:rgba(244,240,230,.25);
  --acc:#FFD400;                /* preenchimento: botão primário, aba ativa */
  --acc-h:#FFE24D;              /* hover */
  --acc-a:#D9B400;              /* pressionado */
  --acc-off:#6B5A12;            /* desligado */
  --acc-t:#1A1500;              /* texto sobre o acento */
  --acc-ink:#FFD400;            /* acento como TEXTO: link, ícone ativo */
  --y-soft:#2A2308;             /* fundo da linha selecionada, ícone ativo */
  --ok:#0CCE9C;
  --warn:#FAA80C;
  --err:#E8443A;
  --sombra:0 2px 8px rgba(0,0,0,.35);
  --sombra-g:0 12px 32px rgba(0,0,0,.5);
  /* legado: --y era "o amarelo" e no claro virava um dourado escuro de texto;
     --blue era o acento do claro antes da paleta única. Os dois seguem o
     acento-texto, que é o papel que tinham na prática. Não usar em código novo. */
  --y:var(--acc-ink);
  --blue:var(--acc-ink);
  color-scheme:dark;
}

/* ---- Claro (espelho) ------------------------------------------------------ */
html.theme-light{
  --bg:#FAF7EE;
  --surface:#FFFFFF;
  --surface2:#F2EDDD;
  --border:rgba(26,21,0,.10);
  --hover:rgba(26,21,0,.04);
  --sutil:rgba(26,21,0,.025);
  --input:#FFFFFF;
  --text:#1A1500;
  --muted:rgba(26,21,0,.55);
  --muted2:rgba(26,21,0,.32);
  --acc:#E6B800;
  --acc-h:#F5C800;
  --acc-a:#C9A100;
  --acc-off:#D8CFA8;
  --acc-t:#1A1500;
  --acc-ink:#7A5C00;            /* contraste 5,9:1 sobre --bg */
  --y-soft:#FFF4C2;
  --ok:#0B8F6E;
  --warn:#B86E00;
  --err:#C0392B;
  --sombra:0 2px 8px rgba(26,21,0,.08);
  --sombra-g:0 12px 32px rgba(26,21,0,.12);
  --y:var(--acc-ink);
  --blue:var(--acc-ink);
  color-scheme:light;
}
@media (prefers-color-scheme: light){
  html.theme-auto{
    --bg:#FAF7EE;
    --surface:#FFFFFF;
    --surface2:#F2EDDD;
    --border:rgba(26,21,0,.10);
    --hover:rgba(26,21,0,.04);
    --sutil:rgba(26,21,0,.025);
    --input:#FFFFFF;
    --text:#1A1500;
    --muted:rgba(26,21,0,.55);
    --muted2:rgba(26,21,0,.32);
    --acc:#E6B800;
    --acc-h:#F5C800;
    --acc-a:#C9A100;
    --acc-off:#D8CFA8;
    --acc-t:#1A1500;
    --acc-ink:#7A5C00;
    --y-soft:#FFF4C2;
    --ok:#0B8F6E;
    --warn:#B86E00;
    --err:#C0392B;
    --sombra:0 2px 8px rgba(26,21,0,.08);
    --sombra-g:0 12px 32px rgba(26,21,0,.12);
    color-scheme:light;
  }
}

/* ---- Tipografia base ------------------------------------------------------ */
/* T79: a 'Inter' era pedida e nunca carregada de fato no Comboard; a pilha de
   sistema é o que o TickTick usa, é mais nítida e não custa requisição. Peso
   400 e 14px de base: a hierarquia vem de cor e espaço, não de tamanho. */
body{background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;font-weight:400;line-height:20px;
font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}

/* ---- Ícones (SVG inline, stroke currentColor) ----------------------------- */
svg.ic{width:15px;height:15px;flex-shrink:0;vertical-align:-2px}
svg.ic-g{width:20px;height:20px}
button svg.ic{pointer-events:none}

/* ---- Botão de alternar tema (sol/lua) ------------------------------------- */
.tema-toggle{background:transparent;border:1px solid var(--border);border-radius:8px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.tema-toggle:hover{color:var(--text)}
/* Quais dos dois ícones aparece. Vale para o .tema-toggle do Comboard e para o
   .theme-toggle das telas do hub (mesmas classes de ícone). */
.icon-sun,.icon-moon{display:none}
html.theme-dark .icon-sun{display:block}
html.theme-light .icon-moon{display:block}
html.theme-auto .icon-sun{display:block}
@media (prefers-color-scheme: light){html.theme-auto .icon-sun{display:none}html.theme-auto .icon-moon{display:block}}

/* ---- Toque (27/09/2026) --------------------------------------------------- */
/* No celular o botão de sol e lua tinha 30px; o dedo pede perto de 44. */
@media (pointer: coarse){
  .tema-toggle{width:40px;height:40px}
}