/* ============================================================
   TALI TRAVEL — DESIGN TOKENS (v4)
   Talita Karen Trancoso
   Paleta "moderno e de luxo": azul-meia-noite + dourado envelhecido,
   sobre um creme claro e neutro. Ver
   docs/superpowers/specs/2026-07-01-luxury-palette-design.md para o
   racional completo da repaginação.
   Azul-meia-noite = âncora estrutural da marca. Dourado = acento de luxo.
   Cole no topo de qualquer peça front-end (página, guia, roteiro).
   ============================================================ */

/* ---- Fontes ----
   Playfair Display: serifa editorial de alto contraste (voz emocional).
   Archivo: grotesca de agência (rótulos em caixa alta + corpo).
   São as duas únicas famílias da marca. Não importar uma terceira. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Archivo:wght@300;400;500;700;800&display=swap');

:root {
  /* ---- Cores (paleta "azul-meia-noite + dourado") ---- */
  --tt-bg:            #F5EFE4; /* creme claro/neutro — fundo principal */
  --tt-mint:          #FBF8F2; /* papel — fundo de cards pequenos (nome legado mantido, ver --tt-card) */
  --tt-card:          #FBF8F2; /* alias de superfície (papel quase-branco) */
  --tt-border:        #DDCFB4; /* bordas/divisores suaves sobre creme (inputs) */

  --tt-primary:       #0B1F3A; /* azul-meia-noite — âncora estrutural: botões, bordas, foco, links */
  --tt-primary-dark:  #061019; /* navy quase-preto — hover de botão navy */
  --tt-azure:         #0186D5; /* azure SOCIAL — fundo dos posts, headline em card branco (fora de escopo) */
  --tt-azure-deep:    #0270BE; /* azure mais fundo — barra de destaque atrás de palavra (fora de escopo) */

  --tt-gold:          #B08D57; /* dourado envelhecido — acento de luxo: itálico, eyebrow, filete, bordas */
  --tt-gold-soft:     #C7A46E; /* dourado claro — hover de elementos dourados */
  --tt-error:         #B3402E; /* vermelho terroso — única cor funcional de erro (formulário) */

  --tt-text:          #161412; /* quase-preto — texto principal */
  --tt-text-soft:     #54524E; /* cinza neutro — texto secundário */
  --tt-text-on-dark:  #C7C2B8; /* cinza-claro — texto secundário sobre fundo navy */
  --tt-dark:          #0B1F3A; /* fundo de seções escuras — mesmo navy de --tt-primary */

  /* ---- Tipografia ---- */
  --tt-font-display:  'Playfair Display', Georgia, serif;   /* emoção, editorial, citações */
  --tt-font-grotesk:  'Archivo', system-ui, sans-serif;     /* rótulos de seção + corpo */

  /* Pesos. Heavy (800) SOMENTE em rótulos de seção grotescos em CAIXA ALTA.
     A serifa nunca usa peso pesado. */
  --tt-w-light:       300;
  --tt-w-regular:     400;
  --tt-w-medium:      500;
  --tt-w-heavy:       800;

  /* ---- Espaçamento e ritmo ---- */
  --tt-space-xs:      0.5rem;
  --tt-space-sm:      1rem;
  --tt-space-md:      2rem;
  --tt-space-lg:      4rem;
  --tt-space-xl:      6rem;

  --tt-radius:        14px;
  --tt-radius-sm:     8px;

  /* Sombras suaves, nunca duras */
  --tt-shadow:        0 8px 30px rgba(22, 20, 18, 0.10);
  --tt-shadow-soft:   0 4px 16px rgba(22, 20, 18, 0.06);

  --tt-maxw:          1140px;
}

/* ---- Base ---- */
body {
  background: var(--tt-bg);
  color: var(--tt-text);
  font-family: var(--tt-font-grotesk);
  font-weight: var(--tt-w-regular);
  line-height: 1.7;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Headlines emocionais e citações: serifa editorial. */
h1, h2, h3, blockquote {
  font-family: var(--tt-font-display);
  font-weight: var(--tt-w-regular);
  color: var(--tt-text);
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0;
}

h1 { font-size: clamp(2.8rem, 6.5vw, 4.8rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2rem); }

/* Itálico de serifa em dourado: a assinatura emocional + o acento de luxo. */
.tt-em, h1 em, h2 em, blockquote em {
  font-style: italic;
  color: var(--tt-gold);
}
blockquote { font-style: italic; color: var(--tt-text); }

/* Rótulo estrutural de seção: grotesca pesada em caixa alta (cara de agência).
   Quase-preto, como no manual. Usar com parcimônia. */
.tt-title {
  font-family: var(--tt-font-grotesk);
  font-weight: var(--tt-w-heavy);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.0;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--tt-text);
}

/* Eyebrow: grotesca, caixa alta, tracking largo, em dourado de acento. */
.tt-eyebrow {
  font-family: var(--tt-font-grotesk);
  font-weight: var(--tt-w-medium);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.78rem;
  color: var(--tt-gold);
}

/* Filete decorativo: acento de luxo em dourado. */
.tt-rule {
  width: 56px;
  height: 3px;
  background: var(--tt-gold);
  border: 0;
  border-radius: 2px;
  margin: var(--tt-space-sm) 0;
}

a { color: var(--tt-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }