/* =========================================================================
   CORRENTE — Design System
   01. TOKENS
   Fundação do sistema: cor, tipografia, espaço, forma, elevação, movimento.
   Nenhum componente deve declarar valor cru. Tudo vem daqui.
   ========================================================================= */

:root {
  /* Faz controles nativos (scrollbar, popup de select, caret) seguirem o tema */
  color-scheme: light;

  /* ---------------------------------------------------------------------
     COR — PRIMITIVAS
     Escalas cruas. Não use diretamente em componentes: use os semânticos.
     --------------------------------------------------------------------- */

  /* Azul — cor de campanha, herdada do campo ultramar do material impresso */
  --azul-950: #050F2E;
  --azul-900: #0A1C4F;
  --azul-800: #102A73;
  --azul-700: #16399B;
  --azul-600: #1D4BC4;
  --azul-500: #2E6BE6;  /* azul da camisa */
  --azul-400: #5B93F0;
  --azul-300: #8FB7F6;
  --azul-200: #BFD6FA;
  --azul-100: #DEEAFD;
  --azul-050: #EFF5FE;

  /* Amarelo — cor de voto, sempre em contra-luz sobre azul */
  --amarelo-900: #7A4E00;
  --amarelo-800: #A86C00;
  --amarelo-700: #D08800;
  --amarelo-600: #F0A500;
  --amarelo-500: #FFC20E;  /* ouro-base */
  --amarelo-400: #FFD447;
  --amarelo-300: #FFE283;
  --amarelo-200: #FFEEB5;
  --amarelo-100: #FFF6DA;
  --amarelo-050: #FFFBEE;

  /* Neutros — levemente azulados para não brigar com o primário */
  --neutro-950: #0B0F1A;
  --neutro-900: #151B29;
  --neutro-800: #232B3D;
  --neutro-700: #3A445A;
  --neutro-600: #566076;
  --neutro-500: #778095;
  --neutro-400: #9BA3B5;
  --neutro-300: #C2C8D4;
  --neutro-200: #DEE2EA;
  --neutro-100: #EEF1F5;
  --neutro-050: #F7F8FB;
  --branco:     #FFFFFF;

  /* Apoio — verde e vermelho da bandeira, calibrados para contraste AA */
  --verde-600:    #007A2E;
  --verde-500:    #009C3B;
  --verde-100:    #D6F2E0;
  --vermelho-600: #B31E1E;
  --vermelho-500: #D62828;
  --vermelho-100: #FBDDDD;

  /* ---------------------------------------------------------------------
     COR — SEMÂNTICA
     Camada que os componentes consomem. Trocar tema = trocar só isto.
     --------------------------------------------------------------------- */
  --cor-marca:            var(--azul-700);
  --cor-marca-forte:      var(--azul-900);
  --cor-marca-suave:      var(--azul-050);
  --cor-voto:             var(--amarelo-500);
  --cor-voto-forte:       var(--amarelo-600);
  --cor-voto-suave:       var(--amarelo-100);

  --fundo-base:           var(--branco);
  --fundo-elevado:        var(--branco);
  --fundo-afundado:       var(--neutro-050);
  --fundo-inverso:        var(--azul-900);
  --fundo-campanha:       var(--azul-700);

  --texto-forte:          var(--azul-950);
  --texto-base:           var(--neutro-800);
  --texto-suave:          var(--neutro-600);
  --texto-tenue:          var(--neutro-500);
  --texto-inverso:        var(--branco);
  --texto-inverso-suave:  var(--azul-200);
  --texto-sobre-voto:     var(--azul-950);

  --borda-sutil:          var(--neutro-200);
  --borda-media:          var(--neutro-300);
  --borda-forte:          var(--azul-900);
  --borda-inversa:        color-mix(in srgb, var(--branco) 22%, transparent);

  --cor-sucesso:  var(--verde-500);
  --cor-atencao:  var(--amarelo-600);
  --cor-erro:     var(--vermelho-500);
  --cor-info:     var(--azul-600);

  /* Véu escuro difuso: some sobre o azul e protege o contraste quando um
     texto claro precisa cruzar a faixa amarela. */
  --veu-escuro: radial-gradient(ellipse at center,
    rgba(5, 15, 46, 0.92) 0%,
    rgba(5, 15, 46, 0.72) 58%,
    rgba(5, 15, 46, 0) 100%);

  --foco-anel:    var(--amarelo-500);
  --foco-halo:    var(--azul-950);

  /* ---------------------------------------------------------------------
     TIPOGRAFIA
     Poppins ExtraBold = placa, grito, numeral — geométrica de bojo
     circular, como a arte impressa. Barlow = leitura, dado, formulário.
     --------------------------------------------------------------------- */
  --fonte-display: "Poppins", "Avenir Next", "Segoe UI", sans-serif;
  --fonte-texto:   "Barlow", -apple-system, sans-serif;
  --fonte-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala 1.25 (terça maior) ancorada em 16px, com topo esticado
     para o registro de cartaz. */
  --txt-2xs:  0.694rem;   /* 11.1 */
  --txt-xs:   0.781rem;   /* 12.5 */
  --txt-sm:   0.875rem;   /* 14   */
  --txt-md:   1rem;       /* 16   */
  --txt-lg:   1.25rem;    /* 20   */
  --txt-xl:   1.563rem;   /* 25   */
  --txt-2xl:  1.953rem;   /* 31.2 */
  --txt-3xl:  2.441rem;   /* 39   */
  --txt-4xl:  3.052rem;   /* 48.8 */
  --txt-5xl:  clamp(2.4rem, 6.5vw, 4.7rem);
  --txt-6xl:  clamp(2.6rem, 10vw, 8.5rem);  /* placa de nome */
  --txt-7xl:  clamp(3.6rem, 17vw, 14rem);  /* numeral eleitoral */

  --peso-normal:    400;
  --peso-display:   800;  /* peso do display: Poppins ExtraBold */
  --peso-medio:     500;
  --peso-semi:      600;
  --peso-forte:     700;
  --peso-extremo:   800;

  --entrelinha-rente:   0.86;  /* display empilhado */
  --entrelinha-curta:   1.1;
  --entrelinha-media:   1.35;
  --entrelinha-solta:   1.6;

  --letra-apertada: -0.02em;
  --letra-normal:   0;
  --letra-larga:    0.04em;
  --letra-placa:    0.12em;  /* rótulos institucionais em caixa alta */

  /* ---------------------------------------------------------------------
     ESPAÇO — base 4px
     --------------------------------------------------------------------- */
  --e-0:   0;
  --e-1:   0.25rem;
  --e-2:   0.5rem;
  --e-3:   0.75rem;
  --e-4:   1rem;
  --e-5:   1.5rem;
  --e-6:   2rem;
  --e-7:   2.5rem;
  --e-8:   3rem;
  --e-9:   4rem;
  --e-10:  5rem;
  --e-11:  6.5rem;
  --e-12:  8rem;

  --largura-conteudo: 72rem;
  --largura-texto:    38rem;
  --calha:            var(--e-5);

  /* ---------------------------------------------------------------------
     FORMA
     O impresso não tem cantos redondos generosos: raio curto e decidido.
     --------------------------------------------------------------------- */
  --raio-0:     0;
  --raio-sm:    3px;
  --raio-md:    6px;
  --raio-lg:    10px;
  --raio-xl:    16px;
  --raio-pilula: 999px;

  --borda-fina:   1px;
  --borda-media-l: 2px;
  --borda-grossa: 3px;
  --borda-placa:  5px;

  /* ---------------------------------------------------------------------
     ELEVAÇÃO
     Duas famílias: sombra difusa (interface) e sombra dura (cartaz).
     --------------------------------------------------------------------- */
  --sombra-1: 0 1px 2px rgba(5, 15, 46, 0.08);
  --sombra-2: 0 2px 6px rgba(5, 15, 46, 0.10), 0 1px 2px rgba(5, 15, 46, 0.06);
  --sombra-3: 0 8px 20px rgba(5, 15, 46, 0.12), 0 2px 6px rgba(5, 15, 46, 0.08);
  --sombra-4: 0 18px 44px rgba(5, 15, 46, 0.18), 0 4px 12px rgba(5, 15, 46, 0.10);
  --sombra-dura:       4px 4px 0 var(--azul-950);
  --sombra-dura-curta: 2px 2px 0 var(--azul-950);
  --sombra-dura-voto:  4px 4px 0 var(--amarelo-600);
  --sombra-foco:       0 0 0 3px var(--foco-halo), 0 0 0 6px var(--foco-anel);

  /* ---------------------------------------------------------------------
     MOVIMENTO
     --------------------------------------------------------------------- */
  --dur-instantaneo: 90ms;
  --dur-rapido:      160ms;
  --dur-medio:       280ms;
  --dur-lento:       520ms;
  --dur-cena:        900ms;

  --curva-padrao:  cubic-bezier(0.4, 0, 0.2, 1);
  --curva-saida:   cubic-bezier(0.4, 0, 1, 1);
  --curva-entrada: cubic-bezier(0, 0, 0.2, 1);
  --curva-comicio: cubic-bezier(0.16, 1, 0.3, 1);  /* overshoot contido */

  /* ---------------------------------------------------------------------
     CAMADAS
     --------------------------------------------------------------------- */
  --z-base:      0;
  --z-conteudo:  10;
  --z-fixo:      100;
  --z-cortina:   200;
  --z-modal:     210;
  --z-aviso:     300;
  --z-dica:      400;
}

/* =========================================================================
   TEMA ESCURO — "comício noturno"
   Inverte o palco: azul-950 vira o papel, o amarelo assume o protagonismo.
   ========================================================================= */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo-base:      var(--azul-950);
  --fundo-elevado:   #0C1B44;
  --fundo-afundado:  #040B22;
  --fundo-inverso:   var(--amarelo-500);
  --fundo-campanha:  var(--azul-800);

  --cor-marca:       var(--azul-400);
  --cor-marca-forte: var(--amarelo-500);
  --cor-marca-suave: rgba(46, 107, 230, 0.14);
  --cor-voto-suave:  rgba(255, 194, 14, 0.14);

  --texto-forte:         var(--branco);
  --texto-base:          var(--azul-100);
  --texto-suave:         var(--azul-200);
  --texto-tenue:         var(--azul-300);
  --texto-inverso:       var(--azul-950);
  --texto-inverso-suave: var(--azul-800);

  --borda-sutil:  rgba(255, 255, 255, 0.12);
  --borda-media:  rgba(255, 255, 255, 0.22);
  --borda-forte:  var(--amarelo-500);
  --borda-inversa: rgba(5, 15, 46, 0.25);

  --cor-sucesso: #2ED06B;
  --cor-erro:    #FF6B6B;
  --cor-info:    var(--azul-400);

  --foco-halo: var(--branco);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --sombra-3: 0 10px 26px rgba(0, 0, 0, 0.55);
  --sombra-4: 0 20px 50px rgba(0, 0, 0, 0.6);
  --sombra-dura: 4px 4px 0 var(--amarelo-500);
  --sombra-dura-curta: 2px 2px 0 var(--amarelo-500);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo-base:      var(--azul-950);
    --fundo-elevado:   #0C1B44;
    --fundo-afundado:  #040B22;
    --fundo-inverso:   var(--amarelo-500);
    --fundo-campanha:  var(--azul-800);

    --cor-marca:       var(--azul-400);
    --cor-marca-forte: var(--amarelo-500);
    --cor-marca-suave: rgba(46, 107, 230, 0.14);
    --cor-voto-suave:  rgba(255, 194, 14, 0.14);

    --texto-forte:         var(--branco);
    --texto-base:          var(--azul-100);
    --texto-suave:         var(--azul-200);
    --texto-tenue:         var(--azul-300);
    --texto-inverso:       var(--azul-950);
    --texto-inverso-suave: var(--azul-800);

    --borda-sutil:  rgba(255, 255, 255, 0.12);
    --borda-media:  rgba(255, 255, 255, 0.22);
    --borda-forte:  var(--amarelo-500);
    --borda-inversa: rgba(5, 15, 46, 0.25);

    --cor-sucesso: #2ED06B;
    --cor-erro:    #FF6B6B;
    --cor-info:    var(--azul-400);

    --foco-halo: var(--branco);

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.5);
    --sombra-3: 0 10px 26px rgba(0, 0, 0, 0.55);
    --sombra-4: 0 20px 50px rgba(0, 0, 0, 0.6);
    --sombra-dura: 4px 4px 0 var(--amarelo-500);
    --sombra-dura-curta: 2px 2px 0 var(--amarelo-500);
  }
}