/* ========================================================= VARIABLES.CSS Sistema de diseño central: colores, tipografía, espaciado. Cambia estos valores para retemizar todo el sitio. ========================================================= */ :root { /* --- Color: base --- */ --color-bg: #FAFAF8; --color-surface: #FFFFFF; --color-surface-2: #F3F2EE; --color-border: #E6E4DC; --color-text: #191A23; --color-text-muted: #6B6F76; --color-text-faint: #9A9DA4; /* --- Color: marca --- */ --color-primary: #5347E8; --color-primary-dark: #4038C4; --color-primary-soft: #ECEBFC; /* --- Color: por herramienta --- */ --color-ruleta: #F2612C; --color-ruleta-soft: #FDEBE2; --color-tierlist: #0E9C8F; --color-tierlist-soft: #E1F5F2; /* --- Color: estado --- */ --color-success: #1A9E5C; --color-danger: #E0473B; --color-warning: #C7861B; /* --- Tipografía --- */ --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; /* --- Espaciado (escala 4px) --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 6rem; /* --- Bordes y sombras --- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(25, 26, 35, 0.06); --shadow-md: 0 6px 20px rgba(25, 26, 35, 0.08); --shadow-lg: 0 16px 40px rgba(25, 26, 35, 0.12); /* --- Layout --- */ --container-max: 1140px; --header-height: 72px; /* --- Movimiento --- */ --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 500ms; /* Fondo translúcido del header (varía entre temas) */ --color-header-bg: rgba(250, 250, 248, 0.86); /* Chip fijo para toasts: siempre oscuro con texto claro, en ambos temas */ --color-chip-bg: #1E1F27; --color-chip-text: #FFFFFF; } /* ========================================================= MODO OSCURO Se activa colocando data-theme="dark" en . El tema por defecto es SIEMPRE claro; el cambio a oscuro solo ocurre si el usuario lo activa explícitamente desde el botón del header (ver assets/js/main.js). La preferencia se recuerda en localStorage. ========================================================= */ :root[data-theme="dark"] { --color-bg: #14151B; --color-surface: #1C1D26; --color-surface-2: #22232E; --color-border: #2E2F3B; --color-text: #F2F2F5; --color-text-muted: #A6A8B3; --color-text-faint: #7A7D89; --color-primary-soft: #26244F; --color-primary-dark: #A9A4F7; /* más claro para mantener contraste sobre fondos oscuros */ --color-ruleta-soft: #3A2419; --color-tierlist-soft: #142E2B; --color-header-bg: rgba(20, 21, 27, 0.86); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); }