/* ============================================================
   THEME.CSS — Variáveis e utilitários do tema NTI-SC
   ============================================================ */

/* =====================  VARIÁVEIS DO TEMA  ===================== */

:root {
    /* Paleta principal */
    --cor-primaria: #F36F21;
    --cor-primaria-escura: #D85A1A;
    --cor-secundaria: #1B6D69;

    /* Cores básicas */
    --cor-branco: #ffffff;
    --cor-preto: #000000;

    /* Tons neutros */
    --cinza-100: #f8f8f8;
    --cinza-200: #f0f0f0;
    --cinza-300: #e5e5e5;
    --cinza-400: #d0d0d0;
    --cinza-500: #999999;

    /* Cards */
    --card-radius: 12px;
    --card-shadow: 0 4px 10px rgba(0,0,0,0.08);

    /* Menu lateral */
    --menu-bg: var(--cor-branco);
    --menu-bg-hover: #f5f5f5;
    --menu-border: var(--cor-primaria);
    --menu-shadow: -4px 0 12px rgba(0,0,0,0.12);

    /* Submenu */
    --submenu-bg: var(--cinza-100);
    --submenu-border: var(--cinza-300);

    /* Modal */
    --modal-bg: var(--cor-branco);
    --modal-header-bg: var(--cor-primaria);
    --modal-header-border: var(--cor-primaria-escura);

    /* Tipografia */
    --font-base: 62.5%;
    --font-card: 1.35em;
    --font-modal: 1.25em;

    /* Espaçamentos */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 20px;

    /* Dark mode */
    --dark-bg: #121212;
    --dark-card-bg: #1e1e1e;
    --dark-menu-bg: #1e1e1e;
    --dark-menu-hover: #2b2b2b;
    --dark-submenu-bg: #2a2a2a;
    --dark-border: #444;
    --dark-shadow: -4px 0 12px rgba(0,0,0,0.4);
}


/* =====================  CORES UTILITÁRIAS  ===================== */

.bg-primaria { background-color: var(--cor-primaria) !important; }
.bg-primaria-escura { background-color: var(--cor-primaria-escura) !important; }
.bg-secundaria { background-color: var(--cor-secundaria) !important; }

.text-primaria { color: var(--cor-primaria) !important; }
.text-secundaria { color: var(--cor-secundaria) !important; }
.text-branco { color: var(--cor-branco) !important; }
.text-preto { color: var(--cor-preto) !important; }

.border-primaria { border-color: var(--cor-primaria) !important; }
.border-primaria-escura { border-color: var(--cor-primaria-escura) !important; }


/* =====================  BOTÕES  ===================== */

.btn-primaria {
    background-color: var(--cor-primaria) !important;
    color: var(--cor-branco) !important;
    border-color: var(--cor-primaria) !important;
}

.btn-primaria:hover {
    background-color: var(--cor-primaria-escura) !important;
    border-color: var(--cor-primaria-escura) !important;
}

.btn-laranja {
    background: var(--cor-primaria);
    border: none;
    color: var(--cor-branco);
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: bold;
}