/* ============================================================
   CONSTEC — Design System / Tokens
   Origem: portfólio institucional do cliente (PDF de 29 páginas),
   lido COMO IMAGEM + extração de fontes/cores reais do arquivo.
   Nada aqui é default genérico — ver design-system/README.md.
   ============================================================ */

:root {
  /* ---------- Cor — extraída do material da marca ---------- */

  /* Navy institucional — cor dos títulos sobre fundo claro e dos
     blocos-âncora do portfólio. Valor literal do PDF: #1e2a38 / #1d2937 */
  --navy-900: #0B1520;   /* capa, topo de hero  */
  --navy-800: #12202E;
  --navy-700: #1D2937;   /* ★ navy da marca (valor exato do PDF) */
  --navy-600: #2B4563;   /* céu/vidro da capa — usado só em gradiente */
  --navy-500: #3F4C5F;

  /* Greige quente — fundo dominante do portfólio (24 de 29 páginas).
     É o que diferencia: o setor inteiro usa cinza frio ou navy chapado. */
  --greige-100: #E4E1DC;
  --greige-200: #C9C4BC;
  --greige-300: #A8A39B;
  --greige-400: #9A9792;
  --greige-500: #7C766F;  /* ★ greige da marca (valor exato do PDF) */
  --greige-600: #605B53;
  --greige-700: #3A352E;
  --greige-800: #241F19;
  --greige-900: #1C1606;  /* extremo escuro do gradiente original */

  /* Bone — cor do logotipo e de todo o texto sobre fundo escuro.
     Valor literal do PDF: #e9e6e1 */
  --bone: #E9E6E1;        /* ★ */
  --bone-dim: rgba(233, 230, 225, 0.72);
  --bone-faint: rgba(233, 230, 225, 0.16);

  /* ---------- Papéis semânticos ----------
     Direção A (aprovada em 03/08/2026 e ENTREGUE a partir da etapa 10b):
     greige claro DOMINANTE com tinta navy; navy é a âncora (hero, faixas de
     borda, blocos de destaque, card da marca), e só ali a tinta é bone.
     Os papéis abaixo são o estado CLARO. `.surf-navy` e os blocos-ilha navy
     redefinem os mesmos nomes localmente, e o resto do CSS não precisa saber
     em que superfície está. */
  --bg:            var(--greige-300);  /* fundo dominante, claro    */
  --bg-deep:       var(--navy-900);
  --bg-alt:        var(--greige-100);
  --surface:       var(--greige-400);
  --ink:           var(--bone);        /* texto sobre fundo escuro  */
  --ink-invert:    var(--navy-700);    /* texto sobre fundo claro   */
  --ink-muted:     var(--bone-dim);
  --ink-strong:    var(--bone);        /* filete/linha de assinatura */
  --rule:          var(--bone-faint);  /* filetes/hairlines         */
  --anchor:        var(--navy-700);    /* bloco/faixa âncora        */

  /* Estados */
  --focus:      #C9C4BC;
  --success:    #4F6B52;
  --danger:     #8C4A3F;

  /* ---------- Tipografia ----------
     Display real da marca: Horizon Bold (embutida no PDF, licença não
     fornecida). Substituto documentado: Archivo (variável, eixo de largura)
     em caixa alta + tracking aberto — mesma proporção larga e geométrica.
     Texto: Open Sans — é a fonte real do material, disponível no Google Fonts. */
  --font-display: 'Archivo', 'Archivo Expanded', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, sans-serif;

  --display-stretch: 112%;
  --display-weight: 700;
  --display-track: 0.06em;   /* o portfólio usa tracking largo em caps */

  /* Escala — passo 1.28, ancorada em 16px, fluida via clamp */
  --fs-hero:  clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem);
  --fs-h1:    clamp(2.1rem, 1.4rem + 3.0vw, 3.8rem);
  --fs-h2:    clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --fs-lead:  clamp(1.06rem, 1rem + 0.4vw, 1.28rem);
  --fs-body:  1rem;
  --fs-sm:    0.9rem;
  --fs-xs:    0.78rem;

  --lh-tight: 1.04;
  --lh-head:  1.14;
  --lh-body:  1.62;

  /* ---------- Espaço — escala de 4px, com muito respiro ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 176px;

  --section-y: clamp(72px, 9vw, 176px);
  --gutter:    clamp(20px, 5vw, 72px);
  --maxw:      1280px;
  --maxw-text: 68ch;

  /* ---------- Forma ----------
     O portfólio NÃO usa cantos arredondados: imagens e blocos são
     retângulos duros que sangram na borda. O raio fica quase em zero. */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --hairline: 1px;

  /* ---------- Elevação — sombra baixa e fria, sem "card flutuante" ---------- */
  --sh-1: 0 1px 2px rgba(11, 21, 32, 0.16);
  --sh-2: 0 12px 32px rgba(11, 21, 32, 0.22);
  --sh-media: 0 24px 60px rgba(11, 21, 32, 0.34);

  /* ---------- Movimento — nativo, sem inércia ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 620ms;
}

/* SUPERFÍCIE DOMINANTE — greige claro do miolo do portfólio, com a luz
   vindo do canto superior direito. Nunca chapado.
   POR QUE ESTE PISO, por cálculo (WCAG, medido no harness):
   · navy #1D2937 sobre greige-500 #7C766F (★)   = 3,30:1  → reprova corpo
   · navy #1D2937 sobre greige-400 #9A9792       = 4,99:1  → passa raspando,
     mas qualquer tinta secundária (rgba do --ink-muted) cai para 3,8:1
   · navy #1D2937 sobre greige-300 #A8A39B       = 5,80:1, e o --ink-muted
     a 88% ainda fecha 4,71:1
   Por isso o piso é o `--greige-300`. A etapa 6 concluiu o contrário e
   ESCURECEU a superfície para ganhar contraste; o portfólio do cliente
   resolve com TINTA ESCURA sobre o greige claro (pg04, pg08). Clarear,
   nunca escurecer.
   O ★ #7C766F continua pintado onde não carrega texto: o traço do wireframe
   (`--tex-line`) e o fundo de toda caixa de mídia. */
.surf-greige {
  background:
    radial-gradient(112% 84% at 82% 6%, var(--greige-100) 0%, transparent 58%),
    linear-gradient(158deg, var(--greige-200) 0%, var(--greige-300) 100%);
  color: var(--ink-invert);
  --ink:        var(--navy-700);
  --ink-muted:  rgba(29, 41, 55, 0.88);
  --ink-strong: var(--navy-700);
  --rule:       rgba(29, 41, 55, 0.24);
  --focus:      var(--navy-800);
}
.surf-navy {
  background:
    radial-gradient(100% 70% at 86% 22%, var(--navy-600) 0%, transparent 60%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: var(--ink);
  --ink:        var(--bone);
  --ink-muted:  var(--bone-dim);
  --ink-strong: var(--bone);
  --rule:       var(--bone-faint);
  --focus:      #C9C4BC;
}

/* ---------- Primitivos tipográficos ---------- */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: uppercase;
  letter-spacing: var(--display-track);
  line-height: var(--lh-head);
}
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
}
.t-body { font-family: var(--font-body); line-height: var(--lh-body); }