/* ============================================ LEVELUP — Design Tokens Paleta: carbón cálido + índigo (interacción) + oro (recompensa, uso restringido) Tipografía: Sora (display) / Inter (cuerpo) / JetBrains Mono (datos, XP, tiempo) ============================================ */ :root { /* Color — modo oscuro (default) */ --bg: #0F0F14; --bg-elevated: #15151C; --surface: #1B1B24; --surface-hover: #22222E; --border: #2A2A38; --text: #EDEDF2; --text-muted: #8E8E9C; --text-faint: #5C5C6B; --accent: #6C63FF; /* índigo — interacción, primario */ --accent-dim: #4C46B3; --accent-soft: rgba(108, 99, 255, 0.14); --gold: #E8B94D; /* recompensa — solo XP, logros, nivel */ --gold-soft: rgba(232, 185, 77, 0.14); --success: #4ADE80; --success-soft: rgba(74, 222, 128, 0.12); --danger: #F16565; /* Tipografía */ --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; /* Espaciado */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Forma */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px; /* Sombra — muy sutil, el fondo ya es oscuro */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.3); /* Movimiento */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 450ms; /* Layout */ --nav-height: 64px; --content-max: 480px; } /* Modo claro — activado por [data-theme="light"] en */ [data-theme="light"] { --bg: #FAFAF9; --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-hover: #F2F2F0; --border: #E5E5E2; --text: #17171C; --text-muted: #6B6B76; --text-faint: #A0A0AA; --accent-soft: rgba(108, 99, 255, 0.08); --gold-soft: rgba(232, 185, 77, 0.1); --success-soft: rgba(74, 222, 128, 0.1); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.08); }