/* ==========================================================================
   TOKENS.CSS
   Sistema de design — Mapa Eleitoral Inteligente do Maranhão
   Define variáveis de cor, tipografia, espaçamento, sombras e transições.
   Suporta dark mode (default) e light mode.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESET MÍNIMO
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    line-height: 1.5;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   TOKENS — TEMA ESCURO (DEFAULT)
   -------------------------------------------------------------------------- */
:root {
    /* ============================================
       CORES — SUPERFÍCIES
       ============================================ */
    --color-bg-canvas: #010409;
    --color-bg-primary: #0d1117;
    --color-bg-secondary: #161b22;
    --color-bg-tertiary: #21262d;
    --color-bg-elevated: #1c2128;
    --color-bg-overlay: rgba(1, 4, 9, 0.85);
    --color-bg-hover: rgba(177, 186, 196, 0.12);
    --color-bg-active: rgba(177, 186, 196, 0.2);

    /* ============================================
       CORES — BORDAS
       ============================================ */
    --color-border-default: #30363d;
    --color-border-muted: #21262d;
    --color-border-strong: #444c56;
    --color-border-accent: #1f6feb;

    /* ============================================
       CORES — TEXTO
       ============================================ */
    --color-text-primary: #f0f6fc;
    --color-text-secondary: #8b949e;
    --color-text-tertiary: #858d97;   /* Bloco 13: AA (≥ 4,5:1) */
    --color-text-muted: #484f58;
    --color-text-inverse: #0d1117;
    --color-text-link: #58a6ff;
    --color-text-link-hover: #79c0ff;

    /* ============================================
       CORES — ACENTO
       ============================================ */
    --color-accent-primary: #1f6feb;
    --color-accent-hover: #388bfd;
    --color-accent-active: #1158c7;
    --color-accent-subtle: rgba(31, 111, 235, 0.15);
    --color-accent-border: rgba(31, 111, 235, 0.4);

    /* ============================================
       CORES — SEMÂNTICAS
       ============================================ */
    --color-success: #3fb950;
    --color-success-subtle: rgba(63, 185, 80, 0.15);
    --color-success-border: rgba(63, 185, 80, 0.4);

    --color-warning: #d29922;
    --color-warning-subtle: rgba(210, 153, 34, 0.15);
    --color-warning-border: rgba(210, 153, 34, 0.4);

    --color-danger: #f85149;
    --color-danger-subtle: rgba(248, 81, 73, 0.15);
    --color-danger-border: rgba(248, 81, 73, 0.4);

    --color-info: #58a6ff;
    --color-info-subtle: rgba(88, 166, 255, 0.15);
    --color-info-border: rgba(88, 166, 255, 0.4);

    /* papel: a presença do deputado (marcação exclusiva nas ações). SYSTEM GAP — o sistema não tem uma cor própria
       para ela; usa a de atenção até o sistema definir (docs/ui-conventions.md, seção 7). Segue o tema claro/escuro. */
    --color-deputado: var(--color-warning);
    --color-deputado-subtle: var(--color-warning-subtle);
    --color-deputado-border: var(--color-warning);

    /* papel: os pontos do mapa do plano de ação. Seguem as cores que os mapas já usam (liderança azul, local de
       votação roxo = escolas no Mapa); apoiadores e atividades emprestam a paleta categórica. Lidas também pelo JS
       (Leaflet) com getComputedStyle, para a legenda e o marcador nunca divergirem. */
    --map-lideranca: #3987e5;
    --map-local: var(--partner-2);
    --map-apoiador: #ff6d00;   /* laranja (pedido do usuário, 28/10/2026); forma de casa no mapa */
    --map-atividade: var(--partner-1);
    --map-bairro: var(--partner-6);   /* bairros e povoados do OpenStreetMap no cadastro de lideranças */

    /* papel: escala de FORÇA do candidato (5 classes + "sem voto") — a mesma no mini mapa "Onde está a força" do
       Dashboard e na paleta Sequencial da aba Mapa (pedido de 2026-10-27). Escuro → claro = mais força no tema escuro. */
    --forca-0: var(--color-bg-tertiary);
    --forca-1: #1d3150;
    --forca-2: #1f4f8f;
    --forca-3: #2f74cf;
    --forca-4: #5c9ff0;
    --forca-5: #a8d1ff;

    /* papel: paleta SEQUENCIAL da aba Mapa (escala contínua, 8 tons) — a família de azuis da força, mas no sentido
       de antes: CLARO = pouco, ESCURO = muito. Todos os tons ficam ≥ 28 de L* do fundo escuro do mapa (os poucos
       votos não somem); passo ≥ 5 L* entre vizinhos. Análise de 27/10/2026 (RELATORIO_ENTREGA.md, 9.4.6). */
    --seq-1: #d4e8ff; --seq-2: #bbdbff; --seq-3: #9ecafd; --seq-4: #75adf4;
    --seq-5: #5092e7; --seq-6: #377ad4; --seq-7: #2864b3; --seq-8: #1f4f8f;

    /* ============================================
       CORES — MAPA / PALETA SEQUENCIAL (default)
       8 tons de azul saturado — do #9ecae1 ao #08519c (o mesmo de paletas.js)
       ============================================ */
    --map-seq-0: #9ecae1;
    --map-seq-1: #84b8db;
    --map-seq-2: #6baed6;
    --map-seq-3: #529dcc;
    --map-seq-4: #4292c6;
    --map-seq-5: #2f7fbc;
    --map-seq-6: #2171b5;
    --map-seq-7: #08519c;

    /* Paleta sequencial alternativa (roxo) */
    --map-seq-purple-0: #fcfbfd;
    --map-seq-purple-1: #efedf5;
    --map-seq-purple-2: #dadaeb;
    --map-seq-purple-3: #bcbddc;
    --map-seq-purple-4: #9e9ac8;
    --map-seq-purple-5: #807dba;
    --map-seq-purple-6: #6a51a3;
    --map-seq-purple-7: #4a1486;

    /* Paleta sequencial alternativa (laranja) */
    --map-seq-orange-0: #fff5eb;
    --map-seq-orange-1: #fee6ce;
    --map-seq-orange-2: #fdd0a2;
    --map-seq-orange-3: #fdae6b;
    --map-seq-orange-4: #fd8d3c;
    --map-seq-orange-5: #f16913;
    --map-seq-orange-6: #d94801;
    --map-seq-orange-7: #8c2d04;

    /* ============================================
       CORES — MAPA / PALETA DIVERGENTE
       Azul (A) → Neutro → Laranja (B)
       Acessível para daltônicos
       ============================================ */
    --map-div-a-strong: #1b62a5;
    --map-div-a-medium: #4292c6;
    --map-div-a-soft: #9ecae1;
    --map-div-a-light: #deebf7;
    --map-div-neutral: #f7f7f7;
    --map-div-neutral-alt: #e0e0e0;
    --map-div-b-light: #fee6ce;
    --map-div-b-soft: #fcae91;
    --map-div-b-medium: #e6550d;
    --map-div-b-strong: #a63603;

    /* Paleta divergente alternativa (azul vs vermelho) */
    --map-div-red-a-strong: #08519c;
    --map-div-red-a-soft: #a6bddb;
    --map-div-red-neutral: #f0f0f0;
    --map-div-red-b-soft: #fc9272;
    --map-div-red-b-strong: #cb181d;

    /* ============================================
       CORES — MAPA / PALETA CATEGÓRICA (partidos)
       Cores oficiais aproximadas
       ============================================ */
    --party-pt: #cc0000;
    --party-pl: #0033a0;
    --party-psol: #f5c500;
    --party-pdt: #1f6feb;
    --party-psdb: #0055a5;
    --party-mdb: #008f4c;
    --party-pp: #0d47a1;
    --party-republicanos: #00923f;
    --party-pode: #8a5a2b;
    --party-psb: #f5a623;
    --party-pcdob: #b71c1c;
    --party-novo: #ff6f00;
    --party-solidariedade: #ff9800;
    --party-avante: #004d40;
    --party-patriota: #1b5e20;
    --party-outros: #8b949e;
    --party-sem-dados: #484f58;

    /* ============================================
       CORES — MAPA / ESTADOS ESPECIAIS
       ============================================ */
    --map-empty: #21262d;
    --map-no-data: #30363d;
    --map-pending: #484f58;
    --map-highlight: #f0f6fc;
    --map-hover-border: #79c0ff;

    /* ============================================
       CORES — PARCEIROS (anel ao redor de polígonos)
       ============================================ */
    --partner-1: #f0883e;
    --partner-2: #a371f7;
    --partner-3: #3fb950;
    --partner-4: #db61a2;
    --partner-5: #58a6ff;
    --partner-6: #d29922;
    --partner-7: #f85149;
    --partner-8: #79c0ff;

    /* ============================================
       CORES — MAPA DE CALOR DE ATINGIMENTO
       ============================================ */
    --goal-achieved: #3fb950;    /* meta atingida */
    --goal-near: #d29922;         /* 70–99% */
    --goal-far: #f85149;          /* < 70% */
    --goal-none: #484f58;         /* sem meta */

    /* ============================================
       TIPOGRAFIA
       ============================================ */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo,
        Consolas, monospace;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-2xs: 10px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;
    --font-size-5xl: 44px;

    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* ============================================
       ESPAÇAMENTO
       ============================================ */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;

    /* ============================================
       BORDAS / RAIOS
       ============================================ */
    --radius-none: 0;
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    --border-width-thin: 1px;
    --border-width-medium: 1.5px;
    --border-width-thick: 2px;

    /* ============================================
       SOMBRAS
       ============================================ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.6);
    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-glow-accent: 0 0 0 3px rgba(31, 111, 235, 0.35);
    --shadow-glow-danger: 0 0 0 3px rgba(248, 81, 73, 0.35);
    --shadow-glow-success: 0 0 0 3px rgba(63, 185, 80, 0.35);

    /* ============================================
       TRANSIÇÕES
       ============================================ */
    --transition-instant: 0ms;
    --transition-fast: 120ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ============================================
       Z-INDEX
       ============================================ */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-drawer: 400;
    --z-modal-backdrop: 500;
    --z-modal: 600;
    --z-popover: 700;
    --z-tooltip: 800;
    --z-toast: 900;
    --z-top: 1000;

    /* ============================================
       LAYOUT
       ============================================ */
    --header-height: 64px;
    --sidebar-width: 280px;
    --panel-width: 360px;

    /* ============================================
       VISUAL "PREMIUM" DO MAPA (2026-10-23)
       sidebar mais escura que o mapa (profundidade), cartões translúcidos, balão do mapa como cartão flutuante
       ============================================ */
    --sidebar-bg: #07090d;
    --sidebar-card-bg: rgba(22, 27, 34, 0.62);
    --sidebar-card-border: rgba(240, 246, 252, 0.07);
    --sidebar-card-radius: 12px;
    --map-tooltip-bg: #161b22;
    --map-tooltip-border: #30363d;
    --map-tooltip-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.75), 0 4px 12px -4px rgba(0, 0, 0, 0.45);
    --footer-height: 40px;
    --container-max: 1920px;

    /* ============================================
       FOCO / ACESSIBILIDADE
       ============================================ */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-accent-hover);
    --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

    /* ============================================
       OPACIDADES
       ============================================ */
    --opacity-disabled: 0.5;
    --opacity-muted: 0.7;
    --opacity-hover: 0.85;

    /* ============================================
       BLUR
       ============================================ */
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;
    --blur-xl: 24px;
}

/* --------------------------------------------------------------------------
   TOKENS — TEMA CLARO
   Ativado com <html data-theme="light"> ou body[data-theme="light"]
   -------------------------------------------------------------------------- */
[data-theme="light"] {
    /* visual do mapa no tema claro (os equivalentes claros dos tokens "premium") */
    --sidebar-bg: #eef1f5;
    --sidebar-card-bg: rgba(255, 255, 255, 0.86);
    --sidebar-card-border: #d8dee4;
    --map-tooltip-bg: #ffffff;
    --map-tooltip-border: #d0d7de;
    --map-tooltip-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.28), 0 4px 12px -4px rgba(15, 23, 42, 0.12);

    /* Superfícies */
    --color-bg-canvas: #f6f8fa;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f6f8fa;
    --color-bg-tertiary: #eaeef2;
    --color-bg-elevated: #ffffff;
    --color-bg-overlay: rgba(255, 255, 255, 0.9);
    /* escala de força no tema claro: claro → escuro = mais força */
    --forca-1: #dceaf9; --forca-2: #a9caef; --forca-3: #5e9be0; --forca-4: #2a6fc9; --forca-5: #11427f;
    --seq-1: #a9caef; --seq-2: #81afe7; --seq-3: #5895dd; --seq-4: #3c7bd0; --seq-5: #2362b3; --seq-6: #154889; --seq-7: #0e386e; --seq-8: #0b2c57;
    --color-bg-hover: rgba(31, 35, 40, 0.06);
    --color-bg-active: rgba(31, 35, 40, 0.12);

    /* Bordas */
    --color-border-default: #d0d7de;
    --color-border-muted: #eaeef2;
    --color-border-strong: #afb8c1;

    /* Texto */
    --color-text-primary: #1f2328;
    --color-text-secondary: #57606a;   /* Bloco 13: AA (≥ 4,5:1) */
    --color-text-tertiary: #656c74;   /* Bloco 13: AA (≥ 4,5:1) */
    --color-text-muted: #afb8c1;
    --color-text-inverse: #ffffff;
    --color-text-link: #0969da;
    --color-text-link-hover: #0550ae;

    /* Acento */
    --color-accent-primary: #0969da;
    --color-accent-hover: #0550ae;
    --color-accent-active: #033d8b;
    --color-accent-subtle: rgba(9, 105, 218, 0.1);

    /* Semânticas */
    --color-success: #1a7f37;
    --color-success-subtle: rgba(26, 127, 55, 0.1);
    --color-warning: #9a6700;
    --color-warning-subtle: rgba(154, 103, 0, 0.1);
    --color-danger: #cf222e;
    --color-danger-subtle: rgba(207, 34, 46, 0.1);
    --color-info: #0969da;
    --color-info-subtle: rgba(9, 105, 218, 0.1);

    /* Estados do mapa */
    --map-empty: #eaeef2;
    --map-no-data: #d0d7de;
    --map-pending: #afb8c1;
    --map-highlight: #1f2328;
    --map-hover-border: #0969da;

    /* Sombras mais suaves no claro */
    --shadow-xs: 0 1px 2px rgba(31, 35, 40, 0.08);
    --shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.1);
    --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.12);
    --shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.15);
    --shadow-xl: 0 16px 48px rgba(31, 35, 40, 0.2);
}

/* --------------------------------------------------------------------------
   TOKENS — MODO ALTO CONTRASTE
   Ativado com <html data-contrast="high">
   -------------------------------------------------------------------------- */
[data-contrast="high"] {
    --color-text-primary: #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-text-tertiary: #c0c0c0;
    --color-border-default: #6e7681;
    --color-border-strong: #8b949e;
    --focus-ring-width: 3px;
    --focus-ring-color: #ffd700;
}
/* alto contraste no tema claro: texto quase preto, bordas fortes, foco azul escuro (o amarelo some no branco) */
[data-theme="light"][data-contrast="high"] {
    --color-text-primary: #000000;
    --color-text-secondary: #24292f;
    --color-text-tertiary: #32383f;
    --color-border-default: #57606a;
    --color-border-strong: #24292f;
    --focus-ring-color: #0a3069;
}

/* --------------------------------------------------------------------------
   PREFERÊNCIAS DO USUÁRIO
   -------------------------------------------------------------------------- */

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-instant: 0ms;
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-bounce: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Respeita prefers-contrast: more */
@media (prefers-contrast: more) {
    :root {
        --color-border-default: #6e7681;
        --color-text-secondary: #c0c0c0;
    }
}

/* Respeita prefers-color-scheme (se não houver data-theme explícito) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        /* Aplica os tokens do tema claro automaticamente */
        --color-bg-canvas: #f6f8fa;
        --color-bg-primary: #ffffff;
        --color-bg-secondary: #f6f8fa;
        --color-bg-tertiary: #eaeef2;
        --color-bg-elevated: #ffffff;
        --forca-1: #dceaf9; --forca-2: #a9caef; --forca-3: #5e9be0; --forca-4: #2a6fc9; --forca-5: #11427f;
        --seq-1: #a9caef; --seq-2: #81afe7; --seq-3: #5895dd; --seq-4: #3c7bd0; --seq-5: #2362b3; --seq-6: #154889; --seq-7: #0e386e; --seq-8: #0b2c57;
        --color-text-primary: #1f2328;
        --color-text-secondary: #57606a;   /* Bloco 13: AA (≥ 4,5:1) */
        --color-text-tertiary: #656c74;   /* Bloco 13: AA (≥ 4,5:1) */
        --color-text-muted: #afb8c1;
        --color-border-default: #d0d7de;
        --color-border-muted: #eaeef2;
        --color-border-strong: #afb8c1;
        --sidebar-bg: #eef1f5;
        --sidebar-card-bg: rgba(255, 255, 255, 0.86);
        --sidebar-card-border: #d8dee4;
        --map-tooltip-bg: #ffffff;
        --map-tooltip-border: #d0d7de;
        --map-tooltip-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.28), 0 4px 12px -4px rgba(15, 23, 42, 0.12);
    }
}

/* --------------------------------------------------------------------------
   FONTES — fallback se Inter não estiver disponível
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: local('Inter'), local('Inter-Regular');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: local('JetBrains Mono'), local('JetBrainsMono-Regular');
}