/* ==========================================================
   tokens.css — variáveis de design
   Paleta: 1 principal (espresso) + 1 destaque (bronze) + neutros.
   Escala mobile-first: os valores crescem com clamp(); ver DESIGN.md
   ========================================================== */
:root {
  /* Principal */
  --espresso: #241812;
  --espresso-2: #2f211a;
  --espresso-3: #3a2a21;

  /* Destaque: só ação, links e indicadores */
  --accent: #82633a;            /* sobre claro, texto marfim 4.8:1 */
  --accent-hover: #6a5030;
  --accent-light: #d4b483;      /* sobre escuro, texto espresso 8.7:1 */
  --accent-light-hover: #e2c89d;
  --gold-line: #b48c57;         /* somente linhas e marcadores */

  /* Neutros */
  --ivory: #f7f2eb;
  --linen: #efe7dc;
  --sand: #e4d8c9;

  /* Texto */
  --text: var(--espresso);
  --text-muted: #6b584b;        /* 5.7:1 sobre marfim */
  --text-on-dark: var(--ivory);
  --text-on-dark-muted: #cdbfb1; /* 9:1 sobre espresso */
  --text-accent: #7a5c35;       /* 5.3:1 sobre marfim */

  /* Linhas */
  --line: rgba(36, 24, 18, 0.14);
  --line-strong: rgba(36, 24, 18, 0.3);
  --line-dark: rgba(212, 180, 131, 0.24);

  /* Texturas (SVG embutido) */
  --noise-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Tipografia: serif editorial × sans moderna */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --font-body: "Jost", "Jost Fallback", "Segoe UI", Arial, sans-serif;

  /* Papéis (mobile → desktop) */
  --fs-h2: clamp(31px, 2.6vw + 22px, 56px);
  --fs-h3: clamp(25px, 1vw + 21px, 32px);
  --fs-stat: clamp(44px, 4.4vw + 28px, 88px);
  --fs-item: clamp(20px, 0.5vw + 18px, 24px);
  --fs-lead: clamp(17px, 0.3vw + 16px, 19px);
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-label: 13px;             /* piso para texto funcional */

  --ls-label: 0.16em;
  --ls-brand: 0.3em;

  /* Espaçamento (base 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --container: 1240px;
  --gutter: 20px;
  --section-pad: clamp(64px, 6vw + 40px, 128px);
  --nav-h: 64px;
  --tap: 44px;                  /* alvo mínimo de toque */

  /* Forma e movimento */
  --radius: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-photo: cubic-bezier(0.22, 1, 0.36, 1);   /* assentar da foto: contínuo, sem tranco */
  --ease-curtain: cubic-bezier(0.65, 0, 0.35, 1); /* cortina: aceleração e frenagem simétricas */
  --dur-fast: 220ms;
  --dur-slow: 600ms;
  --dur-reveal: 1000ms;
}

@media (min-width: 640px) {
  :root { --gutter: 32px; }
}

@media (min-width: 1060px) {
  :root { --gutter: 56px; --nav-h: 80px; }
}