/* ═══════════════════════════════════════════════════════════════════════
MTLider — Sistema de diseño compartido (design tokens + componentes)
"Corporativo con alma": una sola marca verde, gamificación como acento
semántico, tipografía con sistema (Barlow Condensed display + Inter UI).
Una sola fuente de verdad → todas las páginas se ven uniformes.
Fuentes (cargar en el de cada página):
═══════════════════════════════════════════════════════════════════════ */
:root {
/* Marca (un solo acento) */
--brand: #0F9B6E;
--brand-strong: #0B7B57;
--brand-soft: #E4F3EE; /* fondo suave para chips/estados verdes */
/* Neutros con sesgo verde (elegidos, no grises default) */
--bg: #F3F6F4;
--surface: #FFFFFF;
--surface-2: #EDF2EF;
--surface-hover:#E6ECE8;
--border: #E0E7E2;
--border-strong:#C9D3CD;
--text: #16211D;
--text-muted: #5C6B64;
/* Gamificación (uso medido, solo en elementos de juego/recompensa) */
--xp: #6C5CE7; /* niveles / XP */
--coin: #E6A417; /* MTL coins */
--streak: #F2683C; /* racha */
/* Semánticos (separados del acento) */
--success: #17976B;
--warning: #E0A020;
--danger: #D8443F;
--info: #2C7BD1;
/* Tipografía */
--font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
--fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem;
--fs-md: 1.0625rem; --fs-lg: 1.375rem; --fs-xl: 1.875rem;
--fs-2xl: 2.5rem; --fs-display: 3.25rem;
--lh-tight: 1.15; --lh-body: 1.55;
/* Espaciado (ritmo 4/8) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
/* Radios y sombras (redondeado medio, sombras discretas) */
--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
--shadow-1: 0 1px 2px rgba(16,33,29,.06), 0 1px 3px rgba(16,33,29,.04);
--shadow-2: 0 4px 16px rgba(16,33,29,.08);
--ring: 0 0 0 3px rgba(15,155,110,.30);
}
/* Tema oscuro: solo se redefinen los TOKENS (los componentes usan los tokens) */
@media (prefers-color-scheme: dark) {
:root {
--brand: #35D6A2; --brand-strong: #24B98A; --brand-soft: #123027;
--bg: #0E1512; --surface: #16201C; --surface-2: #1B2823; --surface-hover: #22322C;
--border: #26332D; --border-strong: #35473E; --text: #E7EFEA; --text-muted: #8FA097;
--xp: #8B7DF0; --coin: #F0B93E; --streak: #FF7B52;
--success: #35C08C; --warning: #E9B54A; --danger: #EC5C57; --info: #4E9BE6;
--shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 22px rgba(0,0,0,.5);
--ring: 0 0 0 3px rgba(53,214,162,.35);
}
}
:root[data-theme="light"] {
--brand:#0F9B6E; --brand-strong:#0B7B57; --brand-soft:#E4F3EE;
--bg:#F3F6F4; --surface:#FFFFFF; --surface-2:#EDF2EF; --surface-hover:#E6ECE8;
--border:#E0E7E2; --border-strong:#C9D3CD; --text:#16211D; --text-muted:#5C6B64;
--xp:#6C5CE7; --coin:#E6A417; --streak:#F2683C;
--success:#17976B; --warning:#E0A020; --danger:#D8443F; --info:#2C7BD1;
--shadow-1:0 1px 2px rgba(16,33,29,.06),0 1px 3px rgba(16,33,29,.04);
--shadow-2:0 4px 16px rgba(16,33,29,.08); --ring:0 0 0 3px rgba(15,155,110,.30);
--accent:var(--brand); --accent-2:var(--xp); --gold:var(--coin); --fire:var(--streak); --shadow-lg:var(--shadow-2);
}
:root[data-theme="dark"] {
--brand:#35D6A2; --brand-strong:#24B98A; --brand-soft:#123027;
--bg:#0E1512; --surface:#16201C; --surface-2:#1B2823; --surface-hover:#22322C;
--border:#26332D; --border-strong:#35473E; --text:#E7EFEA; --text-muted:#8FA097;
--xp:#8B7DF0; --coin:#F0B93E; --streak:#FF7B52;
--success:#35C08C; --warning:#E9B54A; --danger:#EC5C57; --info:#4E9BE6;
--shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 22px rgba(0,0,0,.5); --ring:0 0 0 3px rgba(53,214,162,.35);
--accent:var(--brand); --accent-2:var(--xp); --gold:var(--coin); --fire:var(--streak); --shadow-lg:var(--shadow-2);
}
/* ═══════════════════════════════════════════════════════════════════════
ALIAS de compatibilidad — mapea los nombres de tokens VIEJOS que ya usan las
51 páginas hacia la paleta nueva. Así, con solo cargar theme.css (después del