/* ==========================================================================
   Tema Claro — sobrescreve as variáveis do tema escuro (padrão)
   Seletor html[data-tema="claro"] tem especificidade maior que :root,
   garantindo override mesmo com CSS de ferramentas redeclarando :root.
   ========================================================================== */
html[data-tema="claro"] {
    --bg-body: #f8fafc;
    --bg-nav: rgba(255, 255, 255, 0.85);
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;

    --text-main: #0f172a;
    --text-muted: #475569;

    --accent-color: #0284c7;
    --accent-color-hover: #0369a1;
    --accent-bg-transparent: rgba(2, 132, 199, 0.12);

    --border-color: #e2e8f0;
    --border-highlight: #0d9488;
}

html[data-tema="claro"] body {
    background-image: radial-gradient(circle at 50% 0%, rgba(2, 132, 199, 0.08) 0%, transparent 50%);
}

/* Ícone do botão de tema — mostra sol no tema escuro, lua no tema claro */
.btn-theme .icone-tema-claro { display: none; }
.btn-theme .icone-tema-escuro { display: inline-flex; }

html[data-tema="claro"] .btn-theme .icone-tema-claro { display: inline-flex; }
html[data-tema="claro"] .btn-theme .icone-tema-escuro { display: none; }