/* ==========================================================================
   TOKENS — a única fonte de verdade de cor, tipografia, espaço e ritmo.
   Mexa aqui para re-tematizar a página inteira (ex.: virar a LP de Natal).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes (auto-hospedadas em assets/fonts — nada de CDN externo)
   -------------------------------------------------------------------------- */

/* Story Script — o kicker "HALLOWEEN 2026 . KARAZAN". Subset de caixa alta
   e numerais: 14 KB. Veio do arquivo que o proprio Wix serve. */
@font-face {
  font-family: 'Story Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/story-script-latin.woff2') format('woff2');
}

/* Trade Winds — títulos de seção. Mesma da versão Wix. */
@font-face {
  font-family: 'Trade Winds';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/trade-winds-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kalam — a fonte de CORPO do site. Conferido no Wix: todo o texto corrido,
   menu, listas, informações e rodapé usam esta manuscrita — não há Montserrat
   em lugar nenhum lá. Subset latino completo com acentos do português: 17 KB. */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kalam-latin.woff2') format('woff2');
}

/* Ampersand — rótulos da contagem regressiva (DIAS/HORAS/MINUTOS/SEGUNDOS).
   Veio do próprio embed do Wix; subset de caixa alta + números: 4,4 KB. */
@font-face {
  font-family: 'Ampersand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ampersand-latin.woff2') format('woff2');
}

/* Lethal Craze Slanted — pinceladas de terror. Subset só com os glifos usados. */
@font-face {
  font-family: 'Lethal Craze';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lethal-craze-latin.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Variáveis
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* ---- Cores: fundos ---- */
  --c-void:      #0C062B;   /* o mais escuro — rodapé, vinhetas */
  --c-night:     #120636;   /* faixa escura */
  --c-night-2:   #1D0D4A;   /* faixa média */
  --c-night-3:   #20154B;   /* faixa clara / cards */
  --c-surface:   #281a5e;   /* cartões sobre fundo escuro */
  --c-surface-2: #33217a;   /* cartão em destaque */

  /* ---- Cores: marca (amostradas do Wix v2) ----
     O verde é a cor de ação da campanha: botões e títulos em pincelada. */
  --c-green:      #4DDD37;  /* botões, títulos brush, preço */
  --c-green-lt:   #6BEE57;
  --c-green-dk:   #2FA81F;
  --c-orange:     #FF6A01;  /* rótulos da contagem regressiva */
  --c-pink:       #FFC7FD;  /* títulos das lápides */

  --c-magenta:    #BB04C8;
  --c-magenta-lt: #E633F0;
  --c-magenta-dk: #8A0394;
  --c-purple:     #542681;
  --c-pumpkin:    #FF8600;
  --c-pumpkin-lt: #FFA63D;
  --c-blood:      #AF0000;
  /* Card de convite, amostrado do Wix: cor chapada (não é gradiente),
     borda laranja de 1px e brilho magenta por baixo. */
  --card-convite:        rgba(138, 12, 83, .5);
  --card-convite-borda:  #FF6A01;
  --card-convite-brilho: 0 10px 40px rgba(202, 22, 124, .43);

  /* ---- Cores: texto ---- */
  --c-ink:       #FFF4E5;   /* creme quente — títulos */
  --c-body:      #E4DCF5;   /* corpo de texto */
  --c-body-soft: #B7AAD8;   /* apoio, legendas */
  --c-body-dim:  #8E82B4;   /* mínimo legível sobre fundo escuro */

  /* ---- Linhas e véus ---- */
  --c-line:       rgba(255, 244, 229, .14);
  --c-line-soft:  rgba(255, 244, 229, .08);
  --c-veil:       rgba(12, 6, 43, .72);
  --c-veil-deep:  rgba(12, 6, 43, .9);

  /* ---- Tipografia ---- */
  --f-body:    'Kalam', 'Bradley Hand', 'Segoe Script', system-ui, sans-serif;
  --f-display: 'Trade Winds', 'Trebuchet MS', var(--f-body);
  --f-brush:   'Lethal Craze', 'Trade Winds', var(--f-body);
  --f-hand:    var(--f-body);          /* mesmo arquivo — mantido pela semântica */
  --f-kicker:  'Story Script', var(--f-body);
  --f-label:   'Ampersand', 'Trade Winds', var(--f-body);

  /* Escala fluida: min em telas de 360px, max em 1280px+ */
  --fs-xs:    0.8125rem;                                    /* 13px  */
  --fs-sm:    0.875rem;                                     /* 14px  */
  --fs-base:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);     /* 16→17 */
  --fs-md:    clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);   /* 17→19 */
  --fs-lg:    clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);     /* 20→26 */
  --fs-xl:    clamp(1.5rem, 1.24rem + 1.15vw, 2.25rem);     /* 24→36 */
  --fs-2xl:   clamp(1.875rem, 1.4rem + 2.1vw, 3.25rem);     /* 30→52 */
  --fs-3xl:   clamp(2.25rem, 1.5rem + 3.3vw, 4.5rem);       /* 36→72 */

  /* Padrão de tamanho, medido na seção FOME NOTURNA — é ela que baliza o
     resto do site. Todo título em brush usa o primeiro; todo texto corrido
     usa o segundo. Ficam aqui, e não em cada seção, porque o problema que
     resolvem é justamente cada seção ter escolhido o seu tamanho. */
  --fs-titulo: clamp(1.5rem, 0.95rem + 2.35vw, 2.1rem);     /* 24→33,6 */
  --fs-corpo:  clamp(1rem, 0.92rem + 0.42vw, 1.1875rem);    /* 16→19   */
  --lh-corpo:  1.85;
  --ls-corpo:  0.05em;

  --lh-tight: 1.12;
  --lh-snug:  1.32;
  --lh-body:  1.62;   /* Kalam tem hastes altas: precisa de respiro entre linhas */
  /* A Lethal Craze é uma brush de traço solto: os glifos vão de -0.90em a
     +1.54em. Zero colisão exigiria entrelinha 2.45, o que ficaria absurdo —
     1.75 dá respiro e mantém o traço. Regra prática: use a brush só em
     textos de UMA linha; o que quebra vai para a Trade Winds. */
  --lh-brush: 1.75;
  --ls-wide:  0.1em;  /* mesmo tracking dos títulos originais */
  --ls-caps:  0.16em;

  /* ---- Espaçamento (escala de 4px) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;

  /* Respiro vertical das seções — encolhe no celular, cresce no desktop */
  --sp-section:  clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --gutter:      clamp(1.25rem, 0.6rem + 3vw, 3rem);

  /* ---- Layout ---- */
  --w-container: 75rem;   /* 1200px */
  --w-narrow:    48rem;   /* 768px — blocos de leitura */
  --w-measure:   62ch;    /* medida máxima de parágrafo */

  /* ---- Formas ---- */
  --r-sm:   0.5rem;
  --r-md:   0.875rem;
  --r-lg:   1.25rem;
  --r-xl:   1.75rem;
  --r-pill: 999px;

  /* ---- Sombras e brilhos ---- */
  --sh-card:  0 1.5rem 3rem -1rem rgba(12, 6, 43, .75);
  --sh-lift:  0 2rem 4rem -1rem rgba(12, 6, 43, .85);
  --glow-green:   0 0 2.5rem -0.25rem rgba(77, 221, 55, .5);
  --glow-magenta: 0 0 2.5rem -0.25rem rgba(187, 4, 200, .55);
  --glow-pumpkin: 0 0 2rem -0.25rem rgba(255, 134, 0, .45);
  --glow-pink:    0 0 1.5rem rgba(255, 199, 253, .55);

  /* ---- Movimento ---- */
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 480ms;
  --ease:   cubic-bezier(.22, .61, .36, 1);

  /* ---- Camadas ----
     --z-deco é negativo de propósito: as seções têm `isolation: isolate`,
     então -1 fica acima do fundo da seção e ABAIXO do conteúdo — que é
     exatamente onde as artes decorativas devem ficar. */
  --z-deco:   -1;
  --z-bg:      0;
  --z-content: 1;
  --z-sticky:  50;
  --z-header:  60;
  --z-nav:     70;
}

/* Alturas dinâmicas usadas pelo header/sticky (o JS mantém --header-h em dia) */
:root {
  --header-h: 4.25rem;
}

@media (min-width: 64em) {
  :root { --header-h: 5.25rem; }
}