/* ============================================================
   NOVA BRASILEIRA — TOKENS BASE
   tokens → foundations → componentes → padrões → páginas
   Dark editorial técnico. Verde = comando, acento único.
   ============================================================ */

/* ---------- COR: carvão / branco / grafite ---------- */
:root {
  --carvao:    #0F0F12;   /* fundo global */
  --carvao-2:  #16161B;   /* cards / painéis elevados */
  --carvao-3:  #1F1F26;   /* inputs, campos, molduras */
  --carvao-4:  #2A2A32;   /* hairlines elevadas, hover de superfície */

  --branco:    #F7F6F3;   /* texto principal sobre escuro */
  --cinza:     #EDEDEB;   /* texto secundário claro */
  --grafite:   #6B6B72;   /* labels, metadados, texto terciário */
  --grafite-aa:#9A9AA0;   /* grafite AA — 4.5:1 em fundos escuros */
  --grafite-2: #8A8A92;   /* grafite mais legível p/ corpo secundário */

  /* ---------- VERDE: escala de estados (método Radix) ----------
     verde é COMANDO e brand equity. Nunca textura/fundo/eco.   */
  --verde-1:   #0C1A12;   /* tint de fundo quase imperceptível */
  --verde-2:   #0F2419;   /* superfície tonal */
  --verde-3:   #123524;   /* superfície ativa sutil */
  --verde-4:   #16472F;   /* borda discreta */
  --verde-5:   #1A5C3B;   /* borda de ênfase */
  --verde-6:   #1E8C4F;   /* VIVO — acento principal, séries, satélite */
  --verde-7:   #25A85E;   /* hover do sólido */
  --verde-8:   #00784F;   /* esmeralda — pressionado / profundidade */
  --verde-text:#5BD992;   /* texto/realce verde sobre carvão */
  --verde-glow: rgba(30,140,79,.45);

  /* ---------- DATA-VIZ (jamais como acento de marca) ---------- */
  --azul:      #1A6FB5;
  --amarelo:   #F5C518;

  /* ---------- ERRO (só estados de erro) ---------- */
  --erro:      #D94040;

  /* ---------- TIPOGRAFIA ---------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Inter", ui-monospace, "SF Mono", Menlo, monospace;

  /* polarização de peso */
  --w-thin:  200;   /* só display grande, nunca corpo pequeno */
  --w-light: 300;   /* corpo */
  --w-reg:   400;   /* corpo / UI */
  --w-med:   500;   /* labels, botões */
  --w-semi:  600;   /* subtítulos */
  --w-black: 900;   /* TODO dado quantitativo — brutalista */

  /* escala tipográfica */
  --t-display: clamp(3.4rem, 8.5vw, 8rem);
  --t-h1:      clamp(2.4rem, 5vw, 4.25rem);
  --t-h2:      clamp(1.9rem, 3.4vw, 3rem);
  --t-h3:      clamp(1.3rem, 2vw, 1.75rem);
  --t-lead:    clamp(1.05rem, 1.4vw, 1.35rem);
  --t-body:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-label:   0.6875rem;  /* labels caixa-alta */

  /* ---------- ESPAÇO (base 4 / ritmo 8) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px; --s-12: 200px;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---------- RAIO ---------- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 22px;

  /* ---------- HAIRLINES (assinatura gráfica, ~8% opacidade) ---------- */
  --line:      rgba(247,246,243,.08);
  --line-2:    rgba(247,246,243,.14);
  --line-dark: rgba(0,0,0,.32);

  /* ---------- MOTION (governado — modelo Atlassian) ---------- */
  --m-hover: 90ms;
  --m-enter: 220ms;
  --m-exit:  140ms;
  --m-slow:  600ms;
  /* assintótico, com peso/inércia — sem mola/bounce */
  --ease:      cubic-bezier(.22, .61, .18, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.5, 0, .75, 0);
}

/* ============================================================
   RESET ENXUTO
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-weight: var(--w-light);
  background: var(--carvao);
  color: var(--branco);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--verde-6); color: var(--carvao); }

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