/* ==========================================================================
   01 · TOKENS (variáveis de design)
   --------------------------------------------------------------------------
   Altere cores, fontes e espaçamentos AQUI: todo o resto do CSS usa estas
   variáveis. Cores extraídas do KV oficial:
     lettering #EDCB7D → #F6E8C7 · lua Sleep House #CF9C00
     travesseiros #925518 · cinza do logotipo #657582
   ========================================================================== */

:root {
  /* ---- Superfícies escuras (base da campanha) ---- */
  --ink-950: #0b0a09; /* preto quente — fundo principal */
  --ink-900: #12100e;
  --ink-850: #191613;
  --ink-800: #211d19;
  --ink-700: #2e2923;
  --ink-600: #423b33;

  /* ---- Superfícies claras ---- */
  --cream-50: #fcfaf5;
  --cream-100: #f6f0e4;
  --cream-200: #ebe2d0;
  --cream-300: #dccfb6;

  /* ---- Dourados ---- */
  --gold-100: #fbf5e6;
  --gold-200: #f6e8c7; /* champagne do lettering */
  --gold-300: #edcb7d; /* dourado do lettering — botão principal */
  --gold-400: #dfb45a;
  --gold-500: #cf9c00; /* lua do logotipo */
  --gold-700: #7f5c0a; /* dourado para TEXTO sobre fundo claro (contraste AA) */
  --copper: #925518; /* luz quente dos travesseiros */

  /* ---- Texto ---- */
  --text-on-dark: #f6f0e4;
  --text-on-dark-muted: #bdb2a1;
  --text-on-dark-subtle: #948a7b;
  --text-on-light: #15120f;
  --text-on-light-muted: #4d463d;

  /* ---- Estados (versão clara = sobre escuro; "-ink" = sobre claro) ---- */
  --success: #8fd1a6;
  --success-ink: #1f6b41;
  --warning-ink: #855400;
  --danger: #f3a093;
  --danger-ink: #a3261b;
  --info-ink: #2b5a8a;

  /* ---- Linhas finas ---- */
  --line-dark: rgb(246 232 199 / 0.15); /* sobre fundo escuro */
  --line-light: rgb(21 18 15 / 0.12); /* sobre fundo claro */

  /* ---- Tipografia ---- */
  --font-display: var(--font-heading); /* antes era uma serifa; hoje a página usa só Montserrat */
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; /* títulos das seções */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-body: 1rem; /* 16px */
  --fs-body-lg: 1.0625rem; /* 17px */
  --fs-small: 0.875rem; /* 14px */
  --fs-xs: 0.8125rem; /* 13px */
  --fs-h2: clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem); /* títulos de seção */
  --fs-h3: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);

  /* ---- Espaçamento ---- */
  --space-section: clamp(6rem, 4rem + 6vw, 10rem); /* respiro vertical das seções */
  --gutter: 1.25rem; /* margem lateral no celular */
  --container-max: 88rem;

  /* ---- Raios ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* ---- Movimento ---- */
  --ease-silk: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 800ms;

  /* ---- Alturas fixas ---- */
  --demo-bar-h: 0px; /* vira 2.25rem quando a faixa demo está visível */
  --top-bar-h: 2.875rem; /* faixa preta do topo: 2 linhas no celular */
  --header-h: 4rem;
}

/* Tablet e acima */
@media (min-width: 48rem) {
  :root {
    --gutter: 2.5rem;
  }
}

/* Faixa do topo em 1 linha a partir de 640px */
@media (min-width: 40rem) {
  :root {
    --top-bar-h: 2.25rem;
  }
}

/* Desktop */
@media (min-width: 64rem) {
  :root {
    --header-h: 5rem;
  }
}

@media (min-width: 80rem) {
  :root {
    --gutter: 4rem;
  }
}