/* =========================================================
   MÉTODO IP × HAZE FILMS — Design Tokens
   Extraídos do brandbook oficial Método IP
   ========================================================= */

:root {
  /* ---------- CORES — BACKGROUNDS ---------- */
  --color-bg-primary:       #000710;  /* Azul Noite — fundo principal */
  --color-bg-secondary:     #000211;  /* Azul Profundo — seções alternadas */
  --color-bg-navy:          #000212;  /* Azul Navy — preço e conteúdo */
  --color-bg-card:          rgba(0, 4, 27, 0.70);  /* Cards semitransparentes */
  --color-bg-card-solid:    #00041B;  /* Versão sólida do card */

  /* ---------- CORES — ACCENT / FREQUÊNCIA ---------- */
  --color-accent-cyan:      #46E6FF;  /* Ciano Elétrico — divisores, detalhes */
  --color-accent-blue:      #2AB3FF;  /* Azul Ciano Médio — links */
  --color-cta-light:        #70E1DF;  /* Início gradiente CTA */
  --color-cta-mid:          #1BC0DF;  /* Meio gradiente CTA */
  --color-cta-deep:         #10A0DF;  /* Fim gradiente CTA */
  --color-cta-fallback:     #E4202D;  /* Vermelho fallback */

  /* ---------- CORES — TEXTO ---------- */
  --color-text-primary:     #FFFFFF;  /* Branco puro — títulos */
  --color-text-body:        #FAFAFA;  /* Branco suave — corpo */
  --color-text-muted:       rgba(250, 250, 250, 0.65);  /* Texto secundário */
  --color-text-cta:         #00041C;  /* Texto sobre botão CTA */

  /* ---------- GRADIENTES ---------- */
  --gradient-cta:           linear-gradient(135deg, #70E1DF 0%, #1BC0DF 50%, #10A0DF 100%);
  --gradient-section:       linear-gradient(#00051B 0%, rgba(70, 230, 255, 0.09) 100%);
  --gradient-hero-overlay:  linear-gradient(180deg,
                              rgba(0, 7, 16, 0.30) 0%,
                              rgba(0, 7, 16, 0.55) 50%,
                              rgba(0, 7, 16, 0.95) 100%);
  --gradient-glow-cyan:     radial-gradient(circle, rgba(70, 230, 255, 0.25) 0%, transparent 70%);

  /* ---------- TIPOGRAFIA ---------- */
  --font-family:            'Montserrat', sans-serif;

  --fs-display:             clamp(48px, 11vw, 160px);  /* Hero gigante */
  --fs-headline-price:      57.6px;
  --fs-headline-section:    40px;
  --fs-headline-hero:       33.6px;
  --fs-eyebrow:             16px;
  --fs-body:                17.6px;
  --fs-faq-title:           19.2px;
  --fs-button:              18px;
  --fs-footer:              16px;
  --fs-topbar:              13px;

  --fw-regular:             400;
  --fw-medium:              500;
  --fw-bold:                700;

  --lh-heading:             1.2;
  --lh-body:                1.5;
  --ls-eyebrow:             0.3em;
  --ls-topbar:              0.4em;

  /* ---------- ESPAÇAMENTO ---------- */
  --space-section-x:        clamp(24px, 5vw, 64px);
  --space-section-y:        clamp(80px, 12vh, 140px);
  --space-card:             32px;
  --space-button:           30px 60px;

  /* ---------- BORDA / FORMA ---------- */
  --radius-button:          5px;
  --radius-card:            8px;
  --divider-color:          var(--color-accent-cyan);
  --divider-width:          200px;
  --divider-height:         6px;

  /* ---------- TIMING ---------- */
  --t-fast:                 200ms;
  --t-base:                 400ms;
  --t-slow:                 800ms;
  --ease-out:               cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cinematic:         cubic-bezier(0.7, 0, 0.3, 1);

  /* ---------- DURAÇÕES DE ABERTURA ---------- */
  --loader-duration:        3000ms;        /* MP4 do loader = 3s */
  --transition-swipe-up:    900ms;         /* Swipe + motion blur */
}

/* ---------- MÍDIA QUERIES ---------- */
@media (max-width: 768px) {
  :root {
    --fs-headline-section:  28px;
    --fs-headline-price:    40px;
    --fs-headline-hero:     24px;
    --space-card:           24px;
    --space-button:         24px 40px;
  }
}