/* tema.css — Consulta Fácil · variáveis de cor e tema (redesign coral/creme) */
:root {
    /* ── Tokens de marca ─────────────────────────────────────── */
    --cf-primary:          #E8725E;
    --cf-primary-strong:   #D15A45;
    --cf-primary-light:    rgba(232,114,94,.12);
    --cf-gradient-primary: linear-gradient(135deg, #E8725E 0%, #D15A45 100%);

    /* ── Compatibilidade: acento usa o coral ─────────────────── */
    --cor-ifractal:        var(--cf-primary);
    --cor-ifractal-inativo: rgba(232,114,94,.5);

    /* ── Tokens de espaçamento / raio / sombra ───────────────── */
    --radius-card:  16px;
    --radius-input: 12px;
    --radius-pill:  999px;
    --shadow-sm:    0 2px 8px  rgba(44,31,26,.08);
    --shadow-md:    0 4px 20px rgba(44,31,26,.10);
    --shadow-lg:    0 8px 32px rgba(44,31,26,.14);

    /* ── Rampa de cor quente (100 = mais escuro → 0 = branco) ── */
    --cor-100: #2C1F1A;   /* texto principal — marrom muito escuro */
    --cor-95:  #3E2C26;
    --cor-90:  #503730;
    --cor-85:  #5E4239;
    --cor-80:  #6E4E43;
    --cor-75:  #7D5A4F;
    --cor-70:  #8C6860;
    --cor-60:  #97776E;
    --cor-50:  #9C8880;   /* texto secundário */
    --cor-40:  #AF9D97;
    --cor-35:  #B9A9A3;   /* (corrige referência em --cor-texto-header-win) */
    --cor-30:  #C3B4AE;
    --cor-25:  #CCB9B4;
    --cor-20:  #D5C8C3;
    --cor-15:  #DDD5D0;
    --cor-10:  #EDE5E0;   /* borda suave */
    --cor-05:  #FAF7F4;   /* fundo geral — creme */
    --cor-0:   #FFFFFF;   /* surface — cards, modais */

    /* ── Status / semântica de cor ───────────────────────────── */
    --cor-pgq:   #EF4444;
    --cor-pgf:   var(--cf-primary);
    --cor-verde: #22C55E;
    --cor-red:   #EF4444;
    --red:       #EF4444;
    --green:     #22C55E;

    /* ── Tokens semânticos (referenciam a rampa) ─────────────── */
    --cor-fundo-geral: var(--cor-05);
    --cor-borda:       var(--cor-10);

    /* Menu lateral / dropdown */
    --cor-menu-fundo:                var(--cor-0);
    --cor-menu-texto:                var(--cor-100);
    --cor-menu-over:                 var(--cf-primary);
    --cor-menu-opcoes:               var(--cor-0);
    --cor-menu-opcoes-over:          var(--cf-primary-light);
    --cor-menu-opcoes-texto:         var(--cor-100);
    --cor-menu-opcoes-texto-inativo: var(--cor-40);
    --cor-menu-opcoes-divisor:       var(--cor-10);
    --cor-menu-opcoes-shadow:        var(--shadow-md);
    --cor-menu-opcoes-icone:         var(--cf-primary);

    /* Botões */
    --cor-fundo-botao-submit: var(--cf-primary);
    --cor-texto-botao:        #FFFFFF;
    --cor-hover-botao:        var(--cf-primary-strong);

    /* Formulário */
    --cor-texto-combo:      var(--cor-100);
    --cor-seta-combo:       var(--cor-50);
    --cor-svg:              var(--cor-100);
    --cor-texto-check:      var(--cor-100);
    --cor-texto-value-form: var(--cor-100);
    --cor-texto-label-form: var(--cor-50);
    --cor-linha-form-input: var(--cor-10);

    /* Abas */
    --cor-aba-ativa:         var(--cor-05);
    --cor-aba-inativa:       var(--cor-10);
    --cor-aba-hover:         var(--cf-primary-light);
    --cor-aba-titulo-ativo:  var(--cor-100);
    --cor-aba-titulo-inativo: var(--cor-50);
    --cor-aba-borda:         var(--cor-10);

    /* Janelas / painéis */
    --cor-fundo-win:        var(--cor-0);
    --cor-header-win:       var(--cor-05);
    --cor-texto-header-win: var(--cor-35);

    /* Topbar — tema light (padrão) */
    --tamanho-top-menu:        52px;
    --cor-topbar-bg:           #FFFFFF;
    --cor-topbar-nav-text:     var(--cor-70);
    --cor-topbar-nav-hover:    var(--cf-primary-light);
    --cor-topbar-brand-text:   var(--cor-100);
    --cor-topbar-avatar-bg:    var(--cf-primary-light);
    --cor-topbar-avatar-text:  var(--cf-primary);
}

/* ── Tema Grey (escuro neutro médio) ─────────────────────────── */
[data-tema="grey"] {
    --cor-fundo-geral:              #2C2D31;
    --cor-menu-fundo:               #363840;
    --cor-borda:                    rgba(255,255,255,.12);
    --cor-100:                      rgba(255,255,255,.92);
    --cor-80:                       rgba(255,255,255,.72);
    --cor-70:                       rgba(255,255,255,.62);
    --cor-60:                       rgba(255,255,255,.52);
    --cor-50:                       rgba(255,255,255,.42);
    --cor-40:                       rgba(255,255,255,.33);
    --cor-35:                       rgba(255,255,255,.30);
    --cor-30:                       rgba(255,255,255,.25);
    --cor-20:                       rgba(255,255,255,.16);
    --cor-10:                       rgba(255,255,255,.08);
    --cor-05:                       rgba(255,255,255,.04);
    --cor-0:                        #383A42;
    --cor-menu-opcoes:              #383A42;
    --cor-menu-opcoes-over:         rgba(232,114,94,.15);
    --cor-menu-opcoes-texto:        rgba(255,255,255,.85);
    --cor-menu-opcoes-divisor:      rgba(255,255,255,.10);
    --cor-menu-opcoes-shadow:       0 8px 32px rgba(0,0,0,.45);
    --cor-topbar-bg:                #25262B;
    --cor-topbar-nav-text:          rgba(255,255,255,.80);
    --cor-topbar-nav-hover:         rgba(232,114,94,.14);
    --cor-topbar-brand-text:        rgba(255,255,255,.95);
    --cor-topbar-avatar-bg:         rgba(232,114,94,.22);
    --cor-topbar-avatar-text:       #E8725E;
    --cor-aba-inativa:              #25262B;
    --cor-aba-hover:                rgba(232,114,94,.10);
    --cor-aba-titulo-ativo:         rgba(255,255,255,.92);
    --cor-aba-titulo-inativo:       rgba(255,255,255,.48);
    --cor-aba-borda:                rgba(255,255,255,.10);
    --cor-fundo-win:                #383A42;
    --cor-header-win:               #383A42;
    --cor-texto-header-win:         rgba(255,255,255,.55);
    --cor-linha-form-input:         rgba(255,255,255,.14);
    --cor-texto-value-form:         rgba(255,255,255,.88);
    --cor-texto-label-form:         rgba(255,255,255,.44);
    --shadow-sm:   0 2px 8px  rgba(0,0,0,.28);
    --shadow-md:   0 4px 20px rgba(0,0,0,.35);
    --shadow-lg:   0 8px 32px rgba(0,0,0,.48);
}

/* ── Tema Dark (escuro profundo neutro) ─────────────────────── */
[data-tema="dark"] {
    --cor-fundo-geral:              #1A1B1E;
    --cor-menu-fundo:               #242729;
    --cor-borda:                    rgba(255,255,255,.10);
    --cor-100:                      rgba(255,255,255,.92);
    --cor-95:                       rgba(255,255,255,.85);
    --cor-90:                       rgba(255,255,255,.78);
    --cor-85:                       rgba(255,255,255,.70);
    --cor-80:                       rgba(255,255,255,.72);
    --cor-75:                       rgba(255,255,255,.65);
    --cor-70:                       rgba(255,255,255,.62);
    --cor-60:                       rgba(255,255,255,.52);
    --cor-50:                       rgba(255,255,255,.42);
    --cor-40:                       rgba(255,255,255,.33);
    --cor-35:                       rgba(255,255,255,.28);
    --cor-30:                       rgba(255,255,255,.25);
    --cor-25:                       rgba(255,255,255,.20);
    --cor-20:                       rgba(255,255,255,.16);
    --cor-15:                       rgba(255,255,255,.12);
    --cor-10:                       rgba(255,255,255,.08);
    --cor-05:                       rgba(255,255,255,.04);
    --cor-0:                        #2D2F35;
    --cor-menu-opcoes:              #2D2F35;
    --cor-menu-opcoes-over:         rgba(232,114,94,.15);
    --cor-menu-opcoes-texto:        rgba(255,255,255,.85);
    --cor-menu-opcoes-divisor:      rgba(255,255,255,.08);
    --cor-menu-opcoes-shadow:       0 8px 32px rgba(0,0,0,.60);
    --cor-topbar-bg:                #141518;
    --cor-topbar-nav-text:          rgba(255,255,255,.78);
    --cor-topbar-nav-hover:         rgba(232,114,94,.14);
    --cor-topbar-brand-text:        rgba(255,255,255,.92);
    --cor-topbar-avatar-bg:         rgba(232,114,94,.22);
    --cor-topbar-avatar-text:       #E8725E;
    --cor-aba-inativa:              #242729;
    --cor-aba-hover:                rgba(232,114,94,.10);
    --cor-aba-titulo-ativo:         rgba(255,255,255,.92);
    --cor-aba-titulo-inativo:       rgba(255,255,255,.48);
    --cor-aba-borda:                rgba(255,255,255,.10);
    --cor-fundo-win:                #242729;
    --cor-header-win:               #2D2F35;
    --cor-texto-header-win:         rgba(255,255,255,.55);
    --cor-linha-form-input:         rgba(255,255,255,.12);
    --cor-texto-value-form:         rgba(255,255,255,.88);
    --cor-texto-label-form:         rgba(255,255,255,.44);
    --shadow-sm:   0 2px 8px  rgba(0,0,0,.32);
    --shadow-md:   0 4px 20px rgba(0,0,0,.42);
    --shadow-lg:   0 8px 32px rgba(0,0,0,.58);
}

html {
    scrollbar-color: var(--cor-20) transparent;
}

/* ── Sidebar e content-header: fundo var(--cor-0) nos temas escuros ── */
[data-tema="dark"] #cf-sidebar,
[data-tema="grey"] #cf-sidebar,
[data-tema="dark"] #cf-content-header,
[data-tema="grey"] #cf-content-header { background: var(--cor-0); }