/* ============================================================
   tokens.css — Design system, MOBILE FIRST
   Os valores base são os do celular. As media queries usam
   min-width para ACRESCENTAR conforme a tela cresce.
   As cores das Faixas de Dignidade são injetadas em tempo de
   execução a partir do taxonomias.js, como --faixa-*.
   ============================================================ */

:root {
  /* Base */
  --bg:            #0B0D12;
  --bg-elev:       #141821;
  --bg-elev-2:     #1C2130;
  --bg-hover:      #232939;
  --borda:         #2A3142;
  --borda-forte:   #3A4257;

  --txt:           #F2F4F8;
  --txt-2:         #A8B0C0;
  --txt-3:         #7C8497;

  --marca:         #F5B301;
  --marca-escura:  #C68F00;
  --marca-txt:     #0B0D12;

  --ok:            #22C55E;
  --alerta:        #F97316;
  --intl:          #3B82F6;

  --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-num: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Tipografia — escala do celular */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  2rem;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 28px; --e7: 40px; --e8: 56px;

  --raio:      10px;
  --raio-lg:   14px;
  --raio-pill: 999px;

  --sombra:    0 1px 3px rgba(0,0,0,.4);
  --sombra-lg: 0 12px 40px rgba(0,0,0,.55);

  --largura: 1400px;
  --transicao: 160ms cubic-bezier(.4,0,.2,1);

  /* Alvo mínimo de toque. Nada clicável abaixo disto. */
  --toque: 44px;

  /* Alturas do topo fixo — usadas para posicionar o resto */
  --topo-h: 108px;
}

/* Tablet em diante: tipografia e espaços crescem */
@media (min-width: 700px) {
  :root {
    --t-md:  1.0625rem;
    --t-lg:  1.375rem;
    --t-xl:  1.75rem;
    --t-2xl: 2.5rem;
    --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
    --raio-lg: 16px;
    --topo-h: 76px;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* trava rolagem lateral acidental */
}

button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
a { color: inherit; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

body.travado { overflow: hidden; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}