/* =========================================================
   HAZE FILMS × PHOENIX DENTAL — Design Tokens
   Paleta: CYANO da Haze (degradê azul) sobre base preta.
   Azul Petróleo #004B69 · Teal #078792 · Turquesa #0EC3BA
   Fonte: Helvetica Neue (renderiza nativa no iOS/Mac).
   ========================================================= */

:root {
  /* ---------- BACKGROUNDS (preto = fundação Haze) ---------- */
  --color-bg-primary:       #000000;  /* Preto — fundo principal */
  --color-bg-secondary:     #070707;  /* leve respiro p/ seções alternadas */
  --color-bg-navy:          #050505;  /* conteúdo / preço */
  --color-bg-card:          rgba(18, 18, 18, 0.70);  /* cards semitransparentes */
  --color-bg-card-solid:    #141414;  /* Cinza Carvão — card sólido */

  /* ---------- ACCENT / CYANO ---------- */
  --color-accent-cyan:      #0EC3BA;  /* Turquesa — divisores, detalhes, glows */
  --color-accent-blue:      #078792;  /* Teal — secundário */
  --color-cta-light:        #0EC3BA;
  --color-cta-mid:          #078792;
  --color-cta-deep:         #004B69;
  --color-cta-fallback:     #004B69;

  /* ---------- TEXTO ---------- */
  --color-text-primary:     #FFFFFF;  /* Branco puro — títulos */
  --color-text-body:        #FAFAFA;  /* Branco suave — corpo */
  --color-text-muted:       rgba(250, 250, 250, 0.62);  /* secundário */
  --color-text-cta:         #FFFFFF;  /* texto branco sobre o degradê (com text-shadow) */

  /* ---------- GRADIENTES (degradê azul Haze · luz sobe: base→topo, esq→dir) ---------- */
  --gradient-cta:           linear-gradient(45deg, #004B69 0%, #078792 50%, #0EC3BA 100%);
  --gradient-section:       linear-gradient(#000000 0%, rgba(14, 195, 186, 0.08) 100%);
  --gradient-hero-overlay:  linear-gradient(180deg,
                              rgba(0, 0, 0, 0.30) 0%,
                              rgba(0, 0, 0, 0.55) 50%,
                              rgba(0, 0, 0, 0.95) 100%);
  --gradient-glow-cyan:     radial-gradient(circle, rgba(14, 195, 186, 0.25) 0%, transparent 70%);

  /* ---------- TIPOGRAFIA — Helvetica Neue (marca Haze) ---------- */
  --font-family:            'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-display:             clamp(48px, 11vw, 160px);
  --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 (curvas cinematográficas — não mudar) ---------- */
  --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:        2600ms;
  --transition-swipe-up:    900ms;
}

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