/* =====================================================================
   DESIGN SYSTEM · TOKENS (fonte única)
   Trocar a paleta = editar SÓ este arquivo. Nenhum outro CSS, template ou JS
   pode ter cor, sombra, raio, fonte ou z-index fixo. Espelho em docs/design-system/tokens.json.

   Paleta provisória 13 (perfil político): marinho dominante, esmeralda e verdes de apoio.
   REGRAS PROIBIDAS (contraste insuficiente):
     · marinho sobre esmeralda (e vice-versa)                       2,6:1
     · branco sobre o verde de apoio #4CB87A                          2,4:1
   O verde de apoio só leva texto marinho (6,4:1).
   ===================================================================== */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root, [data-tema="claro"] {
  color-scheme: light;

  /* ---------- 1. Primitivos de marca (não usar direto em componente; usar os semânticos) */
  --marinho: #0A1F44;
  --marinho-700: #132B57;
  --marinho-600: #1E3A6E;
  --esmeralda: #0B6B3A;
  --esmeralda-700: #08552E;
  --verde-apoio: #4CB87A;
  --verde-claro: #E3F1E8;
  --verde-claro-2: #C9E7D5;
  --gelo: #F4F7FB;
  --branco: #FFFFFF;

  /* Neutros cinza-azulados */
  --neutro-50: #F4F7FB;
  --neutro-100: #E9EEF5;
  --neutro-200: #D5DEEA;
  --neutro-300: #B8C5D6;
  --neutro-400: #8C9BB0;
  --neutro-500: #66768E;
  --neutro-600: #4E5D75;
  --neutro-700: #38465C;
  --neutro-800: #233148;
  --neutro-900: #121D33;

  /* ---------- 2. Cores semânticas (o que os componentes usam) */
  --fundo: var(--gelo);
  --superficie: var(--branco);
  --superficie-2: #F8FAFD;
  --superficie-3: var(--neutro-100);
  --borda: var(--neutro-200);
  --borda-forte: var(--neutro-300);
  --texto: var(--neutro-900);              /* 16,9:1 sobre branco */
  --texto-2: var(--neutro-600);            /*  6,9:1 */
  --texto-3: var(--neutro-500);            /*  4,8:1 (rótulos e legendas) */
  --texto-inverso: var(--branco);

  --primaria: var(--marinho);              /* ação principal; branco sobre ela 16,1:1 */
  --primaria-hover: var(--marinho-700);
  --primaria-ativa: var(--marinho-600);
  --sobre-primaria: var(--branco);
  --destaque: var(--esmeralda);            /* links e ação secundária; 6,6:1 sobre branco */
  --destaque-forte: var(--esmeralda-700);
  --destaque-fundo: var(--verde-claro);
  --sobre-destaque: var(--branco);
  --apoio: var(--verde-apoio);             /* barras, progresso, marcas; texto SEMPRE marinho */
  --sobre-apoio: var(--marinho);
  --realce: var(--verde-claro);            /* fundo de cartão, chip, linha marcada */
  --realce-texto: var(--esmeralda-700);

  --lateral-fundo: var(--marinho);
  --lateral-texto: #C3CDE0;
  --lateral-realce: var(--branco);
  --lateral-ativo: rgba(255, 255, 255, .10);
  --lateral-marca: var(--verde-apoio);
  --veu: rgba(10, 31, 68, .45);
  --cabecalho-fundo: rgba(255, 255, 255, .88);

  --sucesso: #0B6B3A;  --sucesso-fundo: #E3F1E8;
  --alerta: #8A5300;   --alerta-fundo: #FDF3DF;
  --erro: #B42318;     --erro-fundo: #FDECEA;
  --info: #2F4E85;     --info-fundo: #E7EDF7;

  /* Gráficos (ordem fixa) e níveis de engajamento */
  --g1: #0A1F44; --g2: #0B6B3A; --g3: #4CB87A; --g4: #3D5A8A; --g5: #8FD3AE; --g6: #8C9BB0;
  --g7: #1E3A6E; --g8: #08552E; --g9: #66768E;
  --nivel-1: var(--neutro-400);   /* Conhece */
  --nivel-2: #8FD3AE;             /* Votaria */
  --nivel-3: var(--verde-apoio);  /* Apoiaria */
  --nivel-4: var(--esmeralda);    /* Faria campanha */
  --bloqueado: var(--neutro-500);
  --coropletico-1: #E3F1E8; --coropletico-2: #A8DABD; --coropletico-3: #4CB87A; --coropletico-4: #0B6B3A;
  --marcador-borda: var(--branco);
  --hachura: rgba(255, 255, 255, .55);

  --gradiente-marca: radial-gradient(120% 90% at 0% 0%, #0B6B3A 0%, transparent 55%),
                     radial-gradient(100% 100% at 100% 100%, #1E3A6E 0%, transparent 60%), #0A1F44;
  --gradiente-progresso: linear-gradient(90deg, var(--esmeralda), var(--verde-apoio));
  --brilho-esqueleto: rgba(255, 255, 255, .65);
  --mapa-contorno: var(--neutro-400);
  --grafico-area: rgba(10, 31, 68, .22);
  --grafico-barra-suave: rgba(10, 31, 68, .45);
  --gradiente-simbolo: linear-gradient(135deg, #E3F1E8, #8FD3AE);
  --sobre-simbolo: var(--marinho);
  --sobre-marca: var(--branco);
  --sobre-marca-2: #C3CDE0;
  --sobre-marca-3: #8FD3AE;
  --lateral-alerta: #F2867C; --lateral-alerta-texto: #3A0B07;
  --sombra-marcador: 0 1px 4px rgba(0, 0, 0, .45);
  --sombra-barra-inferior: 0 -4px 16px rgba(10, 31, 68, .08);
  --filtro-mapa: none;
  --qr-fundo: var(--branco); --qr-modulo: var(--marinho);   /* QR sempre escuro sobre claro, nos dois temas */

  /* ---------- 3. Tipografia */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-12: .75rem; --t-13: .8125rem; --t-14: .875rem; --t-15: .9375rem; --t-16: 1rem; --t-18: 1.125rem;
  --t-20: 1.25rem; --t-24: 1.5rem; --t-28: 1.75rem; --t-32: 2rem; --t-36: 2.25rem;
  --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-negrito: 700;
  --altura-justa: 1.15; --altura-titulo: 1.25; --altura-texto: 1.5; --altura-longa: 1.65;
  --espaco-letra-titulo: -.02em; --espaco-letra-caixa-alta: .06em;
  --numeros: tabular-nums;

  /* ---------- 4. Espaçamento (escala de 4 px) */
  --esp-0: 0; --esp-px: 1px; --esp-05: 2px; --esp-1: 4px; --esp-15: 6px; --esp-2: 8px; --esp-25: 10px; --esp-3: 12px;
  --esp-35: 14px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; --esp-16: 64px;

  /* ---------- 5. Forma */
  --raio-sm: 6px; --raio-md: 10px; --raio-lg: 14px; --raio-xl: 22px; --raio-pill: 999px; --raio-circulo: 50%;
  --borda-fina: 1px; --borda-media: 2px; --borda-grossa: 4px;
  --sombra-0: none;
  --sombra-1: 0 1px 2px rgba(10, 31, 68, .06), 0 1px 3px rgba(10, 31, 68, .08);
  --sombra-2: 0 4px 12px rgba(10, 31, 68, .08), 0 2px 4px rgba(10, 31, 68, .06);
  --sombra-3: 0 12px 28px rgba(10, 31, 68, .14);
  --sombra-4: 0 20px 48px rgba(10, 31, 68, .22);
  --sombra-cta: 0 8px 18px rgba(10, 31, 68, .35);
  --foco: 0 0 0 3px rgba(11, 107, 58, .45);

  /* ---------- 6. Movimento */
  --dur-rapida: 120ms; --dur-media: 220ms; --dur-lenta: 400ms;
  --curva-padrao: cubic-bezier(.2, 0, 0, 1); --curva-entrada: cubic-bezier(0, 0, .2, 1); --curva-saida: cubic-bezier(.4, 0, 1, 1);

  /* ---------- 7. Layout, quebras e camadas */
  --quebra-sm: 480px; --quebra-md: 640px; --quebra-lg: 900px; --quebra-xl: 1200px;  /* referência; media queries usam os mesmos números */
  --lateral-largura: 248px; --lateral-recolhida: 68px; --cabecalho-altura: 60px; --conteudo-max: 1080px; --conteudo-largo: 1400px;
  --alvo-toque: 48px;
  --z-base: 1; --z-mapa-ui: 800; --z-sticky: 900; --z-cabecalho: 1100; --z-veu-menu: 1150; --z-lateral: 1200;
  --z-menu: 1300; --z-veu-gaveta: 2400; --z-gaveta: 2500; --z-modal: 3000; --z-toast: 4000;

  /* ---------- 8. Tamanhos de componente */
  --ico-xs: 12px; --ico-sm: 16px; --ico-md: 18px; --ico-lg: 22px; --ico-xl: 28px; --ico-2xl: 44px;
  --controle-sm: 32px; --controle-md: 40px; --controle-lg: 52px; --controle-xl: 72px;
  --avatar-sm: 28px; --avatar-md: 34px; --avatar-lg: 48px; --avatar-xl: 96px;
  --marcador: 18px; --marcador-destaque: 22px;
  --gaveta-largura: 560px; --modal-largura: 520px; --painel-mapa-largura: 320px; --menu-largura: 220px;
  --grafico-altura: 260px; --grafico-alto: 340px;
}

/* Tema escuro: pela preferência do sistema (sem JS) e pelo botão (data-tema). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]), :root:not([data-tema="claro"]) [data-tema="escuro"] {
    color-scheme: dark;
    --fundo: #071530; --superficie: #0D1E3D; --superficie-2: #102448; --superficie-3: #172D55;
    --borda: #22396A; --borda-forte: #34508A;
    --texto: #E6ECF5; --texto-2: #B3C0D6; --texto-3: #93A3BD; --texto-inverso: var(--marinho);
    --primaria: var(--verde-apoio); --primaria-hover: #63C68C; --primaria-ativa: #7ED3A1; --sobre-primaria: var(--marinho);
    --destaque: #7FD3A2; --destaque-forte: #A6E2BF; --destaque-fundo: #0F3326; --sobre-destaque: var(--marinho);
    --realce: #0F3326; --realce-texto: #A6E2BF;
    --lateral-fundo: #050F24; --lateral-texto: #A9B8D1; --lateral-ativo: rgba(76, 184, 122, .16);
    --veu: rgba(2, 8, 20, .6); --cabecalho-fundo: rgba(13, 30, 61, .88);
    --sucesso: #7FD3A2; --sucesso-fundo: #0F3326; --alerta: #F0B95A; --alerta-fundo: #2E2310;
    --erro: #F2867C; --erro-fundo: #34161A; --info: #9DB4E0; --info-fundo: #15284A;
    --g1: #9DB4E0; --g2: #4CB87A; --g3: #8FD3AE; --g4: #6E8DC2; --g5: #C9EBD6; --g6: #8C9BB0; --g7: #3D5A8A; --g8: #2E8A57; --g9: #B8C5D6;
    --nivel-1: var(--neutro-400); --nivel-2: #C9EBD6; --nivel-3: #8FD3AE; --nivel-4: var(--verde-apoio); --bloqueado: var(--neutro-500);
    --coropletico-1: #123A2A; --coropletico-2: #1F6B45; --coropletico-3: #4CB87A; --coropletico-4: #A6E2BF;
    --marcador-borda: #0D1E3D; --brilho-esqueleto: rgba(255, 255, 255, .08);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 6px 16px rgba(0, 0, 0, .45);
    --sombra-3: 0 12px 28px rgba(0, 0, 0, .55); --sombra-4: 0 20px 48px rgba(0, 0, 0, .65); --sombra-cta: 0 8px 18px rgba(0, 0, 0, .5);
    --foco: 0 0 0 3px rgba(127, 211, 162, .55);
    --mapa-contorno: var(--neutro-500); --grafico-area: rgba(157, 180, 224, .25); --grafico-barra-suave: rgba(157, 180, 224, .5);
    --sombra-barra-inferior: 0 -4px 16px rgba(0, 0, 0, .4); --filtro-mapa: brightness(.75) contrast(1.1) saturate(.8);
  }
}
:root[data-tema="escuro"], [data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #071530; --superficie: #0D1E3D; --superficie-2: #102448; --superficie-3: #172D55;
  --borda: #22396A; --borda-forte: #34508A;
  --texto: #E6ECF5; --texto-2: #B3C0D6; --texto-3: #93A3BD; --texto-inverso: var(--marinho);
  --primaria: var(--verde-apoio); --primaria-hover: #63C68C; --primaria-ativa: #7ED3A1; --sobre-primaria: var(--marinho);
  --destaque: #7FD3A2; --destaque-forte: #A6E2BF; --destaque-fundo: #0F3326; --sobre-destaque: var(--marinho);
  --realce: #0F3326; --realce-texto: #A6E2BF;
  --lateral-fundo: #050F24; --lateral-texto: #A9B8D1; --lateral-ativo: rgba(76, 184, 122, .16);
  --veu: rgba(2, 8, 20, .6); --cabecalho-fundo: rgba(13, 30, 61, .88);
  --sucesso: #7FD3A2; --sucesso-fundo: #0F3326; --alerta: #F0B95A; --alerta-fundo: #2E2310;
  --erro: #F2867C; --erro-fundo: #34161A; --info: #9DB4E0; --info-fundo: #15284A;
  --g1: #9DB4E0; --g2: #4CB87A; --g3: #8FD3AE; --g4: #6E8DC2; --g5: #C9EBD6; --g6: #8C9BB0; --g7: #3D5A8A; --g8: #2E8A57; --g9: #B8C5D6;
  --nivel-1: var(--neutro-400); --nivel-2: #C9EBD6; --nivel-3: #8FD3AE; --nivel-4: var(--verde-apoio); --bloqueado: var(--neutro-500);
  --coropletico-1: #123A2A; --coropletico-2: #1F6B45; --coropletico-3: #4CB87A; --coropletico-4: #A6E2BF;
  --marcador-borda: #0D1E3D; --brilho-esqueleto: rgba(255, 255, 255, .08);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 6px 16px rgba(0, 0, 0, .45);
  --sombra-3: 0 12px 28px rgba(0, 0, 0, .55); --sombra-4: 0 20px 48px rgba(0, 0, 0, .65); --sombra-cta: 0 8px 18px rgba(0, 0, 0, .5);
  --foco: 0 0 0 3px rgba(127, 211, 162, .55);
  --mapa-contorno: var(--neutro-500); --grafico-area: rgba(157, 180, 224, .25); --grafico-barra-suave: rgba(157, 180, 224, .5);
  --sombra-barra-inferior: 0 -4px 16px rgba(0, 0, 0, .4); --filtro-mapa: brightness(.75) contrast(1.1) saturate(.8);
}