/* ============================================================
   NOITE DE REENCONTRO — Design tokens
   Paleta derivada do key visual: o amanhecer quente (creme) que
   atravessa o rosa e chega ao violeta. Uma única jornada de cor.
   ============================================================ */

:root {
  /* ---- Cor: base ---- */
  --c-cream: #f8eac0;
  --c-cream-soft: #fdf6e4;
  --c-blush: #f4cbe1;
  --c-blush-soft: #fbe7f1;
  --c-lilac: #ddbdee;
  --c-lilac-soft: #f0e2f8;
  --c-violet: #8a3fa0;
  --c-violet-deep: #5c1478;
  --c-plum: #3d0b52;
  --c-white: #ffffff;

  /* ---- Cor: papel e tinta ---- */
  --paper: var(--c-cream-soft);
  --ink: var(--c-plum);
  --ink-soft: color-mix(in srgb, var(--c-plum) 74%, transparent);
  --ink-mute: color-mix(in srgb, var(--c-plum) 55%, transparent);
  --line: color-mix(in srgb, var(--c-plum) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--c-plum) 22%, transparent);

  /* ---- Cor: superfícies ---- */
  --surface: var(--c-white);
  --surface-veil: color-mix(in srgb, var(--c-white) 62%, transparent);
  --surface-tint: color-mix(in srgb, var(--c-white) 55%, var(--c-lilac-soft));

  /* ---- Cor: ação ---- */
  --action: var(--c-violet-deep);
  --action-hover: var(--c-violet);
  --action-ink: var(--c-white);
  --focus: #b0479e;

  /* ---- Tipografia ---- */
  --font: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida — 320px → 1440px */
  --t-display: clamp(2.5rem, 1.35rem + 5.75vw, 5.25rem);
  --t-h1: clamp(2.125rem, 1.2rem + 4.6vw, 4rem);
  --t-h2: clamp(1.625rem, 1.1rem + 2.6vw, 2.75rem);
  --t-h3: clamp(1.25rem, 1.05rem + 1vw, 1.625rem);
  --t-lead: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  /* Tracking — ecoa o letterspacing largo de "NOITE DE" na marca */
  --track-wide: 0.34em;
  --track-mid: 0.14em;
  --track-tight: -0.03em;
  --track-tighter: -0.045em;

  --lh-display: 0.98;
  --lh-title: 1.1;
  --lh-body: 1.65;

  /* ---- Espaço ---- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-s: 1rem;
  --sp-m: 1.5rem;
  --sp-l: 2.25rem;
  --sp-xl: 3.5rem;
  --sp-2xl: 5rem;
  --sp-3xl: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* ---- Medida e grid ---- */
  --measure: 63ch;
  --shell: 1200px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);

  /* ---- Forma ---- */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Sombra: sempre tingida de violeta, nunca cinza ---- */
  --sh-s: 0 1px 2px rgba(61, 11, 82, 0.06), 0 2px 8px rgba(61, 11, 82, 0.05);
  --sh-m: 0 2px 6px rgba(61, 11, 82, 0.05), 0 12px 28px rgba(61, 11, 82, 0.08);
  --sh-l: 0 4px 12px rgba(61, 11, 82, 0.06), 0 28px 64px rgba(61, 11, 82, 0.13);
  --sh-action: 0 6px 18px rgba(92, 20, 120, 0.28);
  --sh-action-hover: 0 10px 30px rgba(92, 20, 120, 0.36);

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 0.72, 0.28, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
  --dur-slow: 900ms;
}

/* No celular o texto de apoio sobe um degrau: a tela é menor, mas a
   leitora é a mesma — e boa parte dela tem 40+. Mexer nos tokens leva
   o ajuste a todos os textos complementares de uma vez. */
@media (max-width: 47.99rem) {
  :root {
    --t-lead: 1.1875rem;
    --t-body: 1.0625rem;
    --t-small: 1rem;
    --t-micro: 0.875rem;
  }
}