/**
 * ENFOQUE MULTIFORMATO — DESIGN TOKENS GLOBALES
 * /assets/css/enfoque-multiformato-tokens.css
 *
 * Capa de tokens compartidos para todos los módulos del sistema.
 * Debe enqueuarse ANTES de: video, galería, audio, infografía, PDF.
 *
 * Estrategia:
 *   - Hereda variables de Blocksy y las convierte en tokens --enfoque-*
 *   - Define tokens cinematográficos propios del sistema
 *   - NO modifica Video ni Galería existentes
 *   - Audio es el primer módulo construido directamente con estos tokens
 */

:root {

  /* =====================================================
   * CAPA 1: PUENTE DESDE BLOCKSY
   * Convierte variables de Blocksy en tokens propios del sistema.
   * Si Blocksy cambia su paleta, solo cambia aquí.
   * ===================================================== */

  --enfoque-color-primary:      var(--theme-palette-color-1, #1a73e8);
  --enfoque-color-secondary:    var(--theme-palette-color-2, #e8431a);
  --enfoque-color-accent:       var(--theme-palette-color-3, #f5c518);

  --enfoque-color-text:         var(--theme-text-color, #e8e8e8);
  --enfoque-color-text-muted:   var(--theme-palette-color-7, #9a9a9a);
  --enfoque-color-border:       var(--theme-border-color, rgba(255,255,255,.1));

  --enfoque-color-surface:      var(--theme-palette-color-8, #111111);
  --enfoque-color-surface-alt:  var(--theme-palette-color-6, #1c1c1c);

  /* =====================================================
   * CAPA 2: TOKENS CINEMATOGRÁFICOS PROPIOS
   * Estética OTT — Netflix editorial / Spotify editorial
   * ===================================================== */

  /* --- Overlays y fondos oscuros --- */
  --enfoque-overlay-dark:       rgba(0, 0, 0, .72);
  --enfoque-overlay-medium:     rgba(0, 0, 0, .50);
  --enfoque-overlay-light:      rgba(0, 0, 0, .28);
  --enfoque-overlay-gradient:   linear-gradient(
                                  to top,
                                  rgba(0,0,0,.90) 0%,
                                  rgba(0,0,0,.40) 50%,
                                  rgba(0,0,0,.05) 100%
                                );

  /* --- Glassmorphism --- */
  --enfoque-glass:              rgba(255, 255, 255, .06);
  --enfoque-glass-border:       rgba(255, 255, 255, .10);
  --enfoque-glass-hover:        rgba(255, 255, 255, .10);
  --enfoque-glass-blur:         blur(14px);
  --enfoque-glass-blur-heavy:   blur(24px);

  /* --- Sombras --- */
  --enfoque-shadow-sm:          0 4px 12px rgba(0, 0, 0, .25);
  --enfoque-shadow-md:          0 8px 28px rgba(0, 0, 0, .35);
  --enfoque-shadow-lg:          0 14px 44px rgba(0, 0, 0, .42);
  --enfoque-shadow-xl:          0 20px 60px rgba(0, 0, 0, .50);
  --enfoque-shadow-glow:        0 0 24px rgba(255, 255, 255, .08);
  --enfoque-shadow-color:       0 8px 32px rgba(var(--enfoque-color-primary-rgb, 26,115,232), .35);

  /* --- Radii --- */
  --enfoque-radius-sm:          6px;
  --enfoque-radius-md:          12px;
  --enfoque-radius-lg:          18px;
  --enfoque-radius-xl:          24px;
  --enfoque-radius-pill:        999px;

  /* --- Transiciones --- */
  --enfoque-transition:         .35s cubic-bezier(.4, 0, .2, 1);
  --enfoque-transition-fast:    .18s cubic-bezier(.4, 0, .2, 1);
  --enfoque-transition-slow:    .55s cubic-bezier(.4, 0, .2, 1);
  --enfoque-transition-spring:  .45s cubic-bezier(.34, 1.56, .64, 1);

  /* --- Hover / interacción --- */
  --enfoque-hover-scale:        scale(1.03);
  --enfoque-hover-scale-sm:     scale(1.015);
  --enfoque-hover-lift:         translateY(-2px);
  --enfoque-active-scale:       scale(.97);

  /* --- Tipografía editorial --- */
  --enfoque-font-display:       'Georgia', 'Times New Roman', serif;
  --enfoque-font-ui:            system-ui, -apple-system, sans-serif;
  --enfoque-font-mono:          'Courier New', monospace;

  --enfoque-text-xs:            .72rem;
  --enfoque-text-sm:            .82rem;
  --enfoque-text-base:          .92rem;
  --enfoque-text-md:            1.05rem;
  --enfoque-text-lg:            1.2rem;

  --enfoque-tracking-tight:     -.02em;
  --enfoque-tracking-wide:      .08em;
  --enfoque-tracking-wider:     .14em;

  /* --- Espaciado --- */
  --enfoque-space-xs:           4px;
  --enfoque-space-sm:           8px;
  --enfoque-space-md:           16px;
  --enfoque-space-lg:           24px;
  --enfoque-space-xl:           40px;

  /* --- Z-index por capa del sistema --- */
  --enfoque-z-base:             10;
  --enfoque-z-overlay:          20;
  --enfoque-z-controls:         30;
  --enfoque-z-modal:            40;
  --enfoque-z-top:              50;

  /* --- Aspect ratios multimedia --- */
  --enfoque-ratio-video:        56.25%;   /* 16:9  */
  --enfoque-ratio-audio:        auto;
  --enfoque-ratio-square:       100%;

  /* --- Estados del player --- */
  --enfoque-state-loading:      rgba(255, 255, 255, .45);
  --enfoque-state-error:        rgba(220, 50, 50, .85);
  --enfoque-state-success:      rgba(30, 185, 84, .85);
  --enfoque-state-warning:      rgba(245, 197, 24, .85);

}