/* ==========================================================================
   Freire Advogados — tokens (v2, direção editorial)
   Marfim + carvão + um metal discreto tirado do dourado da logo.
   ========================================================================== */

/* Papéis registrados: assim a troca de tom entre seções INTERPOLA em vez de saltar */
@property --bg{syntax:'<color>';inherits:true;initial-value:#F1ECE3}
@property --bg-2{syntax:'<color>';inherits:true;initial-value:#E8E1D6}
@property --fg{syntax:'<color>';inherits:true;initial-value:#1A1916}
@property --fg-2{syntax:'<color>';inherits:true;initial-value:#4F4A43}
@property --fg-3{syntax:'<color>';inherits:true;initial-value:#6F685E}
@property --line{syntax:'<color>';inherits:true;initial-value:rgba(26,25,22,.14)}
@property --accent{syntax:'<color>';inherits:true;initial-value:#7A6443}
@property --btn-bg{syntax:'<color>';inherits:true;initial-value:#1A1917}
@property --btn-fg{syntax:'<color>';inherits:true;initial-value:#F1ECE3}

:root{
  /* Marca */
  --fa-gold:#C8A070;     /* dourado da logo: só no monograma do cabeçalho e no favicon */
  --metal:#B49B76;       /* metal rebaixado para fundo escuro (7:1 sobre carvão) */
  --metal-ui:#7A6443;    /* metal para texto sobre marfim (4,8:1) */

  /* Marfim */
  --ivory-0:#F8F5EF;
  --ivory-1:#F1ECE3;
  --ivory-2:#E8E1D6;
  --ivory-3:#D9D0C2;
  /* Carvão */
  --char-0:#121110;
  --char-1:#1A1917;
  --char-2:#23211E;
  --char-3:#2F2C28;
  /* Texto */
  --ink-1:#1A1916;  --ink-2:#4F4A43;  --ink-3:#6F685E;     /* sobre marfim: 15:1, 7,6:1, 4,7:1 */
  --paper-1:#EEE9E0; --paper-2:#B7B0A4; --paper-3:#8A8377; /* sobre carvão: 16:1, 8,8:1, 5:1 */

  /* Papéis — tom claro */
  --bg:var(--ivory-1);
  --bg-2:var(--ivory-2);
  --fg:var(--ink-1);
  --fg-2:var(--ink-2);
  --fg-3:var(--ink-3);
  --line:rgba(26,25,22,.14);
  --accent:var(--metal-ui);
  --btn-bg:var(--char-1);
  --btn-fg:var(--ivory-1);

  /* Tipografia */
  --f-display:"Newsreader","Iowan Old Style","Times New Roman",serif;
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --f-mark:"Cinzel","Newsreader",serif;

  --t-label:.74rem;
  --t-sm:.92rem;
  --t-base:1.0625rem;
  --t-md:clamp(1.08rem,1rem + .35vw,1.28rem);
  --t-h3:clamp(1.45rem,1.2rem + 1vw,2.05rem);
  --t-statement:clamp(1.85rem,1.15rem + 2.7vw,3.75rem);
  --t-h2:clamp(2.4rem,1.4rem + 3.9vw,5.2rem);
  --t-hero:clamp(3rem,1.1rem + 6.6vw,8rem);
  --t-giant:clamp(2.2rem,.9rem + 5.2vw,6.4rem);

  /* Espaço e grade */
  --gutter:clamp(1.1rem,.4rem + 2.8vw,3rem);
  --maxw:1360px;
  --side:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  --gap:clamp(1rem,.5rem + 1.6vw,1.75rem);
  --section:clamp(5rem,3.2rem + 7vw,10rem);
  --hd-h:84px;

  /* Tempo: três durações, três curvas — nada fora disto */
  --dur-fast:.24s;
  --dur-base:.6s;
  --dur-slow:1.2s;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-soft:cubic-bezier(.33,.86,.38,1);

  color-scheme:light;
}

/* Tom escuro: troca só os PAPÉIS. Vale para seções fixas, para o cabeçalho
   sobre fundo escuro e para o grupo de seções que muda de tom com a rolagem. */
.is-dark,
.hd.on-dark,
.tones:not(.tone-on) [data-tone="dark"],
.tones.tone-on[data-cur="dark"]{
  --bg:var(--char-0);
  --bg-2:var(--char-2);
  --fg:var(--paper-1);
  --fg-2:var(--paper-2);
  --fg-3:var(--paper-3);
  --line:rgba(238,233,224,.13);
  --accent:var(--metal);
  --btn-bg:var(--ivory-1);
  --btn-fg:var(--char-1);
  color-scheme:dark;
}
.tones.tone-on[data-cur="light"]{
  --bg:var(--ivory-1);
  --bg-2:var(--ivory-2);
  --fg:var(--ink-1);
  --fg-2:var(--ink-2);
  --fg-3:var(--ink-3);
  --line:rgba(26,25,22,.14);
  --accent:var(--metal-ui);
  --btn-bg:var(--char-1);
  --btn-fg:var(--ivory-1);
}
.is-dark,
.tones:not(.tone-on) [data-tone]{background:var(--bg);color:var(--fg)}
.tones.tone-on{
  background:var(--bg);color:var(--fg);
  transition:--bg .9s var(--ease-io),--bg-2 .9s var(--ease-io),--fg .9s var(--ease-io),--fg-2 .9s var(--ease-io),--fg-3 .9s var(--ease-io),--line .9s var(--ease-io),--accent .9s var(--ease-io),--btn-bg .9s var(--ease-io),--btn-fg .9s var(--ease-io);
}