/* ============================================================
   GIROCONTROL - PALETAS DOS TEMAS (claro e escuro)

   Arquivo só com as VARIÁVEIS de cor. É importado pelo style.css
   e usado sozinho pelas páginas que não usam o style.css
   (Termos, Política de Privacidade e impressões).

   O tema é escolhido pelo atributo data-tema no <html>, aplicado
   pelo fragmento fragments/tema.html antes de a página aparecer.
   ============================================================ */

/* ---------- TEMA ESCURO (o visual original) ---------- */
:root,
html[data-tema="escuro"] {
    --bg-main: #050508;
    --bg-sidebar: #0A0A12;
    --bg-card: #11111A;
    --bg-input: #0D0D17;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-sutil: rgba(255, 255, 255, 0.02);

    --accent-green: #00FF88;
    --accent-green-hover: #00CC6E;
    --accent-purple: #9D4EDD;
    --accent-red: #FF2D55;
    --accent-orange: #F97316;
    --accent-amber: #FBBF24;

    --accent-green-text: #00FF88;
    --accent-purple-text: #A78BFA;
    --accent-red-text: #FB7185;
    --accent-amber-text: #FBBF24;
    --accent-orange-text: #FF8A3D;
    --accent-blue-text: #38BDF8;

    --text-primary: #FFFFFF;
    --text-secondary: #B4C0D0;
    --text-muted: #8494AB;
    --text-on-accent: #050508;

    --border: rgba(255, 255, 255, 0.06);
    --border-accent: rgba(0, 255, 136, 0.28);
    --sombra: 0 4px 20px rgba(0, 0, 0, 0.20);

    --th-texto: #CBD5E1;
    --th-fundo: #161622;

    /* Espessura padrão das bordas de cartões, tabelas e campos */
    --borda-destaque: 2px;
    --border-campo: rgba(255, 255, 255, 0.12);
    --brilho-verde: rgba(0, 255, 136, 0.25);

    color-scheme: dark;
}


/* ---------- TEMA CLARO (padrão para a loja) ---------- */
html[data-tema="claro"] {
    --bg-main: #F3F5F8;
    --bg-sidebar: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-hover: rgba(15, 23, 42, 0.05);
    --bg-sutil: rgba(15, 23, 42, 0.02);

    --accent-green: #00D47A;
    --accent-green-hover: #00B868;
    --accent-purple: #7C3AED;
    --accent-red: #E11D48;
    --accent-orange: #EA580C;
    --accent-amber: #D97706;

    --accent-green-text: #047857;
    --accent-purple-text: #6D28D9;
    --accent-red-text: #BE123C;
    --accent-amber-text: #B45309;
    --accent-orange-text: #C2410C;
    --accent-blue-text: #1D4ED8;

    --text-primary: #0F172A;
    --text-secondary: #1E293B;
    --text-muted: #475569;
    --text-on-accent: #04130B;

    --border: #E2E8F0;
    --border-accent: rgba(4, 120, 87, 0.38);
    --sombra: 0 2px 10px rgba(15, 23, 42, 0.06);

    --th-texto: #1E293B;
    --th-fundo: #F1F5F9;

    --borda-destaque: 2px;
    --border-campo: #CBD5E1;
    --brilho-verde: rgba(0, 212, 122, 0.25);

    color-scheme: light;
}


/* ============================================================
   LOGO DO TEMA
   Cada logo aparece duas vezes no HTML: .logo-escuro (texto claro,
   para fundo escuro) e .logo-claro (LogoGiroControlClaro.png, texto
   grafite, para fundo claro). Só a do tema atual fica visível.
   ============================================================ */

html:not([data-tema="claro"]) .logo-claro {
    display: none !important;
}

html[data-tema="claro"] .logo-escuro {
    display: none !important;
}