/** * css/tokens.css * Variables de diseño portadas 1:1 del prototipo. Paleta actual: * índigo / Space Grotesk. Pendiente (ver kickoff, sección 4): migrar * a navy/gold + DM Sans/DM Mono, sumar mascotas Gema y Elvira. */ :root{ --bg: #0C0F16; --surface: #11151F; --card: #161C2A; --card-2: #1B2234; --line: rgba(148,163,205,.13); --line-soft: rgba(148,163,205,.07); --text: #E9EDF7; --muted: #8C95AD; --faint: #5C6580; --accent: #6C8CFF; --accent-2: #8FA8FF; --accent-bg: rgba(108,140,255,.12); --verde: #34D399; --amarillo: #FBBF24; --naranja: #FB923C; --rojo: #F87171; --verde-bg: rgba(52,211,153,.12); --amarillo-bg: rgba(251,191,36,.12); --naranja-bg: rgba(251,146,60,.12); --rojo-bg: rgba(248,113,113,.12); --celeste: #38BDF8; --celeste-bg: rgba(56,189,248,.12); --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --font-d: 'Space Grotesk', sans-serif; --font-b: 'DM Sans', sans-serif; --font-m: 'DM Mono', monospace; --shadow: 0 10px 30px -12px rgba(0,0,0,.55); } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} body{ background:var(--bg); color:var(--text); font-family:var(--font-b); font-size:15px; line-height:1.5; transition:background-color .18s ease, color .18s ease; } button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input,select{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* ===================================================================== * TEMA CLARO * --------------------------------------------------------------------- * Se activa poniendo data-theme="light" en (ver js/core/theme.js). * Mismo set de variables que el :root de arriba — nada más se toca. * Los colores funcionales de franjas (verde/amarillo/naranja/rojo/celeste) * NO cambian entre temas a propósito: son el lenguaje visual del * semáforo pedagógico y deben significar lo mismo en cualquier tema. * ===================================================================== */ :root[data-theme="light"]{ --bg: #F4F5FA; --surface: #FFFFFF; --card: #FFFFFF; --card-2: #F1F2F8; --line: rgba(20,25,45,.10); --line-soft: rgba(20,25,45,.06); --text: #14172A; --muted: #5B6478; --faint: #9AA2B8; --accent: #4C6EF5; --accent-2: #3B5BDB; --accent-bg: rgba(76,110,245,.09); --shadow: 0 10px 30px -14px rgba(20,25,45,.18); } /* ===================================================================== * LAYOUT — puntos de personalización globales * --------------------------------------------------------------------- * Ver también css/layout.css (contenedor .app) y * css/views/corregir.css (anchos de columna de la grilla). * ===================================================================== */ :root{ --app-max-width: 1600px; /* ancho máximo del contenido */ --app-side-padding: clamp(16px, 3vw, 40px); /* margen lateral, responsive */ }