/* SIGEPAT — design tokens (Seção 11.1 do prompt). Nenhum valor mágico nos componentes.
   Temas: claro (padrão), escuro e alto contraste — alternáveis sem recarregar. */
:root {
    /* Cor primária institucional (substituível por unidade gestora via /tema.css) */
    --cor-primaria-50:  #EBF1F8;
    --cor-primaria-100: #D2E0EF;
    --cor-primaria-200: #A5C1DF;
    --cor-primaria-300: #78A2CF;
    --cor-primaria-400: #4B83BF;
    --cor-primaria-500: #2A62A2;
    --cor-primaria-600: #1B4E88;
    --cor-primaria-700: #0B3B6F;
    --cor-primaria-800: #082C54;
    --cor-primaria-900: #051D38;

    /* Secundária: teal para ações positivas e acentos */
    --cor-secundaria-500: #0E7C6B;
    --cor-secundaria-600: #0A6154;
    --cor-secundaria-700: #07493F;

    /* Neutros */
    --neutro-0:   #FFFFFF;
    --neutro-50:  #F7F8FA;
    --neutro-100: #EFF1F5;
    --neutro-200: #E2E5EB;
    --neutro-300: #CBD0DA;
    --neutro-400: #9AA1AF;
    --neutro-500: #6E7583;
    --neutro-600: #525863;
    --neutro-700: #3C414A;
    --neutro-800: #272B33;
    --neutro-900: #171A20;

    /* Semânticos (contraste >= 4.5:1 sobre os fundos correspondentes) */
    --cor-sucesso: #1B6E3C;
    --cor-sucesso-fundo: #E7F4EC;
    --cor-atencao: #8A5A00;
    --cor-atencao-fundo: #FCF3E0;
    --cor-erro: #A32222;
    --cor-erro-fundo: #FBEAEA;
    --cor-info: #155E9C;
    --cor-info-fundo: #E8F1FA;

    /* Chips de ícone dos KPIs (estilo do modelo) */
    --chip-azul: #2563EB;    --chip-azul-fundo: #DBEAFE;
    --chip-roxo: #7C3AED;    --chip-roxo-fundo: #EDE9FE;
    --chip-teal: #0D9488;    --chip-teal-fundo: #CCFBF1;
    --chip-rosa: #DB2777;    --chip-rosa-fundo: #FCE7F3;
    --chip-ambar: #B45309;   --chip-ambar-fundo: #FEF3C7;

    /* Tipografia */
    --fonte-base: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --fonte-tamanho-base: 1rem;
    --fonte-tamanho-pequena: 0.833rem;
    --fonte-tamanho-grande: 1.2rem;
    --fonte-tamanho-titulo: 1.44rem;
    --fonte-tamanho-titulo-grande: 1.728rem;

    /* Espaçamento (escala de 4px) */
    --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
    --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;

    /* Raio e sombra */
    --raio-1: 4px; --raio-2: 8px; --raio-3: 12px; --raio-4: 16px; --raio-full: 999px;
    --sombra-1: 0 1px 2px rgba(23, 26, 32, 0.05);
    --sombra-2: 0 2px 10px rgba(23, 26, 32, 0.07);
    --sombra-3: 0 10px 30px rgba(23, 26, 32, 0.12);

    /* Motion */
    --duracao-rapida: 120ms;
    --duracao-media: 200ms;
    --curva-padrao: cubic-bezier(.2, .8, .2, 1);

    /* Superfícies — TEMA CLARO (padrão, sidebar clara como no modelo) */
    --fundo-pagina: var(--neutro-50);
    --fundo-superficie: var(--neutro-0);
    --fundo-sidebar: var(--neutro-0);
    --texto-principal: var(--neutro-900);
    --texto-suave: var(--neutro-500);
    --texto-sidebar: var(--neutro-600);
    --texto-sidebar-ativo: #FFFFFF;
    --fundo-sidebar-ativo: var(--cor-primaria-700);
    --fundo-sidebar-hover: var(--neutro-100);
    --borda-padrao: var(--neutro-200);
    --foco-anel: 0 0 0 3px var(--cor-primaria-300);
}

/* ---------------- TEMA ESCURO ---------------- */
:root[data-tema="escuro"] {
    --fundo-pagina: #12151C;
    --fundo-superficie: #1A1E27;
    --fundo-sidebar: #171B23;
    --texto-principal: #E8EAEF;
    --texto-suave: #9AA1AF;
    --texto-sidebar: #B7BdC9;
    --texto-sidebar-ativo: #FFFFFF;
    --fundo-sidebar-ativo: var(--cor-primaria-500);
    --fundo-sidebar-hover: #232834;
    --borda-padrao: #2C313C;

    --neutro-100: #232834;
    --neutro-200: #2C313C;
    --neutro-300: #3C414A;

    --cor-primaria-50: #1D2836;

    --cor-sucesso: #5FD08B;  --cor-sucesso-fundo: #14301F;
    --cor-atencao: #F0B75A;  --cor-atencao-fundo: #33270E;
    --cor-erro: #F08A8A;     --cor-erro-fundo: #391414;
    --cor-info: #7FB8E8;     --cor-info-fundo: #12283B;

    --chip-azul: #93B8F8;    --chip-azul-fundo: #1B2A47;
    --chip-roxo: #C4B5FD;    --chip-roxo-fundo: #2A2246;
    --chip-teal: #5EEAD4;    --chip-teal-fundo: #0F2E2A;
    --chip-rosa: #F9A8D4;    --chip-rosa-fundo: #3D1A2C;
    --chip-ambar: #FCD34D;   --chip-ambar-fundo: #362A10;

    --sombra-1: none; --sombra-2: 0 2px 10px rgba(0,0,0,0.35); --sombra-3: 0 10px 30px rgba(0,0,0,0.5);
}

/* ---------------- ALTO CONTRASTE (barra de acessibilidade) ---------------- */
:root[data-tema="alto-contraste"] {
    --fundo-pagina: #000000;
    --fundo-superficie: #000000;
    --fundo-sidebar: #000000;
    --texto-principal: #FFFFFF;
    --texto-suave: #FFFF00;
    --texto-sidebar: #FFFFFF;
    --texto-sidebar-ativo: #000000;
    --fundo-sidebar-ativo: #FFFF00;
    --fundo-sidebar-hover: #1A1A1A;
    --borda-padrao: #FFFFFF;
    --cor-primaria-700: #FFFF00;
    --neutro-100: #1A1A1A;
    --cor-sucesso-fundo: #003300; --cor-sucesso: #66FF99;
    --cor-erro-fundo: #330000;    --cor-erro: #FF8080;
    --cor-atencao-fundo: #332800; --cor-atencao: #FFD966;
    --cor-info-fundo: #001A33;    --cor-info: #80BFFF;
    --chip-azul: #80BFFF; --chip-azul-fundo: #001A33;
    --chip-roxo: #D9B3FF; --chip-roxo-fundo: #21003B;
    --chip-teal: #66FFE0; --chip-teal-fundo: #00332B;
    --chip-rosa: #FFB3D9; --chip-rosa-fundo: #33001A;
    --chip-ambar: #FFD966; --chip-ambar-fundo: #332800;
    --foco-anel: 0 0 0 3px #FFFF00;
    --sombra-1: none; --sombra-2: none; --sombra-3: none;
}