/* GERADO por marca/build-tokens.mjs a partir de marca/tokens.json (1.0 - 2026-09-18). Não edite: mude o JSON e rode o script.
   Marca Pedro Strapasson. As fontes são procuradas em ../fontes/ (copie build/ e fontes/ lado a lado).
   Escuro: segue o sistema; force com data-theme="dark" ou "light" em qualquer elemento. */
@font-face { font-family: 'Host Grotesk'; src: url('../fontes/HostGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Host Grotesk'; src: url('../fontes/HostGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Host Grotesk'; src: url('../fontes/HostGrotesk-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fontes/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fontes/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* paleta (nomes da marca) */
  --gelo: #F2F3F1;
  --superficie: #FBFBFA;
  --grafite: #16181B;
  --aco: #5F656C;
  --trilho: #D5D8D6;
  --vermelho-sinal: #E0321F;
  --vermelho-tinta: #B3200F;
  --fundo-escuro: #16181B;
  --superficie-escura: #1F2226;
  --fio-escuro: #30343A;
  --texto-claro: #F2F3F1;
  --aco-claro: #9AA0A6;
  --sinal-claro: #FF5A45;
  /* papéis: use estes na interface */
  --bg: var(--gelo);
  --surface: var(--superficie);
  --ink: var(--grafite);
  --ink-muted: var(--aco);
  --line: var(--trilho);
  --signal: var(--vermelho-sinal);
  --signal-text: var(--vermelho-tinta);
  --on-signal: #FFFFFF; /* único texto permitido sobre o Vermelho Sinal */

  --font-sans: 'Host Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --weight-display: 500;
  --weight-text: 400;
  --weight-strong: 600;
  --tracking-display: -0.02em;
  --leading-display: 1.05;
  --leading-text: 1.55;
  --tracking-label: 0.06em;

  /* espaço, base 4 px: --space-6 = 24px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-tag: 2px;
  --radius-control: 4px;
  --radius-card: 6px;
  --radius-panel: 8px;

  --grid-module: 96px;
  --grid-line: 1px;
  --grid-gutter: 24px;
  --grid-margin: 64px;
  --grid-margin-mobile: 16px;
  --grid-columns: 12;
  --grid-columns-tablet: 8;
  --grid-columns-mobile: 4;

  --motion-step: 120ms; /* uma célula acesa por vez, liga e desliga seco */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--fundo-escuro);
    --surface: var(--superficie-escura);
    --ink: var(--texto-claro);
    --ink-muted: var(--aco-claro);
    --line: var(--fio-escuro);
    --signal: var(--vermelho-sinal);
    --signal-text: var(--sinal-claro);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--fundo-escuro);
  --surface: var(--superficie-escura);
  --ink: var(--texto-claro);
  --ink-muted: var(--aco-claro);
  --line: var(--fio-escuro);
  --signal: var(--vermelho-sinal);
  --signal-text: var(--sinal-claro);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--gelo);
  --surface: var(--superficie);
  --ink: var(--grafite);
  --ink-muted: var(--aco);
  --line: var(--trilho);
  --signal: var(--vermelho-sinal);
  --signal-text: var(--vermelho-tinta);
}