/*
  RL Engenharia & Arquitetura — Design System (tokens)
  Origem: identidade CRIADA a partir da logo (navy→azul-aço, monograma "RL" com casinha,
  traço geométrico/diagonal) + conteúdo (mindmap-RL.md: reformas turnkey médio/alto padrão,
  Campos dos Goytacazes/RJ). Não havia manual de marca. Arquétipo: revista-assimétrico.
  Ver design-system.md para as regras de uso (do/don't) de cada token.
*/

:root{
  /* ===== Cor — papel (ver design-system.md §2) ===== */
  --c-bg: #F7F7F7;              /* fundo geral — off-white de respiro (amostrado da arte da marca) */
  --c-surface: #FFFFFF;         /* cards, painéis, blocos elevados sobre --c-bg */
  --c-text: #10202B;            /* texto principal — quase-preto com tinta de navy */
  --c-muted: #5E6B74;           /* texto secundário/legendas — cinza-azulado, nunca cinza puro */
  --c-white: #FFFFFF;           /* texto/ícone sobre superfícies escuras (--c-primary, --c-dark) */
  --c-dark: #0B1B26;            /* fundo escuro — hero, faixa de CTA, footer, overlay de foto */
  --c-primary: #0A3859;         /* navy da marca — âncora de cor (do meio do gradiente da logo) */
  --c-primary-dark: #062338;    /* navy mais escuro — hover/active de botão primário, headline sobre foto clara */
  --c-accent: #306486;          /* azul-aço da marca — acento de assinatura, nunca em bloco grande */
  --c-accent-light: #8CACBF;    /* tint do acento — hairline, ícone discreto, hover de link sobre --c-dark */
  --c-n200: #E1E6E9;            /* neutro claro — hairline/divisor sobre --c-bg */
  --c-n400: #9AA7AD;            /* neutro médio — placeholder, ícone inativo, borda de input */
  --c-n500: #6B7880;            /* neutro escuro — texto de apoio sobre --c-n200/superfícies claras */

  /* ===== Tipografia (ver design-system.md §3) ===== */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;      /* display — headline editorial */
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; /* corpo — humanista, legibilidade */

  /* Escala tipográfica (clamp fluido — usada em preview.html e nos componentes) */
  --fs-display: clamp(2.75rem, 2rem + 4.2vw, 6.5rem);   /* H1 do hero — "display gigante" do arquétipo */
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-eyebrow: clamp(0.75rem, 0.7rem + 0.1vw, 0.8125rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.6;
  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.01em;

  /* ===== Espaço, grid, raio, sombra (ver design-system.md §4) ===== */
  --container: 1240px;
  --px: clamp(20px, 5vw, 64px);           /* respiro lateral — generoso, arquétipo pede ar */
  --space-section: clamp(72px, 9vw, 160px);
  --r-sm: 4px;                              /* inputs, chips, imagens pequenas */
  --r-md: 10px;                             /* cards, botões, blocos de foto */
  --r-pill: 999px;                          /* eyebrow/badge, botão pill quando usado */
  --shadow-sm: 0 1px 3px rgba(10,32,43,.08), 0 1px 2px rgba(10,32,43,.05);
  --shadow-md: 0 20px 48px rgba(10,32,43,.16), 0 4px 12px rgba(10,32,43,.08);
  --ease: cubic-bezier(.16,1,.3,1);         /* easing padrão de transição/entrada */
  --header-h: 88px;
}