/* ==============================================================================
   CREDIOLIMPIADAS / CREDIJUEGOS - TOKENS DE DISEÑO OFICIALES
   Archivo: apps/juegos/public/styles/tokens.css
   Tokens generados a partir de packages/shared/styles/tokens.scss
   ============================================================================== */

:root {
  /* Paleta Institucional Credicard */
  --cc-navy-900: #0A1433; /* Fondo corporativo */
  --cc-navy-800: #0D1B3E; /* Fondo secundario de paneles */
  --cc-navy-700: #13224F; /* Superficies */
  --cc-navy-600: #1E336A; /* Bordes activos */
  --cc-navy-500: #294488; /* Contornos destacados */

  /* Variables Semánticas del Tema Arcade (POR DEFECTO: MODO CLARO LUMINOSO) */
  --cc-theme-bg:               #EEF5FC;
  --cc-theme-bg-gradient:      radial-gradient(circle at 50% 12%, rgba(79, 179, 232, 0.22) 0%, transparent 60%),
                               radial-gradient(circle at 85% 85%, rgba(242, 140, 40, 0.12) 0%, transparent 50%),
                               radial-gradient(circle at 15% 90%, rgba(63, 185, 80, 0.12) 0%, transparent 50%),
                               linear-gradient(135deg, #EBF3FC 0%, #F5F9FF 35%, #E8F1FC 70%, #F4ECFE 100%);
  --cc-theme-surface:          #FFFFFF;
  --cc-theme-surface-alt:      #F4F8FD;
  --cc-theme-surface-card:     #FFFFFF;
  --cc-theme-header-bg:        rgba(255, 255, 255, 0.94);
  --cc-theme-header-border:    #D9E6F5;
  --cc-theme-border:           #D0E0F3;
  --cc-theme-border-highlight: #3A86FF;
  --cc-theme-text-primary:     #0A1433;
  --cc-theme-text-secondary:   #334155;
  --cc-theme-text-muted:       #64748B;
  --cc-theme-card-shadow:      0 12px 32px rgba(18, 44, 92, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
  --cc-theme-card-shadow-hover: 0 16px 40px rgba(18, 44, 92, 0.14), 0 4px 10px rgba(46, 109, 180, 0.12);
  --cc-theme-input-bg:         #F3F7FD;
  --cc-theme-input-border:     #C8DCEF;

  /* Franjas de Identidad y Acentos Dinámicos */
  --cc-orange:       #F28C28; /* Acción primaria, botones arcade */
  --cc-orange-light: #FFA858;
  --cc-orange-dark:  #B95B08;
  --cc-orange-deep:  #7D3900; /* Sombra 3D arcade inferior */

  --cc-green:        #3FB950; /* Éxito, zona verde, progreso */
  --cc-green-light:  #62E372;
  --cc-green-dark:   #278534;
  --cc-green-deep:   #155320; /* Sombra 3D arcade inferior */

  --cc-blue:         #2E6DB4; /* Institucional Credicard */
  --cc-blue-light:   #5692D6;
  --cc-blue-dark:    #1C4E84;
  --cc-blue-deep:    #103054; /* Sombra 3D arcade inferior */

  --cc-sky:          #4FB3E8; /* Información, brillo, glow neón */
  --cc-sky-light:    #82CEFA;
  --cc-sky-dark:     #2386B5;
  --cc-sky-deep:     #125575; /* Sombra 3D arcade inferior */

  --cc-purple:       #7B3FA0; /* Comodines, niveles VIP, rally */
  --cc-purple-light: #A362C9;
  --cc-purple-dark:  #562373;
  --cc-purple-deep:  #37114B; /* Sombra 3D arcade inferior */

  --cc-red:          #E53935; /* Alertas, tiempo límite, errores */
  --cc-red-light:    #FF6763;
  --cc-red-dark:     #A81F1C;
  --cc-red-deep:     #6E0E0B; /* Sombra 3D arcade inferior */

  --cc-white:        #FFFFFF; /* Texto primario sobre fondos oscuros */
  --cc-black:        #050A1A; /* Borde cartoon exterior y contraste */

  /* Escala Neutra */
  --cc-gray-50:  #F8FAFC;
  --cc-gray-100: #F1F5F9;
  --cc-gray-200: #E2E8F0;
  --cc-gray-300: #CBD5E1;
  --cc-gray-400: #94A3B8;
  --cc-gray-500: #64748B;
  --cc-gray-600: #475569;
  --cc-gray-700: #334155;
  --cc-gray-800: #1E293B;
  --cc-gray-900: #0F172A;

  /* Tipografías Modernas y Deportivas */
  --cc-font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cc-font-arcade: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cc-font-pill:   'Fredoka', 'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* Espaciados */
  --cc-space-2xs: 0.25rem; /* 4px */
  --cc-space-xs:  0.5rem;  /* 8px */
  --cc-space-sm:  0.75rem; /* 12px */
  --cc-space-md:  1rem;    /* 16px */
  --cc-space-lg:  1.5rem;  /* 24px */
  --cc-space-xl:  2rem;    /* 32px */
  --cc-space-2xl: 3rem;    /* 48px */
  --cc-space-3xl: 4rem;    /* 64px */

  /* Radios de Borde */
  --cc-radius-sm:   4px;
  --cc-radius-md:   8px;
  --cc-radius-lg:   12px;
  --cc-radius-xl:   16px;
  --cc-radius-2xl:  24px;
  --cc-radius-pill: 9999px; /* Estilo píldora para botones casual game */

  /* Sombras y Profundidad */
  --cc-shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --cc-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --cc-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --cc-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --cc-shadow-arcade-glow: 0 0 20px rgba(79, 179, 232, 0.45);

  /* Transiciones */
  --cc-transition-fast:   150ms;
  --cc-transition-normal: 250ms;
  --cc-transition-slow:   400ms;

  /* Accesibilidad (WCAG AA) */
  --cc-focus-ring-color: #4FB3E8;
  --cc-focus-ring: 0 0 0 3px rgba(79, 179, 232, 0.6);
  --cc-touch-target-min: 44px;
}

/* Modo Oscuro Alternativo (opcional bajo demanda) */
body.theme-dark {
  --cc-theme-bg:               #0A1433;
  --cc-theme-bg-gradient:      radial-gradient(circle at 50% 15%, rgba(46, 109, 180, 0.25) 0%, transparent 60%),
                               radial-gradient(circle at 85% 85%, rgba(123, 63, 160, 0.2) 0%, transparent 50%),
                               radial-gradient(circle at 15% 90%, rgba(242, 140, 40, 0.15) 0%, transparent 50%),
                               linear-gradient(180deg, #070D22 0%, #0A1433 50%, #060B1C 100%);
  --cc-theme-surface:          #0D1B3E;
  --cc-theme-surface-alt:      #13224F;
  --cc-theme-surface-card:     #0D1B3E;
  --cc-theme-header-bg:        rgba(10, 20, 51, 0.94);
  --cc-theme-header-border:    #1E336A;
  --cc-theme-border:           #1E336A;
  --cc-theme-border-highlight: #294488;
  --cc-theme-text-primary:     #FFFFFF;
  --cc-theme-text-secondary:   #CBD5E1;
  --cc-theme-text-muted:       #94A3B8;
  --cc-theme-card-shadow:      0 16px 40px rgba(0, 0, 0, 0.7);
  --cc-theme-card-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.85);
  --cc-theme-input-bg:         rgba(10, 20, 51, 0.8);
  --cc-theme-input-border:     #1E336A;
}

/* Forzar modo claro obligatorio en todos los dispositivos y navegadores */
:root, html, body {
  color-scheme: light !important;
}

/* Ocultar permanentemente botones de alternancia de tema */
.hud-theme-toggle-btn,
#hud-theme-toggle,
#game-theme-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}