/* ============================================================
   LUFE TRIPS / CHILE 2027
   tokens.css: Identidade visual (cores, fontes, espaços)

   >>> PARA MUDAR AS CORES DA PÁGINA, EDITE SOMENTE ESTE ARQUIVO.
   Todas as seções usam estas variáveis.
   ============================================================ */

:root {
  /* ---------- ROSA LUFE TRIPS (extraído da arte oficial) ---------- */
  --rosa:            #E6198F;  /* cor principal da marca */
  --rosa-vivo:       #FF2FA8;  /* brilhos, destaques, hover */
  --rosa-forte:      #C1117A;  /* botões pressionados, degradês */
  --rosa-escuro:     #6E0A45;  /* fundos escuros com tom da marca */
  --rosa-claro:      #FFE1F1;  /* chips, bordas suaves */
  --rosa-vidro:      rgba(230, 25, 143, .10);
  --rosa-halo:       rgba(230, 25, 143, .32);

  /* ---------- NEUTROS ---------- */
  --preto:           #150910;
  --grafite:         #2B1B23;
  --chumbo:          #4A3A42;
  --cinza:           #7A6B73;
  --cinza-claro:     #C9BFC4;
  --branco:          #FFFFFF;
  --creme:           #FDF8FB;  /* fundo claro padrão */
  --creme-2:         #F7EFF4;

  /* ---------- INVERNO (gelo / montanha) ---------- */
  --gelo:            #EAF3F7;
  --azul-gelo:       #A9C9D8;
  --azul-frio:       #5B8399;
  --azul-noite:      #17313F;

  /* ---------- ASSINATURA SANTARE.AI ---------- */
  --dourado:         #C9A961;
  --dourado-claro:   #E8D5A8;

  /* ---------- TIPOGRAFIA ---------- */
  --fonte-display: 'Fraunces', 'Georgia', serif;          /* títulos editoriais */
  --fonte-texto:   'Manrope', 'Segoe UI', system-ui, sans-serif; /* textos e UI */

  --peso-regular: 400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-bold:    700;
  --peso-black:   800;

  /* Escala fluida.
     Cada valor preferido é uma reta calibrada para chegar ao MESMO
     tamanho de hoje a partir de 1280px, mas descendo mais cedo no
     mobile. Assim o celular ganha uma escala confortável sem que o
     desktop, já aprovado, mude um pixel.
     Conferência do título do topo:
       320px = 38px | 390px = 42px | 1280px = 107px (igual ao atual) */
  --t-hero:    clamp(2.35rem, 0.83rem + 7.36vw, 7.5rem);
  --t-display: clamp(1.85rem, 0.87rem + 4.11vw, 4.4rem);
  --t-titulo:  clamp(1.5rem,  0.98rem + 2.42vw, 3rem);
  --t-sub:     clamp(1.15rem, 0.94rem + 1.41vw, 1.85rem);
  --t-lead:    clamp(1rem,    0.92rem + 0.86vw, 1.3rem);
  --t-corpo:   clamp(.97rem,  0.94rem + 0.35vw, 1.08rem);
  --t-mini:    clamp(.76rem,  0.73rem + 0.24vw, .875rem);
  --t-micro:   clamp(.68rem,  0.66rem + 0.12vw, .72rem);

  /* ---------- ESPAÇAMENTO ---------- */
  --s-1: .5rem;   --s-2: .875rem;  --s-3: 1.25rem;
  --s-4: 2rem;    --s-5: 3rem;     --s-6: 4.5rem;
  --s-7: 6.5rem;  --s-8: 9rem;

  --secao-y: clamp(4.5rem, 9vw, 9rem);   /* respiro vertical das seções */

  /* Margem lateral segura. Vale para a página inteira através do
     .container: nunca menos de 22px, nem no iPhone SE (320px). */
  --gutter:  clamp(1.375rem, 0.95rem + 2.1vw, 2.5rem);
  --largura-max: 1280px;
  --largura-texto: 62ch;

  /* ---------- FORMA ---------- */
  --r-xs: 8px;   --r-sm: 14px;  --r-md: 20px;
  --r-lg: 28px;  --r-xl: 40px;  --r-pill: 999px;

  /* ---------- SOMBRAS ---------- */
  --sombra-sm:  0 2px 10px rgba(21, 9, 16, .06);
  --sombra-md:  0 10px 30px rgba(21, 9, 16, .09);
  --sombra-lg:  0 24px 60px rgba(21, 9, 16, .14);
  --sombra-xl:  0 40px 90px rgba(21, 9, 16, .22);
  --sombra-rosa: 0 16px 40px rgba(230, 25, 143, .30);
  --sombra-foto: 0 30px 70px rgba(21, 9, 16, .28);

  /* ---------- MOVIMENTO ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-suave: cubic-bezier(.4, 0, .2, 1);
  --rapido: .22s;
  --medio:  .45s;
  --lento:  .8s;

  /* ---------- CAMADAS ---------- */
  --z-fundo: 0;  --z-conteudo: 1;  --z-flutuante: 50;
  --z-menu: 100; --z-drawer: 200;
}