/* ============================================================================
   TEMAS DO RELÓGIO — camada OPCIONAL

   O relogio.css sozinho já funciona: ele traz o tema Noite embutido. Este arquivo
   só acrescenta alternativas, e é por isso que é um segundo arquivo — quem levar o
   módulo embora e quiser uma paleta só não carrega o peso das outras cinco.

   Aplicar:  <div id="onde" data-tema="papel">   ou   rl.el.dataset.tema = 'papel'
   A especificidade de `.rl[data-tema=x]` (0,2,0) vence a de `.rl` (0,1,0), então a
   troca é só o atributo — nenhuma regra precisa de !important.

   ============================ COMO ESTAS CORES FORAM ESCOLHIDAS ==============
   Não por gosto. Cada tema passou por um validador antes de entrar (PROVA-TEMAS.md
   traz os números), com dois pisos:

     1. contraste WCAG do texto sobre o painel: mínimo 4.5:1 (o pior aqui é 14:1);
     2. separação entre as três cores de meta — no alvo, entrando, passou — medida
        em ΔE OKLab, mínimo 8, INCLUSIVE com protanopia e deuteranopia simuladas
        (matrizes de Viénot 1999).

   O piso 2 reprovou três paletas na primeira rodada, e sempre no mesmo par: VERDE
   e ÂMBAR desaparecem um no outro em protanopia. A saída não foi escurecer — foi
   puxar o verde para o TEAL e o vermelho para o CARMIM, porque o canal azul é o
   que o daltonismo preserva. É por isso que nenhum verde aqui é verde puro.

   E vale dizer o que isto NÃO resolve: cor nunca é o único portador nesta interface.
   Todo estado vem com palavra ao lado — "no alvo", "passou", "GRAVANDO". A medida
   acima é para que a cor AJUDE quem a enxerga diferente, não para que ela baste.
   ========================================================================== */


/* --- Noite — o padrão — fundo quase preto, verde de sistema */
.rl[data-tema="noite"] {
    --rl-fundo: #0b0b0d;
    --rl-painel: #17181a;
    --rl-borda: #2a2b2e;
    --rl-texto: #ffffff;
    --rl-fraco: #9a9aa2;
    --rl-boa: #30d158;
    --rl-entrando: #ff9f0a;
    --rl-longa: #ff453a;
    --rl-rec: #ff453a;
    --rl-clap: #ff9f0a;
}
/* A página acompanha o módulo. Sem isto, escolher um tema claro daria um relógio
   de papel dentro de uma página preta — o tema pareceria quebrado, e não é ele. */
body[data-tema="noite"] {
    --bg: #0b0b0d;
    --painel: #17181a;
    --borda: #2a2b2e;
    --texto: #ffffff;
    --fraco: #9a9aa2;
    --verde: #30d158;
    --roxo: #ff9f0a;
    --arte-cor: #2a6e42;
    --arte-rec: #8e2f2a;
}

/* --- Papel — claro, tinta sobre papel quente; o único de dia */
.rl[data-tema="papel"] {
    --rl-fundo: #f4f1ea;
    --rl-painel: #ffffff;
    --rl-borda: #d8d2c6;
    --rl-texto: #1a1a18;
    --rl-fraco: #5f5b52;
    --rl-boa: #065f46;
    --rl-entrando: #d97706;
    --rl-longa: #a4133c;
    --rl-rec: #a4133c;
    --rl-clap: #d97706;
}
/* A página acompanha o módulo. Sem isto, escolher um tema claro daria um relógio
   de papel dentro de uma página preta — o tema pareceria quebrado, e não é ele. */
body[data-tema="papel"] {
    --bg: #f4f1ea;
    --painel: #ffffff;
    --borda: #d8d2c6;
    --texto: #1a1a18;
    --fraco: #5f5b52;
    --verde: #065f46;
    --roxo: #d97706;
    --arte-cor: #8a9d90;
    --arte-rec: #c08b86;
}

/* --- Fósforo — terminal de fósforo verde, o mais escuro de todos */
.rl[data-tema="fosforo"] {
    --rl-fundo: #0a0f0a;
    --rl-painel: #0f1610;
    --rl-borda: #1e2f20;
    --rl-texto: #d7f5dd;
    --rl-fraco: #7fa88a;
    --rl-boa: #34d399;
    --rl-entrando: #fbbf24;
    --rl-longa: #f87171;
    --rl-rec: #f87171;
    --rl-clap: #fbbf24;
}
/* A página acompanha o módulo. Sem isto, escolher um tema claro daria um relógio
   de papel dentro de uma página preta — o tema pareceria quebrado, e não é ele. */
body[data-tema="fosforo"] {
    --bg: #0a0f0a;
    --painel: #0f1610;
    --borda: #1e2f20;
    --texto: #d7f5dd;
    --fraco: #7fa88a;
    --verde: #34d399;
    --roxo: #fbbf24;
    --arte-cor: #2f6b46;
    --arte-rec: #8a3f3f;
}

/* --- Ilha — azul profundo de mar fundo, com areia no alerta */
.rl[data-tema="ilha"] {
    --rl-fundo: #071a1f;
    --rl-painel: #0d262c;
    --rl-borda: #1b3a42;
    --rl-texto: #e6f4f1;
    --rl-fraco: #93b4b0;
    --rl-boa: #2dd4a7;
    --rl-entrando: #f0b429;
    --rl-longa: #ef5f5f;
    --rl-rec: #ef5f5f;
    --rl-clap: #f0b429;
}
/* A página acompanha o módulo. Sem isto, escolher um tema claro daria um relógio
   de papel dentro de uma página preta — o tema pareceria quebrado, e não é ele. */
body[data-tema="ilha"] {
    --bg: #071a1f;
    --painel: #0d262c;
    --borda: #1b3a42;
    --texto: #e6f4f1;
    --fraco: #93b4b0;
    --verde: #2dd4a7;
    --roxo: #f0b429;
    --arte-cor: #1d6b66;
    --arte-rec: #9a4a52;
}

/* --- Grafite — cinza neutro, sem temperatura — não puxa pra lado nenhum */
.rl[data-tema="grafite"] {
    --rl-fundo: #121212;
    --rl-painel: #1e1e1e;
    --rl-borda: #383838;
    --rl-texto: #f5f5f5;
    --rl-fraco: #a8a8a8;
    --rl-boa: #34d399;
    --rl-entrando: #facc15;
    --rl-longa: #fb7185;
    --rl-rec: #fb7185;
    --rl-clap: #facc15;
}
/* A página acompanha o módulo. Sem isto, escolher um tema claro daria um relógio
   de papel dentro de uma página preta — o tema pareceria quebrado, e não é ele. */
body[data-tema="grafite"] {
    --bg: #121212;
    --painel: #1e1e1e;
    --borda: #383838;
    --texto: #f5f5f5;
    --fraco: #a8a8a8;
    --verde: #34d399;
    --roxo: #facc15;
    --arte-cor: #4a4a4a;
    --arte-rec: #7d4448;
}

/* --- Alto contraste — preto e branco puros, o máximo que a tela dá */
.rl[data-tema="contraste"] {
    --rl-fundo: #000000;
    --rl-painel: #000000;
    --rl-borda: #ffffff;
    --rl-texto: #ffffff;
    --rl-fraco: #e0e0e0;
    --rl-boa: #00ff87;
    --rl-entrando: #ffd400;
    --rl-longa: #ff5f5f;
    --rl-rec: #ff5f5f;
    --rl-clap: #ffd400;
}
/* A página acompanha o módulo. Sem isto, escolher um tema claro daria um relógio
   de papel dentro de uma página preta — o tema pareceria quebrado, e não é ele. */
body[data-tema="contraste"] {
    --bg: #000000;
    --painel: #000000;
    --borda: #ffffff;
    --texto: #ffffff;
    --fraco: #e0e0e0;
    --verde: #00ff87;
    --roxo: #ffd400;
    --arte-cor: #00ff87;
    --arte-rec: #ff5f5f;
}


/* A arte de fundo lê as duas variáveis acima. Fora de um tema, cai no verde do
   Noite — o mesmo valor que estava cravado antes de existirem temas. */
.arte-tela { color: var(--arte-cor, #2a6e42); }
body.rec-vivo .arte-tela { color: var(--arte-rec, #8e2f2a); }

/* No tema claro o texto preto sobre painel branco não precisa de sombra, e a sombra
   escura que ajuda no escuro aqui vira borrão cinza em volta de cada letra. */
body[data-tema="papel"] h1, body[data-tema="papel"] h2, body[data-tema="papel"] p,
body[data-tema="papel"] ul, body[data-tema="papel"] .topo,
body[data-tema="papel"] .dica, body[data-tema="papel"] .rodape { text-shadow: none; }
body[data-tema="papel"] pre { color: #1a1a18; }