/* ============================================================
   EMPREENDE CONQUISTA — DESIGN TOKENS & VARIÁVEIS GLOBAIS
   Identidade Visual PMVC: Azul Municipal, Rosa Magenta e Amarelo
============================================================ */
:root {
    /* Cores Institucionais Principais */
    --azul-vibrante: #0055A2;        /* Azul oficial da marca */
    --azul-escuro: #003D75;          /* Contraste institucional */
    --azul-suave: #E8F2FA;           /* Fundo sutil azulado */
    --azul-anel: #0055A2;

    /* Superfícies e Tons Neutros */
    --fundo-cinza: #F8FAFC;
    --branco: #FFFFFF;
    --texto-escuro: #0F172A;
    --texto-cinza: #475569;
    --texto-cinza-suave: #64748B;
    --texto-muted: #64748B;
    --borda-cinza: #E2E8F0;
    --slate-100: #F1F5F9;

    /* Destaque Primário: Rosa Magenta PMVC */
    --cor-destaque: #FA0176;
    --cor-destaque-escuro: #C9005E;
    --cor-destaque-suave: #FFF0F6;

    /* Destaque Secundário: Amarelo Canário PMVC */
    --cor-amarelo: #FCDA02;
    --cor-amarelo-escuro: #C5A900;
    --cor-amarelo-suave: #FEFCE8;

    /* Status e Feedback */
    --sucesso: #12B76A;
    --sucesso-texto: #027A48;
    --sucesso-bg: #ECFDF3;
    --aviso: #DC6803;
    --aviso-texto: #B54708;
    --aviso-bg: #FEF6E7;
    --perigo: #D92D20;
    --perigo-texto: #B42318;
    --perigo-bg: #FEF3F2;

    /* Raios de Borda */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Elevações e Sombras */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);

    /* Aliases Semânticos de Marca */
    --brand-blue: var(--azul-vibrante);
    --brand-blue-hover: var(--azul-escuro);
    --brand-pink: var(--cor-destaque);
    --brand-pink-hover: var(--cor-destaque-escuro);
    --brand-pink-soft: var(--cor-destaque-suave);
    --brand-dark: var(--texto-escuro);
    --brand-slate: var(--texto-cinza);
    --border-color: var(--borda-cinza);

    /* Efeitos de Interação */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--azul-vibrante) 20%, transparent);
    --hover-azul: color-mix(in srgb, var(--azul-vibrante) 8%, var(--branco));
    --hover-rosa: color-mix(in srgb, var(--cor-destaque) 8%, var(--branco));
    --selection-bg: color-mix(in srgb, var(--azul-vibrante) 16%, var(--branco));
    --blob-rosa: color-mix(in srgb, var(--cor-destaque) 12%, transparent);
}