/* ==========================================================================
   I.S. FORTE Construtora e Engenharia — Design Tokens
   Arquétipo: editorial-minimal · Narrativa: prova
   Direção de cor: MONOCROMÁTICO MARINHO (confirmado pelo operador, 29/09/2026)
   Origem: identidade criada a partir da logo (Marca/Logo - I S FORTE 2025.pdf)
           + conteúdo (mindmap, cultura, cartela comercial, transcrições).
           Ver design-system.md §1 para a origem completa.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     COR — escala monocromática extraída da logo (ver design-system.md §2)
     -------------------------------------------------------------------- */

  /* Base / superfícies (off-white de papel, nunca branco puro de tela) */
  --c-bg: #F6F4F0;            /* fundo principal — "papel" editorial */
  --c-bg-soft: #EFECE5;       /* fundo de seção alternada (zebra sutil) */
  --c-surface: #FFFFFF;       /* cards, inputs, superfícies elevadas sobre --c-bg */
  --c-white: #FFFFFF;         /* texto/ícone claro sobre fundo escuro */

  /* Texto */
  --c-text: #1B2A40;          /* corpo de texto — navy suavizado, não preto puro */
  --c-muted: #4B5F7D;         /* texto secundário / legendas / metadados */
  --c-dark: #001632;          /* "navy 900" da logo — texto mais forte, headings, ink */

  /* Marinho — a cor da marca (é o "acento" deste projeto; sem cor viva separada) */
  --c-primary: #1E437F;       /* marinho principal da logo — CTA, links, ícones ativos */
  --c-primary-dark: #001632;  /* navy mais escuro da logo — hover/pressed do CTA, fundos escuros, overlay de hero */
  --c-accent: #163059;        /* navy intermediário da logo (usado no "FORTE" do lockup) — grifos discretos, nunca botão */

  /* Neutros com leve tinta de marinho (nunca cinza puro/genérico) */
  --c-n200: #DEE2E8;          /* hairlines, divisores sobre --c-bg */
  --c-n400: #A9B3C1;          /* placeholders, ícones inativos, bordas de input */
  --c-n500: #6E7C8F;          /* ícones secundários, texto terciário grande */

  /* Cor exclusiva da logo — NUNCA usar na interface (ver design-system.md §2) */
  --c-logo-royal: #3060AD;    /* azul royal do telhado da logo. Fica só na logo. */

  /* --------------------------------------------------------------------
     TIPOGRAFIA — par editorial (display serifado + corpo grotesco), PT-BR ok
     -------------------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala (clamp = fluida entre mobile e desktop) */
  --fs-eyebrow: 0.8125rem;                              /* 13px — caixa alta, tracked */
  --fs-small: 0.875rem;                                 /* 14px */
  --fs-body: 1.0625rem;                                 /* 17px — corpo editorial, respirado */
  --fs-body-lg: 1.1875rem;                              /* 19px — leads/intros */
  --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);     /* 22–30px */
  --fs-h2: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem);   /* 30–46px */
  --fs-h1: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);       /* 40–72px */
  --fs-display: clamp(3rem, 1.4rem + 6.5vw, 6rem);      /* hero gigante, uso pontual */

  --lh-heading: 1.12;
  --lh-body: 1.7;
  --tracking-eyebrow: 0.14em;
  --tracking-heading: -0.01em;

  --fw-display-regular: 400;
  --fw-display-medium: 500;
  --fw-body-regular: 400;
  --fw-body-medium: 500;
  --fw-body-semibold: 600;

  /* --------------------------------------------------------------------
     ESPAÇO, GRID, RAIO, SOMBRA — muito respiro (editorial-minimal)
     -------------------------------------------------------------------- */
  --container: 1200px;
  --px: clamp(1.5rem, 4vw, 4rem);              /* padding lateral responsivo */

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;          /* padding vertical de seção — respiro editorial */

  --r-sm: 2px;                 /* quase reto — editorial não arredonda muito */
  --r-md: 6px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 22, 50, 0.05);
  --shadow-md: 0 16px 40px rgba(0, 22, 50, 0.09);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* deceleração suave, "calma editorial" */
  --header-h: 88px;
}