/* ============================================================
   GPTAll — Design tokens ("A Bancada de Sinal")
   Fonte única de verdade: /DESIGN.md (frontmatter de tokens).
   Não redeclare valor de cor/tipografia/espaço fora deste arquivo —
   componentes consomem só as custom properties abaixo.

   Nota de implementação (evidência, não suposição): o Google Fonts
   não expõe uma família "Big Shoulders Condensed" via API — o corte
   condensado é servido sob o nome de família "Big Shoulders" (a
   variante "Condensed" é o corte histórico/original dessa família
   variável; "Big Shoulders Display/Text/Inline/Stencil" é que são
   as variantes largas adicionadas depois). Confirmado ao vivo: a
   API do Google Fonts devolve HTTP 400 "Missing font family" para
   "Big Shoulders Condensed" e HTTP 200 para "Big Shoulders". O
   carregamento (link rel=stylesheet) e o var(--font-display) usam
   por isso "Big Shoulders", que É visualmente a condensada descrita
   no DESIGN.md — sem isso o nome da marca cairia em silêncio no
   fallback do sistema.
   ============================================================ */

:root {
  /* ---- Cor: vidro frio + único acento (OKLCH, com fallback hex) ---- */
  --color-void: oklch(16% 0.02 235); /* #0C1016 — fundo base */
  --color-panel: oklch(20% 0.02 235); /* #141922 — degrau de elevação */
  --color-panel-hover: oklch(25% 0.02 235); /* #1B212C — hover/terceiro degrau */
  --color-graticule: oklch(45% 0.03 235); /* #5C6470 — grid, borda, ícone secundário */
  /* Revisão 2026-08-04 — a referência separa superfície por LUMINOSIDADE, não
     por borda. Havia 42 bordas hairline de 1px no site, e era isso, mais que o
     canto reto, que fazia ele ler como painel técnico em vez da calma do
     ChatGPT. Em vez de editar 42 pontos, o divisor desceu de 30% para 22% de
     luminância: encosta no --color-panel (20%) e some como linha, deixando o
     degrau de fundo fazer a separação. Onde a borda ainda precisa ser lida
     como estrutura (foco de teclado, campo ativo), o próprio componente sobe
     para --color-graticule. */
  --color-graticule-dim: oklch(22% 0.02 235); /* divisor quase invisível */
  --color-paper: oklch(92% 0.01 235); /* #E9EBEE — texto primário sobre o vidro */
  --color-paper-dim: oklch(68% 0.02 235); /* #9BA1AA — texto secundário */
  /* Revisão 2026-08-04 — o amarelo saturado era usado como COR DE TEXTO em 46
     lugares (nome do modelo, links, marcadores, contadores). A referência
     pedida é quase monocromática: texto colorido é justamente o que ela nunca
     faz. Os dois tokens abaixo desceram de croma 0.16/0.15 para 0.035/0.030 —
     continuam quentes o suficiente para não virar cinza, mas leem como
     off-white, não como "fonte amarela". */
  --color-signal: oklch(89% 0.035 92); /* texto de ênfase, borda de foco, CTA */
  --color-signal-deep: oklch(72% 0.030 88); /* variante AA-safe p/ leitura longa */

  /* O amarelo verdadeiro sobreviveu em UM lugar só: o traço do osciloscópio,
     que é o momento autoral da marca. Acento raro é o que o torna acento. */
  --color-trace: oklch(83% 0.16 92);
  --color-channel-2: oklch(55% 0.07 220); /* cinza-ciano apagado — traço secundário/visitado */
  --color-danger: oklch(62% 0.19 25); /* erro de formulário/servidor */

  /* ---- Tipografia ---- */
  --font-display: 'Big Shoulders', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, SFMono-Regular, monospace;

  --text-display: clamp(2.75rem, 6vw, 4.75rem);
  --text-headline: clamp(1.75rem, 3.4vw, 2.5rem);
  --text-title: 1.3125rem;
  --text-body: 1rem;
  --text-label: 0.75rem;
  --text-code: 0.9375rem;

  --leading-display: 1.05;
  --leading-headline: 1.1;
  --leading-title: 1.35;
  --leading-body: 1.6;
  --leading-label: 1.4;
  --leading-code: 1.6;

  --tracking-display: -0.01em;
  --tracking-label: 0.04em;

  /* ---- Espaço (unidade base 8px) ---- */
  --space-half: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;

  /* ---- Raio ----
     Revisão 2026-08-04: os containers estruturais deixaram de ser retos. O
     canto reto lia como painel aparafusado — correto para a metáfora, mas
     distante da calma do chatgpt.com, que é a referência pedida. O raio agora
     é progressivo por tamanho de superfície: quanto maior o bloco, mais suave
     o canto. A identidade de instrumento passa a viver na retícula, na
     monoespaçada e no traço amarelo, não na aresta. */
  --radius-none: 0px;
  --radius-sm: 6px;   /* chip, badge, campo pequeno */
  --radius-md: 10px;  /* botão, campo, item de lista */
  --radius-lg: 16px;  /* card, painel, bloco de código */
  --radius-xl: 20px;  /* superfície grande: tela do osciloscópio, card de plano */

  /* ---- Motion: "sweep" (varredura), transform/opacity apenas, ease-out exponencial ---- */
  --ease-sweep: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-sweep: 480ms;
  --duration-fast: 160ms;

  /* ---- Métrica compartilhada ----
     A bancada é larga: o público trabalha em monitor grande com o terminal
     aberto, e as grades da home são de 4 colunas (planos, passos) e 1fr 1fr
     (split, bloco de modelo). Em 1120px cada card de plano ficava com ~250px
     e o painel logado, cujas grades são auto-fit minmax(230px), nunca abria
     a segunda faixa de colunas. A prosa continua contida à parte: medida de
     leitura é responsabilidade do --content-max, não do palco. */
  --topbar-h: 4.5rem;
  --content-max: 768px;
  --stage-max: 1440px;
}

html { scroll-padding-top: var(--topbar-h); }
section[id] { scroll-margin-top: var(--topbar-h); }

/* Respeita prefers-reduced-motion globalmente: motion vira estado final direto. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-sweep: 0ms;
    --duration-fast: 0ms;
  }
}