/* public/assets/css/base.css */
/* Diretrizes visuais institucionais uniSão Lourenço e variáveis semânticas */
/* José (Frontend) · 03-FRONTEND_GUIDE.md §2 */

:root {
    /* Identidade institucional uniSão Lourenço */
    --cor-primaria: #0E336E;
    --cor-primaria-hover: #09234D;
    --cor-link: #146A9C;
    --cor-link-hover: #0E4E73;
    --cor-marca-azul: #177FB9;
    --cor-marca-vermelho: #EE313A; /* D18: exclusivamente decorativo */
    
    /* Superfícies e tipografia */
    --cor-texto: #1E293B;
    --cor-texto-suave: #64748B;
    --cor-fundo: #F8FAFC;
    --cor-superficie: #FFFFFF;
    --cor-borda: #E2E8F0;
    --cor-borda-hover: #CBD5E1;
    --cor-foco: #146A9C;

    /* Semântica e status (contraste WCAG 2.2 AA >= 4.5:1) */
    --cor-erro: #B3202A;
    --cor-erro-fundo: #FEE2E2;
    --cor-erro-borda: #FCA5A5;

    --cor-sucesso: #15803D;
    --cor-sucesso-fundo: #DCFCE7;
    --cor-sucesso-borda: #86EFAC;

    --cor-alerta: #C2410C;
    --cor-alerta-fundo: #FFEDD5;
    --cor-alerta-borda: #FDBA74;

    --cor-pendente: #B45309;
    --cor-pendente-fundo: #FEF3C7;
    --cor-pendente-borda: #FDE68A;

    /* Tipografia e espaçamento */
    --fonte-padrao: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --espaco-xs: 0.25rem;
    --espaco-sm: 0.5rem;
    --espaco-md: 1rem;
    --espaco-lg: 1.5rem;
    --espaco-xl: 2rem;
    --espaco-2xl: 3rem;

    --raio-borda: 6px;
    --sombra-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --sombra-card-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fonte-padrao);
    font-size: 1rem; /* 16px piso */
    line-height: 1.6;
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* WCAG 2.2 AA: Gestão de foco visível */
*:focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 2px;
}

a {
    color: var(--cor-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease-in-out;
}

a:hover, a:focus {
    color: var(--cor-link-hover);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--cor-primaria);
    font-weight: 700;
    line-height: 1.25;
}

h1 {
    font-size: 1.875rem;
    margin-bottom: var(--espaco-md);
}

h2 {
    font-size: 1.5rem;
    margin-bottom: var(--espaco-sm);
}

h3 {
    font-size: 1.25rem;
    margin-bottom: var(--espaco-xs);
}

p {
    margin-bottom: var(--espaco-md);
    max-width: 75ch; /* Limite de leitura confortável */
}

ul, ol {
    margin-bottom: var(--espaco-md);
    padding-left: var(--espaco-xl);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Botões acessíveis */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--raio-borda);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    min-height: 44px; /* WCAG touch target */
}

.botao-primario {
    background-color: var(--cor-primaria);
    color: #FFFFFF;
}

.botao-primario:hover, .botao-primario:focus {
    background-color: var(--cor-primaria-hover);
    color: #FFFFFF;
}

.botao-secundario {
    background-color: #FFFFFF;
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.botao-secundario:hover, .botao-secundario:focus {
    background-color: #EFF6FF;
    color: var(--cor-primaria-hover);
}