/* ==========================================================================
   tokens.css — Design tokens da Landing Page de Diagnóstico (Duo Academy)
   Fonte única de verdade: cores, tipografia, espaçamentos e transições.
   ========================================================================== */

:root {
  /* ── Cores de marca ─────────────────────────────────────────────── */
  --gold: #C8A44E;
  --gold-light: #E8D5A3;
  --gold-dark: #8A6D1F;
  --gold-soft: rgba(200, 164, 78, 0.35);
  --gold-faint: rgba(200, 164, 78, 0.06);

  /* ── Neutros ────────────────────────────────────────────────────── */
  --ink: #1A1A1A;
  --ink-2: #242424;
  --ink-3: #1e1e1e;
  --paper: #FAF7F2;
  --white: #FFFFFF;
  --muted: #5C5A56;
  --muted-2: #6B675F;
  --line: #E8E4DF;

  /* ── Texto sobre fundo escuro ───────────────────────────────────── */
  --on-dark-hi: rgba(255, 255, 255, 0.88);
  --on-dark: rgba(255, 255, 255, 0.78);
  --on-dark-mid: rgba(255, 255, 255, 0.62);
  --on-dark-low: rgba(255, 255, 255, 0.5);
  --on-dark-faint: rgba(255, 255, 255, 0.35);
  --on-dark-line: rgba(255, 255, 255, 0.12);
  --on-dark-line-soft: rgba(255, 255, 255, 0.06);
  --on-dark-line-mid: rgba(255, 255, 255, 0.1);

  /* ── CTA ────────────────────────────────────────────────────────── */
  --cta: #2563EB;
  --cta-shine: rgba(255, 255, 255, 0.65);
  --red-play: rgba(232, 60, 55, 0.92);
  --red-play-solid: rgba(232, 60, 55, 0.9);

  /* ── Semânticos: "é para você" / "não é para você" ──────────────── */
  --green: #2E8B57;
  --green-bg: #EAF4EE;
  --red: #C43D30;
  --red-bg: #F7DEDB;
  --red-card-bg: #FDF0EF;
  --red-line: #E8B4AE;
  --red-heading: #B23A2E;
  --red-dark: #7A342C;

  /* ── WhatsApp ───────────────────────────────────────────────────── */
  --wa: #25D366;
  --wa-ink: #0A3D2C;

  /* ── Tipografia ─────────────────────────────────────────────────── */
  --font-sans: 'Hanken Grotesk', Inter, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --container: 1280px;
  --gutter: clamp(20px, 6vw, 40px);
  --section-pad: 120px;

  /* ── Transições / animação ──────────────────────────────────────── */
  --ease: 0.35s ease;
  --reveal-dur: 0.7s ease-out;
}