/* ============================================================================
   base.css — reset, documento, scanline, tipografia e utilitários de layout.
   Construído sobre tokens.css. Sem componentes aqui (ver components.css).
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  /* Cara de terminal limpa: zero cortado + ligaduras desligadas (a mono não vira código). */
  font-feature-settings: "zero" 1;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Scanline de "tela viva" — assinatura da marca, sutilíssima (~3%). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--scanline);
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

a { color: var(--ai); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

/* Foco visível em TODO interativo (WCAG 2.4.7), contraste ≥3:1. */
:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Tipografia — as quatro vozes
   -------------------------------------------------------------------------- */
.display      { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.01em; }
.display-caps { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.mono         { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pixel        { font-family: var(--font-pixel); line-height: 1.6; }
.dim          { color: var(--ink-dim); }
.muted        { color: var(--ink-dim); }
.eyebrow      { font-family: var(--font-mono); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-dim); margin: 0; }

/* O prompt >_ e o cursor piscando ▮ — o mark recorrente da marca. */
.prompt::before { content: "> "; color: var(--go); font-family: var(--font-mono); }
.cursor {
  display: inline-block; width: 0.6ch; height: 1.05em;
  background: var(--go); margin-left: 1px; vertical-align: text-bottom;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Utilitários mínimos de layout (densos, sem virar framework)
   -------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.row { display: flex; gap: var(--space-4); align-items: center; }
.row-between { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: var(--space-4); }
.center { text-align: center; }
.divider { height: 1px; background: var(--line); border: 0; margin: var(--space-5) 0; }

/* Região aria-live / texto só pra leitor de tela. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}