/*
  A PORTA, Desenvolvimento Imobiliário
  design-system/tokens.css

  Arquétipo: tecnico-blueprint (decidido a montante, state.json), executado CONTIDO:
  linhas finas, grade/eixo, numeração, coordenadas, cotas, derivados da geometria da
  logo (quadrado + eixo + folha inclinada). Não é um "blueprint azul" de engenharia,
  é o vocabulário técnico (grid, régua, coordenada) em paleta MONOCROMÁTICA preto/
  branco/pedra, porque o pedido do cliente foi minimalismo. Narrativa: problema.

  Origem da paleta: a LOGO só existe em preto/branco (ver Marca/a_porta_logo_vector.svg
  e os dois PNGs _raw/APorta_Logo_BnW.png e WnB.png, o próprio material de marca já
  é monocromático). Direção de cor confirmada pelo operador: monocromático, sem acento
  vivo. Os tons de pedra/cinza-quente vêm do fundo "creme" da referência RMJ Arquitetura
  (estrutura) e do papel/concreto da referência Somos A Porta (visual).
*/

:root {
  /* ===== COR, papéis (ver design-system.md §2) ===== */
  --c-bg:            #FFFFFF; /* fundo padrão, papel */
  --c-surface:       #F4F2ED; /* pedra clara, alternância de seção, cards, tabelas */
  --c-n200:          #E4E0D7; /* hairline / grade / linhas de cota, a mais clara */
  --c-n400:          #A39C8E; /* cinza-pedra médio, ícones secundários, bordas de input */
  --c-n500:          #6E6A60; /* cinza-pedra texto secundário, legendas, coordenadas */
  --c-text:          #17150F; /* texto principal, quase-preto quente */
  --c-muted:         #6E6A60; /* texto secundário (= --c-n500) */
  --c-white:         #FFFFFF; /* branco absoluto, texto sobre fundo escuro */
  --c-dark:          #15140F; /* seção escura, hero, CTA, rodapé (quase-preto quente) */
  --c-primary:       #15140F; /* base dos CTAs e elementos de destaque, preto quente */
  --c-primary-dark:  #000000; /* hover/pressed do CTA, preto absoluto */
  --c-accent:        #B9B2A2; /* grafismo técnico, linhas de cota/coordenada sobre fundo
                                  escuro; NÃO é cor de marca, é o cinza-pedra mais claro
                                  usado como traço, nunca como preenchimento ou bloco */

  /* ===== TIPOGRAFIA (ver design-system.md §3) ===== */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* títulos, eyebrow */
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;   /* corpo, UI, legendas longas */
  --font-mono:    'IBM Plex Mono', 'SF Mono', monospace;          /* coordenadas, cotas, numeração técnica */

  /* escala, contida (minimalista + blueprint "de régua", não expressiva/gigante) */
  --fs-h1:       clamp(2.25rem, 1.55rem + 3.1vw, 4.25rem);
  --fs-h2:       clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3:       clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
  --fs-lead:     clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-eyebrow:  0.8125rem;

  --lh-tight:    1.08;
  --lh-heading:  1.2;
  --lh-body:     1.6;

  --tr-tight:    -0.01em;  /* tracking de H1/H2 (display) */
  --tr-wide:     0.14em;   /* tracking de eyebrow/mono/numeração, caixa alta */

  --fw-display-regular: 500; /* peso-base dos títulos, "leve", não black/900 */
  --fw-display-strong:  700; /* reservado à ÚNICA palavra de ênfase por bloco */
  --fw-body-regular:    400;
  --fw-body-medium:     500;

  /* ===== ESPAÇO, GRID, RAIO, SOMBRA (ver design-system.md §4) ===== */
  --container:  1200px;
  --px:         clamp(1.25rem, 2.5vw + 0.5rem, 3rem); /* respiro lateral, generoso (minimalismo) */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem; /* respiro entre seções, "muito respiro" é regra do usuário */

  --r-sm:   2px;   /* quase reto, "de prancheta", não bolha */
  --r-md:   4px;
  --r-pill: 999px; /* só para badge/eyebrow redondo, uso raro */

  --shadow-sm: 0 1px 2px rgba(21, 20, 15, 0.06);
  --shadow-md: 0 12px 32px rgba(21, 20, 15, 0.09);

  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --header-h:  84px;

  /* linha técnica (hairline), usada na grade/eixo/cotas, assinatura do arquétipo */
  --line-w: 1px;
  --c-line: var(--c-n200);
  --c-line-on-dark: rgba(247, 246, 243, 0.18);
}