/* ============================================================
   MÚLTIPLO — Design Tokens v1.0
   Fonte: Manual Grupo HP v1 (mar/2026), págs. 60–66
   + Paleta de Cores Múltiplo 4.pdf + renders oficiais
   Extraído em 2026-08-20 via /design-sync
   ============================================================ */

:root {
  /* ---------- CORES OFICIAIS (Manual pág. 64) ---------- */
  /* Azul Profundo — Pantone 2965 C — CMYK 80/35/0/85 */
  --mult-azul-profundo: #081C2B;
  /* Preto — Pantone Black C — CMYK 5/5/5/100 */
  --mult-preto: #000000;
  /* Azul Múltiplo — Pantone 7693 C — CMYK 75/35/0/60 */
  --mult-azul: #173F63;
  /* Amarelo Doca — Pantone 7409 C — CMYK 0/25/75/5 */
  --mult-amarelo-doca: #F5BD42;
  /* Branco */
  --mult-branco: #FFFFFF;

  /* ---------- CORES DERIVADAS (extraídas das aplicações oficiais) ---------- */
  /* Areia — fundo claro dos renders oficiais do logo (não faz parte
     da paleta-núcleo; usar como superfície de respiro) */
  --mult-areia: #FFF4EB;
  /* Estados e apoios — derivados, não constam no manual */
  --mult-amarelo-hover: #E4A82A;
  --mult-azul-hover: #1E4F7C;
  --mult-texto-secundario: #46586B;
  --mult-linha: rgba(8, 28, 43, 0.14);
  --mult-linha-escura: rgba(255, 255, 255, 0.18);

  /* ---------- PAPÉIS SEMÂNTICOS ---------- */
  --bg-page: var(--mult-branco);
  --bg-soft: var(--mult-areia);
  --bg-dark: var(--mult-azul-profundo);
  --ink: var(--mult-azul-profundo);
  --ink-secondary: var(--mult-texto-secundario);
  --ink-on-dark: var(--mult-branco);
  --accent: var(--mult-amarelo-doca);
  --accent-ink: var(--mult-azul-profundo); /* texto sobre amarelo */

  /* ---------- TIPOGRAFIA (Manual pág. 65 — Raleway, sem exceções) ---------- */
  --font-brand: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  /* Pesos oficiais: Thin 100 · Light 300 · Regular 400 ·
     Medium 500 · Semibold 600 · Bold 700 */
  --fs-display: 56px;   --lh-display: 1.08;  /* Bold, tracking -1% */
  --fs-h1: 44px;        --lh-h1: 1.12;       /* Bold */
  --fs-h2: 34px;        --lh-h2: 1.18;       /* Bold */
  --fs-h3: 25px;        --lh-h3: 1.25;       /* Semibold */
  --fs-h4: 20px;        --lh-h4: 1.3;        /* Semibold */
  --fs-body-lg: 18px;   --lh-body-lg: 1.6;   /* Regular */
  --fs-body: 16px;      --lh-body: 1.6;      /* Regular */
  --fs-small: 14px;     --lh-small: 1.5;     /* Regular/Medium */
  --fs-overline: 12px;  --lh-overline: 1.4;  /* Semibold, caps, +14% tracking
                                                (eco da tagline "UMA EMPRESA DO GRUPO HP") */
  --ls-overline: 0.14em;
  --ls-tight: -0.01em;

  /* ---------- ESPAÇAMENTO — grade de 8px ("módulos") ---------- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-12: 96px;

  /* ---------- FORMA — precisão industrial ---------- */
  --radius-sm: 4px;    /* botões, inputs, tags */
  --radius-md: 8px;    /* cards */
  --radius-pill: 999px;/* badges de status */
  --border: 1px solid var(--mult-linha);

  /* ---------- ELEVAÇÃO — sombra tingida de azul profundo ---------- */
  --shadow-sm: 0 1px 3px rgba(8, 28, 43, 0.08);
  --shadow-md: 0 6px 20px rgba(8, 28, 43, 0.10);
  --shadow-lg: 0 16px 44px rgba(8, 28, 43, 0.16);
}

/* ---------- MOTIVO DA MARCA: "linha de telhado" ----------
   O símbolo é formado por 3 volumes com topo inclinado.
   Use o corte diagonal como assinatura em imagens e blocos. */
.roofline {
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}
.roofline-invert {
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}