/* =====================================================================
   CertSafe - Tokens de design (paleta, espacamento, raios, sombras)
   Arquivo: assets/css/tokens.css

   Fonte unica de verdade para variaveis visuais. Importado por todas
   as folhas de estilo da aplicacao (login.css, app.css, components.css,
   dashboard.css) para evitar duplicacao e garantir consistencia.
   ===================================================================== */

:root {
    /* Tons institucionais (navy) */
    --cs-navy-900: #071427;
    --cs-navy-800: #0B1F3D;
    --cs-navy-700: #16315A;
    --cs-navy-600: #2A4566;
    --cs-navy-500: #3C5E89;

    /* Neutros */
    --cs-slate-500: #5B6B82;
    --cs-slate-400: #8593A8;
    --cs-slate-300: #A6B1C2;
    --cs-slate-200: #D7DEE8;
    --cs-slate-100: #EEF2F8;
    --cs-bg-light: #F4F7FB;
    --cs-white: #FFFFFF;

    /* Acento (teal) */
    --cs-teal-600: #00897E;
    --cs-teal-500: #00B8A9;
    --cs-teal-300: #4FE3D1;
    --cs-teal-100: #E3FBF7;

    /* Estados semanticos */
    --cs-success-600: #15803D;
    --cs-success-500: #16A34A;
    --cs-success-bg: #E9F8EF;

    --cs-warning-600: #B45309;
    --cs-warning-500: #F59E0B;
    --cs-warning-bg: #FEF3E2;

    --cs-danger-600: #B91C1C;
    --cs-danger-500: #DC2626;
    --cs-danger-bg: #FDECEC;

    --cs-info-600: #1D4ED8;
    --cs-info-500: #3B82F6;
    --cs-info-bg: #EAF1FF;

    /* Raios e sombras */
    --cs-raio-sm: 8px;
    --cs-raio-md: 14px;
    --cs-raio-lg: 22px;

    --cs-sombra-cartao: 0 24px 60px -20px rgba(11, 31, 61, 0.25), 0 4px 16px -4px rgba(11, 31, 61, 0.08);
    --cs-sombra-flutuante: 0 12px 28px -8px rgba(11, 31, 61, 0.18);

    /* Transicoes */
    --cs-transicao-rapida: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --cs-transicao-media: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Estrutura do painel autenticado */
    --cs-largura-sidebar: 264px;
    --cs-largura-sidebar-recolhida: 76px;
    --cs-altura-topbar: 68px;
}