/* origem: eleicoes2026@ef6936f app/static/css/design-system.css — sem os tokens por candidato; cores por entidade vêm do domínio via base.html */
/* SapiensLabs Design System — Colors & Type
   Source: projetos/sapienslabs-design-system/colors_and_type.css
   Local copy in app/static/css/ — fontes em ../fonts/ (WOFF2 self-host).
   Substitui referências .ttf por .woff2 (~60% menores). LGPD-safe.
*/

@font-face {
  font-family: 'Antonio';
  src: url('../fonts/Antonio-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/Antonio-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Archivo Narrow';
  src: url('../fonts/ArchivoNarrow-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/ArchivoNarrow-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('../fonts/ArchivoNarrow-Italic-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/ArchivoNarrow-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations'),
       url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2-variations'),
       url('../fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Fira Mono';
  src: url('../fonts/FiraMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Mono';
  src: url('../fonts/FiraMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Mono';
  src: url('../fonts/FiraMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {

  /* ══════════════════════════════════════════════════════════
     BASE TOKENS — raw values
     ══════════════════════════════════════════════════════════ */

  /* ── COLORS: PRIMARY ── */
  --color-primary:         #0693e3;
  --color-primary-hover:   rgba(6, 147, 227, 0.15);
  --color-primary-soft:    rgba(6, 147, 227, 0.08);
  --color-secondary:       #9b51e0;
  --color-yellow:          #eeee22;
  --color-gold:            #d4a056;
  --gradient-primary:      linear-gradient(135deg, #0693e3, #9b51e0);

  /* ── COLORS: BACKGROUND ── */
  --color-bg-main:         #1a2332;
  --color-bg-secondary:    #141d27;
  --color-bg-border:       #1e2a38;

  /* ── COLORS: TEXT ── */
  --color-text-primary:    #ffffff;
  --color-text-sidebar:    #e0e0e0;
  --color-text-label:      #7eb8da;
  --color-text-subtle:     #b0b8c4;
  --color-text-muted:      #6b7a8d;

  /* ── COLORS: STATUS / BADGE ── */
  --color-status-new:      #e74c3c;
  --color-status-up:       #27ae60;
  --color-status-info:     #0693e3;

  /* ── COLORS: SEMÂNTICAS DE DADO (DS 1.6.0) ──
     pos/neg/warn: aprovado/positivo, rejeitado/negativo, atenção.
     Dark usa tons vivos (legíveis no navy); light rebaixa para tons
     deep no bloco [data-theme="light"] (contraste no creme).
     Espectro político: escala única da frota (6 posições), extraída
     dos monitores Câmara/Senado — auditoria 2026-07-07. */
  --color-status-down:     #e74c3c;
  --color-status-warn:     #f39c12;

  --color-spectrum-esquerda:        #e74c3c;
  --color-spectrum-centro-esquerda: #e67e22;
  --color-spectrum-centro:          #16a085;
  --color-spectrum-centro-direita:  #8e44ad;
  --color-spectrum-direita:         #2980b9;
  --color-spectrum-extrema-direita: #6b8cad;  /* dark: navy claro legível (o #2c3e50 some no bg) */

  /* ── COLORS: EDITORIAL CREME (light palette, sapienslabs-theme em produção) ──
     Mesma carcaça #1a2332 do dashboard atende dois papéis:
       - dark mode dashboard: surface (--color-bg-main)
       - light mode editorial: tinta corpo (--color-ink)
     Mantemos os tokens duplicados por clareza semântica em vez de aliasing. */
  --color-cream:           #f5efe2;
  --color-cream-deep:      #ebe2cf;
  --color-ink:             #1a2332;
  --color-ink-deep:        #0f1620;
  --color-rule-cream:      #d8cfb9;
  --color-gold-editorial:  #b8874a;  /* mais escuro que --color-gold (#d4a056) para legibilidade no creme */
  --color-red-editorial:   #c0392b;
  --color-teal-editorial:  #5b8a8a;  /* teal sóbrio — slot 3 da paleta de categorias do tema */
  --color-muted-cream:     #8a7e64;
  --color-text-soft:       #4a5365;

  /* ── COLORS: LINK DE TEXTO (DS 1.7.0) ──
     "Cor de link de texto" e "cor de interação" (--accent) são canais
     separados: o accent segue reservado a CTAs e estados ativos. Par
     light/dark no padrão pos/neg/warn do 1.6.0 (vivo no dark, deep no
     light). Contrastes WCAG AA calculados no estudo
     audits/2026-07-25-estudo-layout-blog.md (achado D); em produção no
     sapienslabs-theme desde 2.6.67 (nasceu local, promovido no 1.7.0). */
  --color-link:                 #0693e3;  /* dark: 4,73:1 sobre o ink (mesmo hex do accent, canal próprio) */
  --color-link-visited:         #8aa8c0;  /* dark: 6,35:1 — dessaturado */
  --color-link-deep:            #056ba6;  /* light: 5,01:1 sobre o creme */
  --color-link-visited-deep:    #4a6a86;  /* light: 4,96:1 */


  /* ── TYPOGRAPHY: FAMILIES ── */
  --font-heading:          'Antonio', 'Oswald', sans-serif;      /* editorial display */
  --font-body:             'Archivo Narrow', sans-serif;          /* body copy */
  --font-ui:               'Inter', system-ui, sans-serif;        /* UI labels (uppercase) */
  --font-menu:             'Antonio', 'Oswald', sans-serif;          /* nav/menu — desde v1.3.0 (Archivo Black removida) */
  --font-mono:             'Fira Mono', ui-monospace, monospace;  /* technical values */

  /* ── TYPOGRAPHY: SIZES ── */
  --text-h1:               2.1rem;
  --text-h2:               1.6rem;
  --text-h3:               1.35rem;
  --text-body:             1.0rem;
  --text-label:            0.9rem;
  --text-badge:            0.8rem;
  --text-mono:             12px;
  --text-nav:              0.78rem;          /* alias = --text-nav-child (item de nav simples / filho) */
  --text-nav-parent:       0.94rem;          /* DS 1.5.24 — item-pai do menu hierarquico */
  --text-nav-child:        0.78rem;          /* DS 1.5.24 — item-filho ou item flat */
  --text-nav-numeral:      0.7rem;           /* DS 1.5.24 — numerador opcional Fira Mono */
  --text-meta:             0.65rem;

  /* ── TYPOGRAPHY: WEIGHTS ── */
  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;
  --weight-black:          900;

  /* ── TYPOGRAPHY: LETTER-SPACING ── */
  --tracking-heading:      0.02em;
  --tracking-ui:           0.06em;
  --tracking-mono:         0.05em;
  --tracking-eyebrow:      0.14em;
  --tracking-uppercase:    0.10em;

  /* ── TYPOGRAPHY: LINE-HEIGHT ── */
  --leading-display:       0.95;
  --leading-heading:       1.1;
  --leading-body:          1.7;
  --leading-ui:            1.3;

  /* ── TYPOGRAPHY: PROSE (DS 1.7.0 — camada editorial) ──
     O DS nasceu dashboard-first; esta é a camada de LEITURA LONGA (artigo,
     resumo, ensaio), extraída do sapienslabs-theme em produção (2.6.67/68)
     e promovida pra que qualquer superfície editorial futura (Noos,
     homelabr) não recomece do zero. Valores calibrados ao vivo no estudo
     audits/2026-07-25-estudo-layout-blog.md (achados A, E, G2):
     62ch = 71 caracteres/linha em Archivo Narrow (fonte condensada: o zero
     que define 1ch é mais largo que a letra média; 68ch dariam 78 cpl). */
  --prose-max:             720px;    /* moldura da coluna de prosa (headings, mídia, tabelas) */
  --prose-measure:         62ch;     /* medida do texto corrido (~71 cpl) */
  --prose-body:            1.18rem;  /* corpo de artigo (18,88px em root 16px) */
  --prose-leading:         1.75;     /* entrelinha de leitura longa */
  --prose-h2:              1.95rem;  /* escala de artigo — h2 de seção */
  --prose-h3:              1.45rem;  /* escala de artigo — h3 */
  --prose-block-gap:       1.2em;    /* respiro vertical entre blocos de prosa */

  /* ══════════════════════════════════════════════════════════
     SPACING, RADII, BORDERS, MOTION
     ══════════════════════════════════════════════════════════ */

  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               20px;
  --space-6:               24px;
  --space-8:               32px;
  --space-10:              40px;
  --space-12:              48px;
  --space-16:              64px;
  --space-20:              80px;

  --radius-none:           0;
  --radius-sm:             4px;
  --radius-md:             8px;

  --border-subtle:         1px solid #1e2a38;
  --border-accent:         3px solid #0693e3;
  --border-gold:           3px solid #d4a056;

  --transition-fast:       0.15s ease;
  --transition-base:       0.3s ease-in-out;

  --sidebar-w:             240px;

  /* ══════════════════════════════════════════════════════════
     SEMANTIC ROLES — prefer these in product code
     ══════════════════════════════════════════════════════════ */

  --fg1:                   var(--color-text-primary);
  --fg2:                   var(--color-text-sidebar);
  --fg3:                   var(--color-text-subtle);
  --fg4:                   var(--color-text-muted);
  --fg-label:              var(--color-text-label);

  --bg1:                   var(--color-bg-main);
  --bg2:                   var(--color-bg-secondary);
  --border1:               var(--color-bg-border);

  --accent:                var(--color-primary);
  --accent-soft:           var(--color-primary-soft);
  --accent-gold:           var(--color-gold);

  /* ══════════════════════════════════════════════════════════
     NOMINAL ALIASES — short names for the role-based tokens above.
     Promovido em DS 1.5.21 (01/05/2026). Antes, esses tokens viviam
     duplicados no tema do blog (`sapienslabs-theme/style.css`); agora
     são fonte única aqui.
     Dark-first (canônico é dark-only); override em [data-theme="light"].
     ══════════════════════════════════════════════════════════ */

  /* Superfícies e tinta — dark default */
  --text:                  var(--color-text-primary);    /* #ffffff */
  --text-soft:             var(--color-text-subtle);     /* #b0b8c4 */
  --paper:                 var(--color-bg-main);         /* #1a2332 (ink em dark) */
  --paper-deep:            var(--color-ink-deep);        /* #0f1620 */
  --line:                  var(--color-bg-border);       /* #1e2a38 */
  --rule:                  var(--color-bg-border);       /* alias de --line em dark */
  --muted:                 var(--color-text-muted);      /* #6b7a8d */

  /* Camada de prosa — semânticos que alternam com o tema (DS 1.7.0).
     Dark-first como o resto do arquivo; override em [data-theme="light"].
     --prose-ink rebaixa a tinta da leitura longa em dark de #fff (15,8:1,
     halation em tela escura) para o papel body do DS (#e0e0e0, 11,96:1). */
  --link:                  var(--color-link);
  --link-visited:          var(--color-link-visited);
  --prose-ink:             var(--color-text-sidebar);    /* #e0e0e0 */

  /* Tokens fixos (não inverte com tema) */
  --ink:                   var(--color-ink);             /* #1a2332 */
  --cream:                 var(--color-cream);           /* #f5efe2 */
  --gold:                  var(--color-gold-editorial);  /* #b8874a */

  /* Semânticas de dado — apelidos curtos (DS 1.6.0) */
  --pos:                   var(--color-status-up);
  --neg:                   var(--color-status-down);
  --warn:                  var(--color-status-warn);

  /* Famílias de fonte — apelidos curtos */
  --f-display:             var(--font-heading);
  --f-body:                var(--font-body);
  --f-ui:                  var(--font-ui);
  --f-mono:                var(--font-mono);
}

/* Override pra superfícies em creme (tema light, marca, prints editoriais).
   Surfaces que querem virar light declaram `data-theme="light"` no html ou
   ancestral. Usado no `sapienslabs-theme` do blog (light-first com toggle
   pro dark) e no dashboard quando o usuário aciona o toggle "Tema → Claro". */
[data-theme="light"] {
  --text:                  var(--color-ink);             /* #1a2332 */
  --text-soft:             var(--color-text-soft);       /* #4a5365 */
  --paper:                 var(--color-cream);           /* #f5efe2 */
  --paper-deep:            var(--color-cream-deep);      /* #ebe2cf */
  --line:                  var(--color-rule-cream);      /* #d8cfb9 */
  --rule:                  var(--color-rule-cream);
  --muted:                 var(--color-muted-cream);     /* #8a7e64 */

  /* Camada de prosa em light (DS 1.7.0): link deep AA sobre o creme;
     tinta de leitura volta ao ink pleno. */
  --link:                  var(--color-link-deep);
  --link-visited:          var(--color-link-visited-deep);
  --prose-ink:             var(--color-ink);

  /* DS 1.5.25 — fg tokens em light. Sem isso, type-h1/type-h2 (que usam
     --fg1) ficam ilegíveis sobre paper cream, e .sl-menu__item idle
     (--fg2) cai em sub-WCAG. Promovido do override local que vivia em
     eleicoes2026/app/static/css/app.css. */
  --fg1:                   var(--color-ink);             /* #1a2332 */
  --fg2:                   var(--color-text-soft);       /* #4a5365 */
  --fg3:                   var(--color-ink);             /* #1a2332 */

  /* Semânticas de dado — variantes deep p/ contraste no creme (DS 1.6.0) */
  --color-status-up:       #1e8449;
  --color-status-down:     #c0392b;
  --color-status-warn:     #9c630b;
  --color-spectrum-extrema-direita: #1f2a36;
}


/* ══════════════════════════════════════════════════════════
   SEMANTIC TYPE CLASSES — drop-in rules
   Use these to style without repeating font declarations.
   ══════════════════════════════════════════════════════════ */

/* H1 e H2 são "editorial display" — Antonio Black 900 UPPERCASE.
   Promovido em DS 1.5.22 (01/05/2026): antes essas type classes usavam
   --weight-bold (700) sem text-transform, em contradição com a regra
   escrita do README ("Editorial display titles UPPERCASE Antonio 900").
   Type classes agora refletem a regra. */
.type-h1,
h1.sl {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-heading);
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--fg1);
}

.type-h2,
h2.sl {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-heading);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fg1);
}

/* H3 não é display — fica como "subhead" Antonio 700, mixed case, mais
   próximo do texto corrido. Diferenciação intencional pra não inflar
   visualmente tudo. */
.type-h3,
h3.sl {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
  color: var(--fg3);
}

.type-display {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  line-height: var(--leading-display);
  color: var(--fg1);
  text-transform: uppercase;
}

.type-body,
p.sl {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg3);
}

.type-label {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--fg-label);
}

/* Eyebrow — chyron de seção. Padrão único do DS (DS 1.5.23, 01/05/2026):
   Fira Mono / muted / 0.14em. "Monitoring console" vibe.
   Aliases legados (.eyebrow, .sl-eyebrow) reapontam pra esta regra. */
.type-eyebrow,
.eyebrow,
.sl-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.type-nav {
  font-family: var(--font-menu);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--fg2);
}

.type-mono,
code.sl {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--accent);
}

.type-meta {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-ui);
  color: var(--fg4);
}

/* ══════════════════════════════════════════════════════════
   COMPONENTE — sidebar-menu (DS 1.5.24)
   Padrao unico para menus de navegacao laterais. Cobre os 3
   contextos onde aparece menu vertical no SapiensLabs:
     1. Mock do dashboard (eleicoes-dados.html) — flat com numerador
     2. Site institucional (sapienslabs.com.br) — pai/filho 2 niveis
     3. Dashboard real (eleicoes2026) — flat sem numerador

   Voz visual: newsroom chyron. Antonio uppercase letter-spaced,
   border-left 3px que vira accent no item ativo (regra do README).
   Hover: color accent + bg accent.08 sutil.
   Item ativo: border-left 3px accent + color accent (sem bg) — padrao
   editorial, mais sobrio que tela-de-app.
   ══════════════════════════════════════════════════════════ */

.sl-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Agrupador: eyebrow Fira Mono muted + linha de itens abaixo. */
.sl-menu__group {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.sl-menu__group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 20px 8px 20px;
}

/* Item base — comum a parent/child/flat. */
.sl-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-menu);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--fg2, var(--text));
  padding: 9px 20px;
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-left-color .15s ease;
  cursor: pointer;
}
.sl-menu__item:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

/* Modificadores hierarquicos. */
.sl-menu__item--parent {
  font-size: var(--text-nav-parent);
  font-weight: var(--weight-bold);
  color: var(--text);
}
.sl-menu__item--child {
  font-size: var(--text-nav-child);
  font-weight: var(--weight-medium);
  color: var(--text-soft);
  padding-left: 32px;            /* indentacao visual do filho */
}
.sl-menu__item--flat {
  font-size: var(--text-nav);    /* alias para child */
  font-weight: var(--weight-bold);
}

/* Estado ativo — border-left 3px accent + color accent, sem bg.
   Sobrepoe color/border do hover quando o item estiver ativo. */
.sl-menu__item--active,
.sl-menu__item[aria-current="page"],
.sl-menu__item[aria-current="true"] {
  color: var(--accent);
  border-left-color: var(--accent);
  background: transparent;
}

/* Numerador opcional (Fira Mono, alinhado a direita do item). */
.sl-menu__numeral {
  font-family: var(--font-mono);
  font-size: var(--text-nav-numeral);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  margin-left: auto;
}
.sl-menu__item--active .sl-menu__numeral {
  color: var(--accent);
}