/* Centralização de tokens de UI para áudio/vídeo, burger e popup */
:root {
  /* Play button (áudio/vídeo) */
  --size-play-button: 60px;
  --font-size-play-icon: 1.5rem;

  /* Video popup (breakpoints) */
  /* Desktop: maior para melhor leitura, respeitando altura da viewport */
  --video-popup-width-desktop: 35vw;
  --video-popup-max-width-desktop: 35vw;
  --video-popup-max-height-desktop: 80vh;
  --video-popup-aspect-desktop: 9 / 16;

  /* Mobile: ocupar ~70% da tela com proporção vertical */
  --video-popup-width-mobile: 70vw;
  --video-popup-max-width-mobile: 70vw;
  --video-popup-max-height-mobile: 70vh;
  --video-popup-aspect-mobile: 9 / 16;

  --video-popup-max-width-mobilesmall: 70vw;

  /* Thumbs do carrossel (reduzidas) */
  --video-thumb-width-desktop: 136px;
  --video-thumb-height-desktop: 242px;
  --video-thumb-width-mobile: 110px;
  --video-thumb-height-mobile: 196px;
  --video-thumb-width-mobile-small: 96px;
  --video-thumb-height-mobile-small: 171px;

  /* Fontes dos títulos nas thumbs (diminuídas) */
 --video-thumb-font-size-desktop: 0.8rem;
 --video-thumb-font-size-mobile: 0.75rem;
 --video-thumb-font-size-mobile-small: 0.7rem;

  /* Close button (unificado para mídia, usado pelo vídeo e menu mobile) */
  --video-close-size: 40px;
  --video-close-offset: 15px;

  /* Burger (Uiverse-style Jimdrer, adaptado) */
 /* Burger menu tokens aligned to Cyberpunk proportions/animation */
 --burger-width: 24px; /* total width of toggle */
 --burger-height: 16px; /* total height of toggle */
 --burger-line-height: 2px; /* thickness of lines */
 --burger-spacing: 4px; /* spacing between lines */
 --burger-anim-duration: 300ms; /* animation duration */
  --burger-anim-ease: cubic-bezier(0.65, -0.6, 0.255, 1.35); /* consistent easing */
  --burger-color-off: #000000; /* Cyberpunk yellow */
  --burger-color-on: #000000; /* Cyberpunk cyan */
  /* Fundo do burger desativado (remover pílula/bolinha decorativa) */
  --burger-bg-off: transparent;
  --burger-bg-on: transparent;
  /* Remover totalmente o knob/bolinha decorativo */
  --burger-knob-size: 0px;
  --burger-knob-translate: 0px;
  --burger-shadow-on: 0 0 0 rgba(0,0,0,0);

  /* Mobile menu chevron (triângulo à direita) */
  --mobile-menu-chevron-half: 6px; /* metade da altura do triângulo */
  --mobile-menu-chevron-thickness: 8px; /* espessura (base) do triângulo */
  --mobile-menu-chevron-offset-right: 1rem; /* distância da borda direita */
}

/* Responsivos (mantêm overrides onde já estavam nas folhas específicas, se necessário) */
@media (max-width: 768px) {
  :root {
    /* Overrides de tokens para mobile geral (retratos/landscape) */
    --video-close-offset: 10px;
    --video-close-size: 36px;
    --font-size-play-icon: 20px;
 --video-thumb-font-size-mobile: 0.75rem;
    /* Chevron um pouco menor em mobile */
    --mobile-menu-chevron-half: 5px;
    --mobile-menu-chevron-thickness: 7px;
  }
}
@media (max-width: 480px) {
  :root {
    /* Overrides adicionais para telas muito pequenas */
    --video-close-size: 32px;
    /* Overrides de tokens para mobile pequeno */
    --size-play-button: 50px;
    --font-size-play-icon: 18px;
 --video-thumb-font-size-mobile-small: 0.7rem;
    /* Chevron ainda menor em telas muito pequenas */
    --mobile-menu-chevron-half: 4px;
    --mobile-menu-chevron-thickness: 6px;
  }
}