/* ============================================================================ DESIGN TOKENS — Casino Academy Todo el "look" vive aquí. Para re-skinar (p. ej. para igualar tu repo de GitHub) basta con cambiar estas variables; el resto del CSS las consume. ========================================================================== */ :root { /* --- Paleta base LIGHT (futurista moderno, liquid glass, sin neón) --- */ --c-bg: #f5f7fc; /* casi blanco azulado */ --c-bg-2: #ffffff; /* superficies blancas */ --c-surface: #ffffff; /* tarjetas */ --c-surface-2: #f0f3fa; /* paneles elevados (gris frío muy claro) */ --c-border: #d6dce8; /* bordes */ --c-border-strong: #b8c1d4; /* verde de tapete: SOLO para las mesas de los simuladores (juego real) */ --c-felt: #0f5132; --c-felt-dark: #0a3b24; --c-felt-light: #157347; /* acento de marca = azul (las variables siguen llamándose "gold" por compatibilidad; valor optimizado para fondo claro, contraste AA). */ --c-gold: #2563eb; /* azul principal */ --c-gold-soft: #1d4ed8; /* azul profundo (texto sobre claro) */ --c-gold-deep: #1e40af; /* azul muy profundo (bordes) */ --c-red: #c4202b; --c-red-soft: #e23b46; --c-black: #15181a; --c-text: #0f172a; /* tinta oscura para fondo claro */ --c-text-soft: #334155; /* gris-azul oscuro (contraste AA en cuerpo) */ --c-text-muted: #576175; /* atenuado (AA ≥4.5:1 sobre bg claro) */ --c-on-gold: #ffffff; /* texto blanco sobre azul */ /* Valores como TEXTO sobre fondo claro deben cumplir AA (≥4.5:1). En dark se re-aclaran abajo. */ --c-success: #15803d; /* verde AA sobre claro (era #2ecc71, 1.87:1) */ --c-danger: #b91c1c; /* rojo AA sobre claro */ --c-info: #0e7490; /* cian/teal AA sobre claro (era #22d3ee, 1.81:1) */ /* --- Tipografía --- */ /* Sans moderno tipo Binance/edtech-fintech: Space Grotesk para titulares (geometric, tracking ajustado), Inter para cuerpo (legibilidad alta). */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --fs-xs: 0.8rem; --fs-sm: 0.9rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.95rem; --fs-3xl: 2.5rem; --fs-hero: clamp(2.2rem, 5vw, 3.7rem); /* --- Espaciado / radios / sombras --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.85rem; --sp-4: 1.15rem; --sp-5: 1.6rem; --sp-6: 2.4rem; --sp-8: 4rem; --sp-10: 6rem; --sp-12: 8rem; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --shadow-sm: 0 1px 3px rgba(15,23,42,.08); --shadow-md: 0 8px 28px rgba(15,23,42,.12); --shadow-glow: 0 0 24px rgba(37,99,235,.22); /* --- Liquid glass (sobre fondo claro) --- */ /* Glass MÁS opaco: las cards tapan el canvas de fondo de apuestas (P1). */ --glass-bg: rgba(255, 255, 255, 0.92); --glass-bg-strong: rgba(255, 255, 255, 0.96); --glass-border: rgba(15, 23, 42, 0.10); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9); --glass-blur: blur(20px) saturate(180%); --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.10), var(--glass-hi); /* colores que tiñen el spotlight interactivo del fondo (light theme) */ --aurora-1: rgba(99, 102, 241, 0.18); --aurora-2: rgba(56, 189, 248, 0.20); --aurora-3: rgba(168, 85, 247, 0.10); --aurora-4: rgba(14, 165, 233, 0.16); --grad-gold: linear-gradient(135deg, #3b82f6, #2563eb 50%, #1d4ed8); --grad-felt: radial-gradient(120% 120% at 50% 0%, var(--c-felt-light) 0%, var(--c-felt) 40%, var(--c-felt-dark) 100%); --maxw: 1180px; } /* ============================================================================ TEMA OSCURO: override de tokens. Activar con ``. ========================================================================== */ :root[data-theme="dark"] { --c-bg: #0a1428; --c-bg-2: #10193a; --c-surface: #161f3d; --c-surface-2: #1f2a4f; --c-border: #2a345a; --c-border-strong: #3b4675; --c-text: #eef0f8; --c-text-soft: #c6cce4; --c-text-muted: #8b93b8; --c-on-gold: #ffffff; --c-gold: #3b82f6; --c-gold-soft: #93c5fd; --c-gold-deep: #1d4ed8; /* En dark estos colores van sobre fondo oscuro: se re-aclaran para AA. */ --c-success: #34d399; --c-danger: #f87171; --c-info: #22d3ee; /* Glass dark MÁS opaco + borde más visible (P8). */ --glass-bg: rgba(22, 31, 61, 0.92); --glass-bg-strong: rgba(16, 25, 58, 0.96); --glass-border: rgba(255,255,255,0.16); --glass-hi: inset 0 1px 0 rgba(255,255,255,0.08); --glass-blur: blur(20px) saturate(150%); --shadow-sm: 0 2px 8px rgba(0,0,0,.35); --shadow-md: 0 8px 30px rgba(0,0,0,.45); --shadow-glass: 0 14px 50px rgba(0,0,0,.5), var(--glass-hi); --shadow-glow: 0 0 24px rgba(59,130,246,.22); --aurora-1: rgba(59,130,246,0.18); --aurora-2: rgba(56,189,248,0.18); --aurora-3: rgba(99,102,241,0.10); --aurora-4: rgba(14,165,233,0.14); --grad-gold: linear-gradient(135deg, #60a5fa, #3b82f6 50%, #1d4ed8); }