/* ===================================================================
   EPL LEARNING - Design Tokens (variables CSS)
   Estilo Netflix sobre azul marino institucional.
   =================================================================== */
:root {
  /* Paleta general (marca personalizable) */
  --bg:            #0B132B;   /* fondo principal azul marino */
  --bg-2:          #0A192F;   /* fondo alterno */
  --bg-3:          #101C3B;   /* superficies elevadas */
  --bg-4:          #16223E;   /* tarjetas compactas */
  --bg-elev:       #1B2A4A;   /* hover cards / popovers */
  --ink:           #FFFFFF;   /* texto principal */
  --ink-2:         #C9D2E3;   /* texto secundario */
  --ink-3:         #8B96AD;   /* texto terciario */
  --line:          rgba(255,255,255,0.10);

  /* Acentos */
  --accent:        #E50914;   /* rojo Netflix */
  --accent-2:      #FF5722;   /* naranja activo */
  --accent-hi:     #FF3B47;
  --accent-dark:   #B2070F;
  --gold:          #C5A55A;   /* toque EPL institucional */

  /* Estados */
  --success:       #21D07A;
  --warning:       #F9B825;
  --danger:        #E50914;
  --info:          #2C9CE8;

  /* Capas */
  --z-navbar:      1000;
  --z-billboard:   10;
  --z-card-hover:  500;
  --z-modal:       2000;
  --z-toast:       3000;

  /* Formas y transiciones */
  --radius:        8px;
  --radius-sm:     6px;
  --radius-lg:     12px;
  --radius-xl:     20px;
  --ease:          cubic-bezier(.4,0,.2,1);
  --t-fast:        150ms;
  --t:             300ms;
  --t-slow:        500ms;

  /* Tipografía */
  --font: 'Inter', 'Roboto', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Sombra */
  --shadow-1: 0 2px 10px rgba(0,0,0,.45);
  --shadow-2: 0 8px 30px rgba(0,0,0,.55);
  --shadow-3: 0 20px 60px rgba(0,0,0,.65);

  /* Espaciado lateral */
  --pad: clamp(28px, 5vw, 88px);
}