/*
 * Design tokens — Sistema de Inteligência Eleitoral (Polit-E)
 *
 * Canônico em .claude/DESIGN_SYSTEM.md. Calibrado a partir dos mocks
 * dashboard_executivo_v1.html e inteligencia_geografica_v2.html.
 *
 * Estética: light, editorial, calmo. Stripe + Attio + Linear.
 * NÃO alterar valores sem atualizar o documento canônico antes.
 */

/* ============ FONTES (locais — DS prescreve Inter + Instrument Serif + JetBrains Mono)
 * Hospedadas em /assets/fonts/ para respeitar a CSP do admin (font-src 'self')
 * e não vazar IP de usuários para fonts.gstatic.com (LGPD).
 * Inter e JetBrains Mono são variable fonts (1 arquivo serve todos os pesos).
 * Subset latin (Português + acentuação) — outros subsets não foram baixados.
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/Inter-Variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/InstrumentSerif-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/InstrumentSerif-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2');
}

:root {
    /* ============ TIPOGRAFIA ============
     * As três famílias têm papéis distintos:
     *   sans  — UI, números, labels, parágrafos, botões.
     *   serif — apenas narrativa: H1 de página, citações de IA, logo.
     *   mono  — dado técnico: versões, IDs, scores em listas, datas técnicas.
     * O <link> das Google Fonts vive em layouts/admin.php e layouts/auth.php.
     */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ============ CINZAS (neutros calorosos) ============
     * Tom levemente quente — não são os cinzas frios de Material.
     */
    --gray-50:  #FAFAF9;
    --gray-100: #F4F4F2;
    --gray-200: #E8E8E4;
    --gray-300: #D6D6D0;
    --gray-400: #A8A8A0;
    --gray-500: #74746C;
    --gray-600: #525248;
    --gray-700: #3A3A32;
    --gray-800: #25251F;
    --gray-900: #161612;

    /* ============ BRAND (azul institucional sóbrio) ============
     * Não-partidário. Comunica instituição séria.
     * Nunca é background dominante — sempre acento.
     */
    --brand-50:  #F0F4FA;
    --brand-100: #DEE7F4;
    --brand-200: #B8CDE8;
    --brand-300: #89A8D3;
    --brand-400: #5A82BE;
    --brand-500: #2E5C9E;
    --brand-600: #1F4A87;
    --brand-700: #163770;
    --brand-800: #0E2654;
    --brand-900: #08183A;

    /* ============ SEMÂNTICOS (dessaturados, editoriais) ============
     * Texto sobre background da mesma família sempre usa o tom 700.
     */
    --positive-50:  #EDF5EF;
    --positive-500: #5A8B6A;
    --positive-700: #3D6149;

    --negative-50:  #F7EDED;
    --negative-500: #A35D5D;
    --negative-700: #7A4040;

    --neutral-50:  #F5F2EC;
    --neutral-500: #B89968;
    --neutral-700: #856E45;

    /* ============ ESPAÇAMENTO ============
     * Sempre múltiplos de 4px. Use estas variáveis em vez de pixels mágicos.
     */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  48px;

    /* ============ BORDAS / CANTOS ============ */
    --radius-sm: 6px;   /* botões pequenos, pills, items de menu */
    --radius-md: 8px;   /* botões grandes, inputs, badges */
    --radius-lg: 12px;  /* cards, painéis, modals */
    --radius-xl: 16px;  /* containers principais */

    /* ============ SOMBRAS ============
     * Funcionais, não decorativas. Cards estáticos NÃO levam sombra.
     */
    --shadow-overlay:  0 1px 3px rgba(0, 0, 0, 0.04);   /* elemento flutuante sobre mapa */
    --shadow-floating: 0 4px 12px rgba(0, 0, 0, 0.08);  /* dropdowns, modais */
    --shadow-tooltip:  0 4px 12px rgba(0, 0, 0, 0.15);  /* tooltips dark */
    --ring-focus:      0 0 0 3px rgba(46, 92, 158, 0.12);

    /* ============ TRANSIÇÕES ============
     * Curtas, sutis, funcionais. Nada acima de 0.2s para feedback de UI.
     */
    --transition-fast: 0.12s ease;
    --transition-base: 0.15s ease;
    --transition-slow: 0.2s ease;
}