/* ------------------------------------------------------------------
   QUEZIA MACHADO · design tokens
   Conceito "de perto": a lupa, o marca-texto e o foco, ferramentas de
   quem estuda a pele. Base creme, tinta cacau, mel (o dourado do logo
   dela) como acento e papel de caderno numa seção. Cacau só no rodapé.
   Instrument Serif (display, com itálico) · Figtree (texto e rótulos).
   ------------------------------------------------------------------ */
:root {
  /* — cor — */
  --creme: #F5EEE6;
  --creme-2: #ECE2D6;
  --papel: #F6EACD;
  --cacau: #2A1911;
  --cacau-2: #3B2519;
  --cacau-soft: #57402F;
  --terra: #7A6453;
  --mel: #C58B2B;
  --mel-escuro: #8A5A12;
  --mel-claro: #F0D59C;

  --bg: var(--creme);
  --fg: var(--cacau);
  --fg-soft: var(--cacau-soft);
  --muted: var(--terra);
  --hair: rgba(42, 25, 17, .15);
  --accent: var(--mel-escuro);
  --marker: var(--mel-claro);

  /* — tipografia — */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-text: "Figtree", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(3.3rem, 8.2vw, 9.6rem);
  --fs-display-xl: clamp(3.2rem, 9vw, 11rem);
  --fs-display-l: clamp(2.5rem, 5.6vw, 6.6rem);
  --fs-display-m: clamp(1.9rem, 3.4vw, 3.8rem);
  --fs-display-s: clamp(1.45rem, 2.1vw, 2.2rem);
  --fs-lede: clamp(1.08rem, 1.3vw, 1.28rem);
  --fs-body: clamp(1rem, 1.05vw, 1.06rem);
  --fs-small: .875rem;
  --fs-label: .74rem;

  --lh-display: .98;
  --lh-body: 1.6;

  /* — grid — */
  --gutter: clamp(1rem, 2.2vw, 2.25rem);
  --margin: clamp(1.25rem, 5vw, 6rem);
  --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;
}

[data-theme="light"] { --bg: var(--creme); }
[data-theme="stone"] { --bg: var(--creme-2); }
/* papel de caderno: o marca-texto ganha um tom a mais para aparecer */
[data-theme="paper"] { --bg: var(--papel); --hair: rgba(42, 25, 17, .17); --marker: #E9BF6A; }
[data-theme="dark"] {
  --bg: var(--cacau);
  --fg: var(--creme);
  --fg-soft: #DCCFC2;
  --muted: #B39F8E;
  --hair: rgba(245, 238, 230, .14);
  --accent: var(--mel-claro);
  --marker: rgba(197, 139, 43, .45);
}