/**
 * ========================================
 * HOSPITAL DE OLHOS VILA NOVA
 * Tokens semanticos de tema
 * ========================================
 *
 * A regra deste arquivo: o NOME do token diz o papel, o VALOR muda por tema.
 * Assim `background: var(--superficie-base)` ja funciona no claro e no escuro,
 * sem nenhuma regra `[data-bs-theme="dark"] .classe` extra.
 *
 * Ordem de carga (nao inverter): bundle do Bootstrap -> tema-tokens.css ->
 * hospital-theme.css -> <style> da pagina. Metade dos bugs de tema do projeto
 * nasceu de alguem fugir dessa ordem.
 *
 * Cascata: `:root` e `[data-bs-theme="dark"]` tem especificidade identica
 * (0,1,0) e ambos casam o <html>. Quem vence e a ordem no arquivo, por isso o
 * bloco escuro vem DEPOIS do `:root`, aqui dentro. Nao separar em dois arquivos.
 *
 * Convivencia com os tokens antigos de hospital-theme.css (--hospital-*,
 * --dark-*, --gray-*): um token legado so vira `var(--novo)` quando (a) o valor
 * claro do novo for byte-identico ao atual do legado E (b) todos os consumidores
 * daquele token ja tiverem sido auditados no escuro. Enquanto (b) nao valer, o
 * legado fica com hex literal.
 *
 * Motivo concreto: --gray-100 alimenta tanto texto sobre o gradiente verde da
 * sidebar quanto fundo de pagina. No dia em que ele passar a mudar de valor por
 * tema, o texto da sidebar fica escuro sobre gradiente escuro.
 *
 * COLISAO CONHECIDA: src/modulos/pos-operatorio/views/pos-operatorio/formulario.ejs
 * declara --borda e --raio no :root proprio dela. Hoje nao ha efeito, porque
 * aquela pagina nao carrega este arquivo. No dia em que carregar, o :root da
 * view vem depois e vence dentro dela. Resolver apagando o :root da view, nao
 * renomeando os tokens daqui.
 */

/* ========================================
   TEMA CLARO (padrao)
   ======================================== */
:root {
    /* Superficies */
    --superficie-fundo: #f1f5f3;       /* fundo do body */
    --superficie-base: #ffffff;        /* card, painel */
    --superficie-elevada: #f8faf9;     /* thead, card-header, input-group */
    --superficie-destaque: #f1f5f3;    /* hover de linha/dropdown */
    --superficie-flutuante: #ffffff;   /* modal, dropdown, popover */

    /* Texto */
    --texto-forte: #2a3530;
    --texto-padrao: #3a4840;
    /* Um passo mais escuro que o --gray-500 legado (#6b7f72). Aquele dava
       4.28:1 sobre branco e reprovava AA; este da 5.16 sobre --superficie-base,
       4.92 sobre --superficie-elevada e 4.69 sobre --superficie-fundo. */
    --texto-suave: #5f7263;
    --texto-desabilitado: #94a69c;
    --texto-marca: #0f5132;            /* titulo/icone na cor da marca */
    --texto-sobre-marca: #ffffff;      /* texto EM CIMA de fundo de marca */

    /* Bordas */
    --borda: #e2e8e5;
    --borda-suave: #f1f5f3;
    --borda-forte: #c5d1cb;
    --borda-foco: #1c975d;

    /* Marca - rampa HSL 152 */
    --marca: #0f5132;
    --marca-forte: #093420;            /* hover/pressed */
    --marca-suave: #1c975d;
    --marca-tenue: rgba(15, 81, 50, 0.1);
    --marca-tenue-forte: rgba(28, 151, 93, 0.2);
    /* Canais crus da marca, para veu/sombra/realce em qualquer opacidade:
       rgba(var(--marca-rgb), 0.15). Mesma ideia do --bs-primary-rgb. Evita
       inventar um token por valor de alpha — eram 27 combinacoes diferentes. */
    --marca-rgb: 15, 81, 50;
    --acento-rgb: 42, 203, 28;

    /* Acento - verde vibrante */
    --acento: #2acb1c;
    --acento-forte: #1fa015;
    --acento-tenue: rgba(42, 203, 28, 0.12);
    /* Invariante por tema (nao se repete no bloco escuro): o verde vibrante e
       claro nos dois temas, entao o texto em cima dele e sempre escuro. */
    --texto-sobre-acento: #093420;

    /* Tambem invariante, e pelo motivo oposto: a sidebar usa --gradiente-navegacao,
       que e escuro no claro (verde) E no escuro (slate). O texto em cima dela e
       claro nos dois. Usar --texto-forte aqui faria o texto sumir no tema claro. */
    --texto-sobre-navegacao: #ffffff;
    --texto-sobre-navegacao-suave: rgba(255, 255, 255, 0.85);

    /* Feedback: alias do Bootstrap 5.3, que ja troca de valor sozinho no escuro.
       `var()` resolve no elemento, e o bloco escuro do proprio Bootstrap
       redefine --bs-danger-bg-subtle no mesmo <html>. Zero manutencao nossa. */
    --sucesso: var(--bs-success);
    --sucesso-tenue: var(--bs-success-bg-subtle);
    --sucesso-texto: var(--bs-success-text-emphasis);
    --perigo: var(--bs-danger);
    --perigo-tenue: var(--bs-danger-bg-subtle);
    --perigo-texto: var(--bs-danger-text-emphasis);
    --aviso: var(--bs-warning);
    --aviso-tenue: var(--bs-warning-bg-subtle);
    --aviso-texto: var(--bs-warning-text-emphasis);
    --info: var(--bs-info);
    --info-tenue: var(--bs-info-bg-subtle);
    --info-texto: var(--bs-info-text-emphasis);

    /* Sombras */
    --sombra-sm: 0 1px 3px rgba(15, 81, 50, 0.08);
    --sombra: 0 4px 6px rgba(15, 81, 50, 0.1);
    --sombra-md: 0 6px 16px rgba(15, 81, 50, 0.12);
    --sombra-lg: 0 12px 32px rgba(15, 81, 50, 0.15);

    /* Veus */
    --veu-conteudo: rgba(255, 255, 255, 0.72);   /* overlay sobre tabela/grade */
    --veu-modal: rgba(15, 23, 32, 0.35);

    /* Gradientes */
    --gradiente-marca: linear-gradient(135deg, #0f5132 0%, #1c975d 100%);
    --gradiente-navegacao: linear-gradient(135deg, #0f5132 0%, #093420 100%);

    /* Raios - invariantes por tema, por isso nao se repetem no bloco escuro */
    --raio-sm: 6px;
    --raio: 8px;
    --raio-md: 12px;
    --raio-lg: 16px;
}

/* ========================================
   TEMA ESCURO - so troca VALOR
   ======================================== */
[data-bs-theme="dark"] {
    --superficie-fundo: #0a0e14;
    --superficie-base: #12171f;
    --superficie-elevada: #1a202c;
    --superficie-destaque: #242d3d;
    --superficie-flutuante: #2d3748;

    --texto-forte: #e2e8f0;
    --texto-padrao: #cbd5e1;
    --texto-suave: #94a3b8;
    --texto-desabilitado: #64748b;
    --texto-marca: #3ddb92;

    /* INVERTE de proposito: #fff sobre --marca no escuro da 1.79:1, ilegivel.
       Todo texto que fica EM CIMA de fundo de marca usa este token. */
    --texto-sobre-marca: #0a0e14;

    --borda: #334155;
    --borda-suave: #242d3d;
    --borda-forte: #475569;
    --borda-foco: #3ddb92;

    /* A marca e verde nos dois temas. O verde escuro da 2.07:1 sobre #0a0e14
       (reprova), entao no escuro ela clareia em vez de mudar de matiz:
       #3ddb92 da 10.82:1 (AAA). O azul #3b82f6 sobrevive so como --info. */
    --marca: #3ddb92;
    --marca-forte: #24c278;
    --marca-suave: #3ddb92;
    --marca-tenue: rgba(61, 220, 132, 0.15);
    --marca-tenue-forte: rgba(61, 220, 132, 0.3);
    --marca-rgb: 61, 220, 132;
    --acento-rgb: 77, 217, 59;

    --acento: #4dd93b;
    --acento-forte: #2acb1c;
    --acento-tenue: rgba(77, 217, 59, 0.18);

    --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --sombra: 0 4px 6px rgba(0, 0, 0, 0.3);
    --sombra-md: 0 6px 16px rgba(0, 0, 0, 0.45);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

    --veu-conteudo: rgba(10, 14, 20, 0.72);

    --gradiente-marca: linear-gradient(135deg, #24c278 0%, #3ddb92 100%);
    --gradiente-navegacao: linear-gradient(135deg, #0a0e14 0%, #1a202c 100%);
}