:root {
    /* Marca */
    --brand-navy: #0b3b59;
    --brand-navy-dark: #06263b;
    --brand-blue: #1f5978;
    --brand-blue-light: #5aa9dd;
    --brand-orange: #f4511e;
    --brand-orange-dark: #cf3709;
    --brand-orange-light: #ff8a5c;

    /* Superfícies (dark mode fixo -- decisão do usuário, 15/09/2026: melhor
       pra quem passa várias horas por dia na tela) */
    --bg-page: #0c131e;
    --bg-panel: #151f2e;
    --bg-panel-alt: #1b2739;
    --bg-elevated: #1f2d40;
    --bg-input: #101927;
    --border: #2a3a4f;
    --border-strong: #3c5170;

    /* Texto */
    --text-primary: #e8eef7;
    --text-secondary: #9fb2c8;
    --text-faint: #7688a0;

    /* Semânticas */
    --color-success: #34d399;
    --color-success-bg: rgba(52, 211, 153, .14);
    --color-danger: #f87171;
    --color-danger-bg: rgba(248, 113, 113, .14);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, .14);
    --color-info: var(--brand-blue-light);
    --color-info-bg: rgba(90, 169, 221, .14);

    /* Cor própria por tipo de operação/tela (cards do dashboard). Cada uma
       tem uma versão "soft" (fundo do ícone) pronta em rgba -- evita
       depender de color-mix(), que nem todo navegador mais antigo suporta. */
    --accent-entry: #34d399; --accent-entry-soft: rgba(52, 211, 153, .18);
    --accent-exit: #f87171; --accent-exit-soft: rgba(248, 113, 113, .18);
    --accent-transfer: #5aa9dd; --accent-transfer-soft: rgba(90, 169, 221, .18);
    --accent-products: var(--brand-orange); --accent-products-soft: rgba(244, 81, 30, .18);
    --accent-suppliers: #2dd4bf; --accent-suppliers-soft: rgba(45, 212, 191, .18);
    --accent-tracking: #fbbf24; --accent-tracking-soft: rgba(251, 191, 36, .18);
    --accent-admin: #c084fc; --accent-admin-soft: rgba(192, 132, 252, .18);
    --accent-financial: #34d399; --accent-financial-soft: rgba(52, 211, 153, .18);
    --accent-users: #818cf8; --accent-users-soft: rgba(129, 140, 248, .18);
    --accent-reservations: #22d3ee; --accent-reservations-soft: rgba(34, 211, 238, .18);
    --accent-locations: #a3e635; --accent-locations-soft: rgba(163, 230, 53, .18);
    --accent-clients: #f472b6; --accent-clients-soft: rgba(244, 114, 182, .18);
    --accent-budget: #38bdf8; --accent-budget-soft: rgba(56, 189, 248, .18);
}

html { color-scheme: dark; }

body.login { background: linear-gradient(145deg, var(--brand-navy-dark), var(--brand-blue)); }
/* O logo é escuro (feito pra fundo claro) -- sem um branco atrás dele,
   ele quase some em cima do fundo escuro do login. Mesmo tratamento que
   .brand-header já dá pro logo dentro do sistema. */
.brand-login { margin: 0 auto 1.2rem; text-align: center; }
.brand-login img { display: inline-block; width: min(260px, 100%); height: auto; padding: .9rem 1.3rem; border-radius: .8rem; background: #fff; box-shadow: 0 8px 24px #00000030; }
.brand-header { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .65rem; border-radius: .65rem; background: #fff; color: var(--brand-navy) !important; text-decoration: none; }
.brand-header img { display: block; width: 165px; height: auto; }
.brand-header span { margin: 0; color: var(--brand-orange); font-weight: 800; }
button, .button, .action-button { background-color: var(--brand-orange); border-color: var(--brand-orange); }
button:hover, .button:hover, .action-button:hover { background-color: var(--brand-orange-dark); }
a { color: var(--brand-blue-light); }
.action-card:hover, .action-card:focus-visible { border-color: var(--brand-orange); }
.action-card strong, h1, h2 { color: var(--text-primary); }
.profile { background: var(--brand-orange); color: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-orange); outline-color: rgba(244, 81, 30, .3); }
@media (max-width: 720px) { .brand-header img { width: 125px; } .brand-header span { display: none; } }