/* ===========================================================================
   FappGuard — tema claro.

   Sobreposição por escopo: `html[data-tema="claro"]` tem especificidade maior
   que a utilitária do Tailwind, então nada precisa mudar nas sete telas nem no
   JS. Trocar de tema é trocar um atributo.

   Duas regras guiaram o mapeamento:

   1. IDENTIDADE. O teal continua sendo o acento e o verde de "em dia". O que
      muda é o TOM, não a cor: #2dd4bf sobre branco dá 1.8:1 de contraste, o que
      é ilegível. Texto em teal passa a #0f766e (5.3:1). O botão primário segue
      no teal claro, porque ali o contraste vem do texto escuro em cima dele —
      e é o momento de marca da interface.

   2. CONTRASTE INVERTIDO, não espelhado. A rampa slate não é simétrica: no
      escuro o texto secundário é slate-400 sobre slate-900; no claro, o
      equivalente legível é slate-600 sobre branco, não slate-500. Cada nível
      foi escolhido pelo contraste medido, não pela posição na escala.

   As cores de status mantêm a semântica do design system: teal = em dia,
   âmbar = atenção, rosa = falha, roxo = verificação de restauração.
   =========================================================================== */

/* --- superfícies ---------------------------------------------------------- */
/* O fundo da página é levemente acinzentado para os cards brancos destacarem.
   Branco sobre branco apagaria a estrutura de cards que organiza a tela. */
html[data-tema="claro"] body,
html[data-tema="claro"] .bg-slate-950        { background-color: #eef2f7; }
html[data-tema="claro"] .bg-slate-900        { background-color: #ffffff; }
html[data-tema="claro"] .bg-slate-850        { background-color: #f1f5f9; }
html[data-tema="claro"] .bg-slate-800        { background-color: #e2e8f0; }
html[data-tema="claro"] .bg-slate-800\/60    { background-color: rgba(226, 232, 240, .7); }
html[data-tema="claro"] .bg-slate-800\/50    { background-color: rgba(226, 232, 240, .6); }
html[data-tema="claro"] .bg-slate-700\/80    { background-color: #cbd5e1; }
html[data-tema="claro"] .bg-slate-950\/40    { background-color: rgba(241, 245, 249, .7); }
html[data-tema="claro"] .bg-slate-950\/60    { background-color: #f8fafc; }
html[data-tema="claro"] .bg-slate-950\/70    { background-color: #f8fafc; }
html[data-tema="claro"] .bg-slate-950\/80    { background-color: #f8fafc; }
html[data-tema="claro"] .bg-slate-900\/90    { background-color: rgba(255, 255, 255, .92); }
html[data-tema="claro"] .bg-slate-900\/70    { background-color: rgba(255, 255, 255, .8); }

/* O bloco de log imita terminal. No claro vira papel, não terminal invertido:
   texto escuro sobre creme, que é o que se lê num relatório impresso. */
html[data-tema="claro"] .bg-\[\#080D16\]     { background-color: #f8fafc; }

/* --- bordas e divisores --------------------------------------------------- */
html[data-tema="claro"] .border-slate-800     { border-color: #e2e8f0; }
html[data-tema="claro"] .border-slate-800\/80 { border-color: #e2e8f0; }
html[data-tema="claro"] .border-slate-800\/60 { border-color: #eef2f7; }
html[data-tema="claro"] .border-slate-700     { border-color: #cbd5e1; }
html[data-tema="claro"] .divide-slate-800\/70 > * + * { border-color: #eef2f7; }

/* --- texto ---------------------------------------------------------------- */
/* slate-100/200 eram o texto principal no escuro; aqui viram quase-preto. */
html[data-tema="claro"] .text-slate-50,
html[data-tema="claro"] .text-slate-100,
html[data-tema="claro"] .text-slate-200      { color: #0f172a; }
html[data-tema="claro"] .text-slate-300      { color: #334155; }
/* O mais usado da interface (230 ocorrências): rótulos e texto secundário. */
html[data-tema="claro"] .text-slate-400      { color: #475569; }
html[data-tema="claro"] .text-slate-500      { color: #64748b; }
html[data-tema="claro"] .text-slate-600      { color: #94a3b8; }
/* Usado como separador "|" no topo — decorativo, fica bem claro. */
html[data-tema="claro"] .text-slate-700      { color: #cbd5e1; }
html[data-tema="claro"] .placeholder-slate-600::placeholder { color: #94a3b8; }

/* --- acentos: mesma cor, tom legível -------------------------------------- */
html[data-tema="claro"] .text-teal-400,
html[data-tema="claro"] .text-teal-400\/90,
html[data-tema="claro"] .text-teal-300       { color: #0f766e; }
html[data-tema="claro"] .text-rose-400,
html[data-tema="claro"] .text-rose-300,
html[data-tema="claro"] .text-rose-200       { color: #be123c; }
html[data-tema="claro"] .text-amber-400,
html[data-tema="claro"] .text-amber-300,
html[data-tema="claro"] .text-amber-200      { color: #b45309; }
html[data-tema="claro"] .text-purple-400,
html[data-tema="claro"] .text-purple-300     { color: #7e22ce; }
html[data-tema="claro"] .text-indigo-300     { color: #4338ca; }

/* Pontos de status e barras continuam saturados: são forma, não texto, e é a
   cor que carrega o significado à distância. */
html[data-tema="claro"] .bg-teal-400         { background-color: #14b8a6; }
html[data-tema="claro"] .bg-rose-500         { background-color: #e11d48; }
html[data-tema="claro"] .bg-rose-500\/70     { background-color: rgba(225, 29, 72, .65); }
html[data-tema="claro"] .bg-amber-400        { background-color: #f59e0b; }
html[data-tema="claro"] .bg-purple-400       { background-color: #9333ea; }

/* Fundos tingidos: no claro precisam de mais opacidade para não sumirem. */
html[data-tema="claro"] .bg-teal-500\/10     { background-color: rgba(20, 184, 166, .12); }
html[data-tema="claro"] .bg-teal-400\/10     { background-color: rgba(20, 184, 166, .12); }
html[data-tema="claro"] .bg-teal-500\/20     { background-color: rgba(20, 184, 166, .2); }
html[data-tema="claro"] .bg-teal-950\/20     { background-color: rgba(20, 184, 166, .1); }
html[data-tema="claro"] .bg-amber-500\/10    { background-color: rgba(245, 158, 11, .14); }
html[data-tema="claro"] .bg-amber-500\/20    { background-color: rgba(245, 158, 11, .2); }
html[data-tema="claro"] .bg-amber-950\/20    { background-color: rgba(245, 158, 11, .1); }
html[data-tema="claro"] .bg-rose-500\/10     { background-color: rgba(225, 29, 72, .12); }
html[data-tema="claro"] .bg-rose-950\/20     { background-color: rgba(225, 29, 72, .08); }
html[data-tema="claro"] .bg-purple-500\/10   { background-color: rgba(147, 51, 234, .12); }
html[data-tema="claro"] .bg-purple-950\/20   { background-color: rgba(147, 51, 234, .08); }
html[data-tema="claro"] .bg-teal-500\/\[0\.02\],
html[data-tema="claro"] .bg-amber-500\/\[0\.02\] { background-color: rgba(245, 158, 11, .06); }
html[data-tema="claro"] .bg-rose-500\/\[0\.03\]  { background-color: rgba(225, 29, 72, .06); }

/* Bordas coloridas: no escuro eram sutis; no claro precisam de corpo. */
html[data-tema="claro"] .border-teal-400,
html[data-tema="claro"] .border-teal-400\/30,
html[data-tema="claro"] .border-teal-500\/20,
html[data-tema="claro"] .border-teal-500\/30,
html[data-tema="claro"] .border-teal-500\/40,
html[data-tema="claro"] .border-teal-500\/60 { border-color: rgba(13, 148, 136, .45); }
html[data-tema="claro"] .border-amber-500\/20,
html[data-tema="claro"] .border-amber-500\/30,
html[data-tema="claro"] .border-amber-400\/20,
html[data-tema="claro"] .border-amber-500\/40 { border-color: rgba(180, 83, 9, .4); }
html[data-tema="claro"] .border-rose-500\/30 { border-color: rgba(190, 18, 60, .4); }
html[data-tema="claro"] .border-purple-400,
html[data-tema="claro"] .border-purple-500\/20,
html[data-tema="claro"] .border-purple-500\/30 { border-color: rgba(126, 34, 206, .4); }

/* --- detalhes ------------------------------------------------------------- */
/* Sombra do botão primário: no escuro era um brilho; no claro, uma sombra real. */
html[data-tema="claro"] .shadow-teal-950     { --tw-shadow-color: rgba(15, 118, 110, .25); --tw-shadow: var(--tw-shadow-colored); }
html[data-tema="claro"] .selection\:bg-teal-500\/20 ::selection { background-color: rgba(20, 184, 166, .25); }

/* O gradiente do bloco hero, que no escuro dá profundidade. */
html[data-tema="claro"] .from-slate-900\/90  { --tw-gradient-from: rgba(255,255,255,.95) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255,255,255,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-tema="claro"] .via-slate-900\/70   { --tw-gradient-to: rgba(255,255,255,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(248,250,252,.9) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-tema="claro"] .to-slate-900\/90    { --tw-gradient-to: rgba(255,255,255,.95) var(--tw-gradient-to-position); }

/* Barra de rolagem clara. */
html[data-tema="claro"] ::-webkit-scrollbar-track { background: #eef2f7; }
html[data-tema="claro"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html[data-tema="claro"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Evita o "flash" escuro antes do CSS aplicar quando o tema salvo é claro. */
html[data-tema="claro"] { color-scheme: light; }
html:not([data-tema="claro"]) { color-scheme: dark; }