/* dtls.architecture: design tokens v2 ("prancha de desenho")
   Dono: designer-web. Fonte da verdade: design/design-system.md
   Fontes (Google Fonts): Instrument Serif 400 + italico (titulos), Archivo 400/500/600 (texto e interface),
   IBM Plex Mono 400/500 (anotacoes tecnicas: numeros, cotas, coordenadas). */

:root {
  /* ---- cores ---- */
  --color-bg: #ffffff;            /* branco: fundo geral (v2.1, aprovado pelo Rafael) */
  --color-paper: #f5f5f5;         /* papel: cinza neutro e frio p/ carimbos, cards, form e visualizador (+ linha de 1 px) */
  --color-ink: #131313;           /* nanquim: texto, linhas, faixas */
  --color-ink-muted: #555555;     /* texto secundario: 7.5:1 sobre bg branco, 6.8:1 sobre paper */
  --color-line: #d4d4d4;          /* linhas de grade e divisorias (decorativo; 1.5:1, nao e texto nem borda de campo) */
  --color-line-strong: #858585;   /* bordas de campos: 3.7:1 sobre bg, 3.4:1 sobre paper */
  --color-redline: #d7372a;       /* ACENTO: a "redline" de revisao; ponto do logo, marcas, estado ativo. So grafico e texto grande (4.7:1 sobre bg, 4.3:1 sobre paper) */
  --color-redline-text: #a8281c;  /* redline para texto pequeno: 7.0:1 sobre bg, 6.5:1 sobre paper */
  --color-band: #131313;          /* faixa de impacto (10 anos, rodape) */
  --color-on-band: #f5f5f5;       /* 17.0:1 */
  --color-dot: #131313;           /* o PONTO da dtls (logo, titulos, marcadores, indice): preto */
  --color-dot-on-band: #f5f5f5;   /* o ponto sobre faixa preta */
  --color-on-band-muted: #a39f98; /* 7.1:1 */
  --color-focus: #d7372a;         /* foco = redline (4.7:1 sobre bg, 4.0:1 sobre ink) */

  /* ---- tipografia ---- */
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --weight-text: 400;
  --weight-text-strong: 500;
  --weight-ui: 600;

  --text-mono: 0.75rem;                                   /* 12 px: cotas, numeracao, rotulos */
  --text-sm: 0.9375rem;                                   /* 15 px: menu, ficha, botoes */
  --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17-18 px: corpo */
  --text-lg: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);  /* lead em serif */
  --text-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);     /* h3 / nomes */
  --text-2xl: clamp(2.5rem, 1.7rem + 3.6vw, 5rem);        /* h2 */
  --text-3xl: clamp(3rem, 1.6rem + 6.4vw, 8.5rem);        /* h1 */

  --leading-display: 0.95;
  --leading-snug: 1.15;
  --leading-body: 1.62;
  --tracking-display: -0.015em;
  --tracking-mono: 0.04em;
  --measure: 64ch;

  /* ---- espacos ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* ---- grade ---- */
  --container: 1480px;
  --container-narrow: 720px;
  --gutter: clamp(16px, 3.4vw, 48px);
  --grid-gap: clamp(12px, 1.6vw, 24px);
  --header-h: 64px;
  --sheet-margin: clamp(8px, 1.4vw, 20px); /* margem da "prancha" em volta das fotos de abertura */

  /* ---- formas ---- */
  --radius: 0;            /* tudo reto: prancha, carimbo, botoes */
  --hair: 1px solid var(--color-ink);
  --hair-soft: 1px solid var(--color-line);
  --dot: 0.32em;          /* o ponto do logo usado como marcador */
  --tick: 9px;            /* tamanho das marcas de cota e de corte */
  --tap: 44px;

  /* ---- movimento ---- */
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);  /* "plotter": acelera e freia */
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-draw: 900ms;     /* linhas que se desenham, fotos que se revelam */
  --dur-wipe: 1100ms;    /* troca de slide do hero */

  /* ---- camadas ---- */
  --z-header: 50;
  --z-menu: 80;
  --z-lightbox: 100;
}