/* ==========================================================================
   História Cantada — tokens de design
   Fonte única de cor, tipografia, espaço, raio e sombra.
   Mudar aqui muda o site inteiro.
   ========================================================================== */

:root {
  /* --- superfícies ------------------------------------------------------ */
  --bg:            #FBF8F3;  /* creme off-white */
  --bg-warm:       #F6F0E6;  /* faixas alternadas */
  --surface:       #FFFFFF;  /* cards */
  --border:        #E8E1D6;  /* separador decorativo entre blocos */
  /* Borda de elemento interativo (campo, opção não marcada, chip de filtro).
     Precisa de 3:1 contra o fundo: é ela que diz onde o campo começa e
     termina. O tom claro anterior (#D8CDBB) dava 1.5:1 e sumia. */
  --border-strong: #9A8871;

  /* --- texto ------------------------------------------------------------ */
  --ink:           #231F20;  /* 15.4:1 sobre --bg */
  --ink-muted:     #6B6560;  /* 5.2:1 sobre --bg  */
  --ink-invert:    #FFFFFF;

  /* --- dourado: dois papéis distintos -----------------------------------
     --gold      -> PREENCHIMENTO (botão, barra). Contraste ~2.3:1: nunca
                    carrega texto nem borda que precise ser percebida.
     --gold-ink  -> TEXTO e BORDAS em dourado. 5.1:1 sobre --bg.
     ---------------------------------------------------------------------- */
  --gold:          #C8A24A;
  --gold-strong:   #B8912F;  /* hover do preenchimento */
  --gold-ink:      #8A6512;
  --gold-soft:     #FDF6E7;  /* fundo de item selecionado */

  /* --- semânticos ------------------------------------------------------- */
  --green:         #17693B;  /* Pix, segurança, WhatsApp — 6.1:1 sobre branco */
  --green-soft:    #E8F3EC;
  --wine:          #6B1F2E;  /* player */
  --wine-deep:     #4A1420;
  --danger:        #B3261E;
  --danger-soft:   #FDECEA;

  /* --- tipografia ------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:   0.8125rem;  /* 13px — rótulos, eyebrow */
  --text-sm:   0.875rem;   /* 14px — apoio */
  --text-base: 1rem;       /* 16px — corpo (mínimo absoluto) */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.625rem;   /* 26px */
  --text-3xl:  2rem;       /* 32px */

  --leading-tight: 1.2;
  --leading-body:  1.6;

  /* --- espaçamento: escala de 4px --------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* --- raios ------------------------------------------------------------ */
  --radius-field: 12px;
  --radius-card:  20px;
  --radius-pill:  999px;

  /* --- sombras ---------------------------------------------------------- */
  --shadow-card:  0 2px 8px rgba(35, 31, 32, .06);
  --shadow-lift:  0 8px 24px rgba(35, 31, 32, .10);
  --shadow-float: 0 6px 20px rgba(35, 31, 32, .18);

  /* --- layout ----------------------------------------------------------- */
  --container-wide:   1120px;  /* landing */
  --container-funnel: 520px;   /* formulário em diante */

  /* --- movimento -------------------------------------------------------- */
  --ease-enter: cubic-bezier(0, 0, .2, 1);   /* ease-out */
  --ease-exit:  cubic-bezier(.4, 0, 1, 1);   /* ease-in  */
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   300ms;

  /* --- camadas ---------------------------------------------------------- */
  --z-header:   40;
  --z-float:    60;
  --z-overlay: 100;
}

/* Tamanhos maiores a partir de tablet. Só os títulos crescem — o corpo
   permanece em 16px porque já é o tamanho confortável de leitura. */
@media (min-width: 768px) {
  :root {
    --text-2xl: 2.25rem;  /* 36px */
    --text-3xl: 3rem;     /* 48px */
  }
}