/* ==========================================================================
   Kanzler House — tokens do sistema de design
   Especificação: ../../DESIGN.md    Versão narrativa: ../../manual-marca.html
   ========================================================================== */

/* Fontes servidas por nós. Ver fontes.css — carregar da Google enviava o IP
   de cada visitante para os EUA sem consentimento e sem necessidade. */
@import url('fontes.css');

:root{
  /* --- escuro: o padrão da marca --- */
  --navy:#0C1321;
  --void:#0C1321;      /* alias legado — usar --navy */
  --surface:#16233C;
  --bone:#F5F2EC;
  --mute:#98A1A9;
  --champagne:#E3C08A;
  --line:rgba(245,242,236,.12);

  /* --- documental: impressos, contratos, papelaria --- */
  --paper:#FDFCFA;
  --umber:#6E675D;
  --bronze:#8A6A3B;          /* o champagne do papel */
  --line-doc:rgba(7,9,11,.14);

  /* --- tipografia --- */
  --sans:'Inter Tight', system-ui, -apple-system, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;

  /* --- ritmo --- */
  --pad:clamp(1.6rem,5.2vw,6.5rem);
  --ease:cubic-bezier(.16,.84,.32,1);
}

/* ==========================================================================
   Base — modo escuro (padrão)
   ========================================================================== */

body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--champagne);color:var(--void)}

/* Títulos — Instrument Serif. O itálico é a palavra de ênfase, e leva champagne. */
h1,h2{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.08;
}
h1{font-size:clamp(2.6rem,8vw,6.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h1 em,h2 em{font-style:italic;color:var(--champagne)}

h3{font-size:1rem;font-weight:600;letter-spacing:.02em}

p{max-width:44rem}
.lead{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:46rem}
.muted{color:var(--mute)}
b,strong{font-weight:500;color:var(--bone)}   /* nunca 700 no corpo */

/* Rótulo — Inter Tight 600 caps espaçado */
.label{
  font-size:.72rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--mute);
}

/* Filete de secção — a mesma linguagem da laje do logotipo */
.rule{
  height:1px;border:0;
  background:linear-gradient(90deg,
    rgba(227,192,138,0) 0%,
    rgba(227,192,138,.7) 12%,
    rgba(227,192,138,.7) 88%,
    rgba(227,192,138,0) 100%);
}

/* ==========================================================================
   Modo documental — aplicar .doc no contentor a imprimir
   ========================================================================== */

.doc{
  background:var(--paper);
  color:var(--void);
}
.doc .muted{color:var(--umber)}
.doc b,.doc strong{color:var(--void);font-weight:600}
.doc h1 em,.doc h2 em{color:var(--bronze)}
.doc .label{color:var(--umber)}
.doc .rule{
  background:linear-gradient(90deg,
    rgba(138,106,59,0) 0%,
    rgba(138,106,59,.75) 12%,
    rgba(138,106,59,.75) 88%,
    rgba(138,106,59,0) 100%);
}

/* ==========================================================================
   Lockup — só para render em texto vivo (web).
   Para qualquer peça final usar os SVGs oficiais desta pasta.
   ========================================================================== */

.lockup{
  --laje:227,192,138;         /* champagne */
  --laje-a:.7;
  display:inline-flex;flex-direction:column;align-items:stretch;
  font-family:var(--sans);color:var(--bone);
}
.lockup .l1{
  font-weight:600;font-size:2.7rem;
  letter-spacing:.28em;margin-right:-.28em;white-space:nowrap;
}
.lockup .l2{
  display:flex;justify-content:space-between;
  font-weight:300;font-size:1.02rem;      /* ~38% de .l1 */
  padding:.5em 15% 0;                      /* 70% centrais */
  margin-top:.5em;position:relative;
}
.lockup .l2::before{                       /* a laje, com esvanecimento 12% */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    rgba(var(--laje),0) 0%,
    rgba(var(--laje),var(--laje-a)) 12%,
    rgba(var(--laje),var(--laje-a)) 88%,
    rgba(var(--laje),0) 100%);
}
.lockup--institucional .l2{color:var(--champagne)}

/* documental */
.doc .lockup,.lockup--doc{--laje:138,106,59;--laje-a:.75;color:var(--void)}
.doc .lockup--institucional .l2,.lockup--doc.lockup--institucional .l2{color:var(--bronze)}