/* ------------------------------------------------------------------
   SIMONE PAIXÃO · design tokens
   Conceito "revelar": fotografia P&B que se revela no papel, uma linha
   rosa que desenha o planejamento. Gesso claro de base, rosa-framboesa
   como acento (o "paixão" do nome), tinta no rodapé.
   Regra de imagem: P&B para clima, cor só para o que é real.
   Spectral (display, leve) · Hanken Grotesk (texto) · DM Mono (rótulos).
   ------------------------------------------------------------------ */
:root {
  /* — cor — */
  --gesso: #F3F0EB;
  --gesso-2: #EAE5DE;
  --gesso-3: #DDD6CD;
  --rosa: #F1DEDA;
  --tinta: #1A1618;
  --tinta-2: #231E20;
  --tinta-soft: #3E3739;
  --cinza: #6E6567;
  --cinza-2: #A39A9B;
  --paixao: #C2255C;
  --paixao-2: #9E1A48;
  --paixao-3: #E7A9BC;

  --bg: var(--gesso);
  --fg: var(--tinta);
  --fg-soft: var(--tinta-soft);
  --muted: var(--cinza);
  --hair: rgba(26, 22, 24, .14);
  --accent: var(--paixao);

  /* — tipografia — */
  --font-display: "Spectral", "Iowan Old Style", Georgia, serif;
  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero: clamp(3.1rem, 7.2vw, 8.4rem);
  --fs-display-xl: clamp(3rem, 8.4vw, 9.8rem);
  --fs-display-l: clamp(2.4rem, 5.4vw, 6rem);
  --fs-display-m: clamp(1.8rem, 3.4vw, 3.6rem);
  --fs-display-s: clamp(1.4rem, 2.1vw, 2.15rem);
  --fs-lede: clamp(1.08rem, 1.35vw, 1.32rem);
  --fs-body: clamp(1rem, 1.05vw, 1.07rem);
  --fs-small: .875rem;
  --fs-micro: .72rem;

  --lh-display: 1.02;
  --lh-body: 1.6;
  --tracking-micro: .06em;

  /* — grid — */
  --gutter: clamp(1rem, 2.2vw, 2.25rem);
  --margin: clamp(1.25rem, 5vw, 6rem);
  --measure: 33rem;
  --section-gap: clamp(6rem, 12vw, 12rem);

  /* — motion system — */
  --m-fast: .45s;
  --m-med: .9s;
  --m-slow: 1.6s;
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --ease-editorial: cubic-bezier(.77, 0, .18, 1);
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);

  --z-nav: 50;
  --z-grain: 60;
}

/* base clara; rosa em uma seção, framboesa no CTA, tinta só no rodapé */
[data-theme="light"] { --bg: var(--gesso); }
[data-theme="stone"] { --bg: var(--gesso-2); }
/* no rosa o cinza e a framboesa escurecem um tom para manter 4.5:1 */
[data-theme="blush"] { --bg: var(--rosa); --muted: #5F5658; --accent: var(--paixao-2); --hair: rgba(26, 22, 24, .16); }
[data-theme="accent"] {
  --bg: var(--paixao);
  --fg: var(--gesso);
  --fg-soft: #FBEFF3;
  --muted: #FCEAF0;
  --hair: rgba(243, 240, 235, .32);
  --accent: var(--gesso);
}
[data-theme="dark"] {
  --bg: var(--tinta);
  --fg: var(--gesso);
  --fg-soft: #D8D1CC;
  --muted: var(--cinza-2);
  --hair: rgba(243, 240, 235, .14);
  --accent: var(--paixao-3);
}