/* ============================================================================ Trivial Trainer — Design Tokens (Fase 0) ---------------------------------------------------------------------------- Este fichero define ÚNICAMENTE tokens (CSS custom properties). No contiene componentes ni clases de presentación (esos viven en components.css). Estructura: 1. Primitivos globales (independientes de tema): familias, tipografía, espaciado, radios, tamaños, transiciones. 2. Tokens semánticos por tema: - :root -> valores por defecto = TEMA JUEGO (oscuro) - [data-tema="juego"] -> tema oscuro (experiencia de entrenamiento) - [data-tema="admin"] -> tema claro (administración) Decisión de tema por defecto (:root): El producto arranca en la experiencia de juego, que es el uso principal y más frecuente (sesiones de entrenamiento). Por eso :root = tema oscuro. La administración activa explícitamente data-tema="admin". Principio de color (según dirección visual): - El color de familia es SIEMPRE un acento, nunca un gran fondo. - El color NUNCA es el único indicador: acompáñalo de texto/icono. ========================================================================== */ /* ============================================================================ 1. PRIMITIVOS GLOBALES (no dependen del tema) ========================================================================== */ :root { /* -------------------------------------------------------------------------- 1.1 Colores de las SEIS FAMILIAS -------------------------------------------------------------------------- Cada familia define tres tokens pensados para uso accesible como ACENTO sobre ambos temas: --familia-* Color base. Acento de referencia (chips, iconos, barras de progreso). Buen contraste sobre superficies claras del tema admin (AA para texto grande / UI). --familia-*-claro Variante más luminosa para usar como TEXTO o acento sobre fondos OSCUROS (tema juego). Sube el contraste frente al fondo oscuro (~ AA para texto normal). --familia-*-oscuro Variante más profunda para usar como TEXTO o acento sobre fondos CLAROS (tema admin) cuando se necesita AA de texto normal (el base puede quedarse corto en amarillo/verde claro). Uso previsto: acentos, indicadores de familia, barras de progreso, bordes y puntos de color en listas de estadística/cobertura. Nota de contraste: para TEXTO usar la variante -claro (sobre oscuro) o -oscuro (sobre claro); el token base es apto para superficies de color (chips, rellenos de barra) más que para texto fino. */ /* Geografía — azul */ --familia-geografia: #2f80ed; --familia-geografia-claro: #6aa8ff; /* texto/acento sobre fondo oscuro */ --familia-geografia-oscuro: #1b5fbf; /* texto/acento sobre fondo claro */ /* Historia — amarillo (el más delicado: el base NO es apto para texto sobre claro; úsese solo como relleno/chip. Para texto usar -oscuro). */ --familia-historia: #f2c11e; --familia-historia-claro: #ffd84d; /* relleno/acento sobre oscuro */ --familia-historia-oscuro: #8a6500; /* texto sobre claro (AA texto) */ /* Ciencia — verde */ --familia-ciencia: #27ae60; --familia-ciencia-claro: #4cd787; /* sobre oscuro */ --familia-ciencia-oscuro: #1c8049; /* sobre claro (AA texto normal) */ /* Entretenimiento — rosa/magenta */ --familia-entretenimiento: #e84393; --familia-entretenimiento-claro: #ff77b8; /* sobre oscuro */ --familia-entretenimiento-oscuro: #b81f6c; /* sobre claro (AA texto) */ /* Arte y Literatura — morado */ --familia-arte: #8e5bd8; --familia-arte-claro: #b48bf0; /* sobre oscuro */ --familia-arte-oscuro: #6b39b5; /* sobre claro (AA texto normal) */ /* Deportes — naranja */ --familia-deportes: #e8792b; --familia-deportes-claro: #ff9d57; /* sobre oscuro */ --familia-deportes-oscuro: #b8560f; /* sobre claro (AA texto normal) */ /* -------------------------------------------------------------------------- 1.2 TIPOGRAFÍA -------------------------------------------------------------------------- Stacks del sistema (sin fuentes externas, coste/red cero). - Sans: UI general y cuerpo. - Display: mismo stack pero reservado semánticamente para enunciados grandes (la pregunta) y titulares. - Mono: datos técnicos (previsualización CSV, valores). */ --fuente-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --fuente-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Escala de tamaños (de caption a display) */ --texto-2xs: 0.6875rem; /* 11px — micro etiquetas */ --texto-xs: 0.75rem; /* 12px — caption */ --texto-sm: 0.875rem; /* 14px — texto secundario */ --texto-base: 1rem; /* 16px — cuerpo */ --texto-lg: 1.125rem; /* 18px — cuerpo destacado */ --texto-xl: 1.375rem; /* 22px — subtítulo */ --texto-2xl: 1.75rem; /* 28px — título de sección */ --texto-3xl: 2.25rem; /* 36px — título de página */ --texto-display: 2.75rem; /* 44px — enunciado grande de la pregunta */ /* Pesos */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-bold: 700; /* Line-heights */ --lh-ajustado: 1.15; /* titulares / display */ --lh-medio: 1.35; /* subtítulos */ --lh-normal: 1.55; /* cuerpo */ /* -------------------------------------------------------------------------- 1.3 ESPACIADO (escala base 4 / 8) -------------------------------------------------------------------------- */ --esp-0: 0; --esp-1: 0.25rem; /* 4 */ --esp-2: 0.5rem; /* 8 */ --esp-3: 0.75rem; /* 12 */ --esp-4: 1rem; /* 16 */ --esp-5: 1.5rem; /* 24 */ --esp-6: 2rem; /* 32 */ --esp-7: 3rem; /* 48 */ --esp-8: 4rem; /* 64 */ /* -------------------------------------------------------------------------- 1.4 RADIOS -------------------------------------------------------------------------- */ --radio-xs: 4px; --radio-sm: 8px; --radio-md: 12px; --radio-lg: 16px; --radio-xl: 24px; --radio-full: 999px; /* -------------------------------------------------------------------------- 1.5 TRANSICIONES / FOCO -------------------------------------------------------------------------- */ --trans-rapida: 120ms ease; --trans-media: 200ms ease; --foco-grosor: 3px; /* grosor del anillo de foco visible */ } /* ============================================================================ 2. TOKENS SEMÁNTICOS — TEMA JUEGO (OSCURO) [por defecto en :root] ---------------------------------------------------------------------------- Nombres semánticos estables: las pantallas usan estas variables y no los valores concretos. Cambiar de tema solo reasigna estos tokens. ========================================================================== */ :root, [data-tema="juego"] { color-scheme: dark; /* Fondos y superficies */ --fondo: #0e1524; /* fondo de página (azul-noche muy oscuro) */ --fondo-degradado: radial-gradient(1200px 600px at 50% -10%, #16233d 0%, #0e1524 60%); --superficie: #182236; /* cards / paneles */ --superficie-alt: #1f2c44; /* superficie elevada / hover de panel */ --superficie-hundida: #101827; /* inputs, zonas hundidas */ /* Bordes / separadores */ --borde: #2b3a55; --borde-fuerte: #3c4f70; /* Texto (contraste sobre --fondo/--superficie) */ --texto: #f2f6ff; /* primario (~15:1 sobre superficie) */ --texto-secundario:#b7c4dc; /* secundario (AA texto normal) */ --texto-atenuado: #8493ad; /* atenuado (AA texto grande / UI) */ --texto-sobre-acento: #0e1524; /* texto sobre rellenos claros de acento */ /* Marca / interacción principal. SEPARACIÓN CONCEPTUAL: marca ≠ familia. Este acento es el color de marca/interacción del producto y es un token INDEPENDIENTE del color de la familia Geografía. Aunque ambos son azules parecidos, no comparten valor ni uno referencia (var()) al otro: Geografía identifica una familia de conocimiento; --acento identifica acciones/interacción de la UI. */ --acento: #4c8dff; --acento-hover: #6aa8ff; --acento-activo: #3573e6; --acento-suave: rgba(76, 141, 255, 0.16); /* fondo sutil selección */ --texto-sobre-acento-principal: #0b1220; /* Estados (variantes calibradas para fondo oscuro) */ --exito: #34c56b; --exito-suave: rgba(52, 197, 107, 0.15); --exito-borde: rgba(52, 197, 107, 0.45); --error: #ff5a6a; --error-suave: rgba(255, 90, 106, 0.15); --error-borde: rgba(255, 90, 106, 0.45); --aviso: #f6b73c; --aviso-suave: rgba(246, 183, 60, 0.15); --aviso-borde: rgba(246, 183, 60, 0.45); --info: #52a8ff; --info-suave: rgba(82, 168, 255, 0.15); --info-borde: rgba(82, 168, 255, 0.45); /* Controles */ --input-fondo: var(--superficie-hundida); --input-borde: var(--borde); --input-texto: var(--texto); --input-placeholder: var(--texto-atenuado); /* Barra de progreso (pista neutra sobre la que va el relleno de familia) */ --progreso-pista: #24314a; /* ROBUSTEZ: respaldo literal del acento (#4c8dff en juego). Si --acento no resolviera (orden de carga/caché), la cadena var() no colapsa a vacío (transparente): cae a un azul literal en vez de dejar el relleno invisible. */ --progreso-relleno: var(--acento, #4c8dff); --progreso-sindatos: #2b3a55; /* estado "Sin datos": pista tenue, sin relleno */ /* Anillo de foco visible */ --foco-color: #8fbcff; /* Sombras — en tema OSCURO las sombras tradicionales apenas se perciben. Se combinan con un borde superior luminoso sutil para dar elevación; documentado: la elevación en oscuro se apoya más en luminosidad de superficie (--superficie-alt) que en sombra proyectada. */ --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --sombra-md: 0 6px 18px rgba(0, 0, 0, 0.55); --sombra-lg: 0 18px 40px rgba(0, 0, 0, 0.6); /* Acento de familia por defecto para el contexto (se sobreescribe por componente/pantalla según la familia activa). En oscuro usar -claro. */ --familia-actual: var(--familia-entretenimiento-claro); } /* ============================================================================ 3. TOKENS SEMÁNTICOS — TEMA ADMIN (CLARO) ---------------------------------------------------------------------------- Herramienta de gestión. Mantiene el azul como color principal (coherente con 02-administracion.png). Comparte la identidad y los mismos nombres semánticos que el tema juego. ========================================================================== */ [data-tema="admin"] { color-scheme: light; /* Fondos y superficies */ --fondo: #eef2f8; /* gris azulado muy claro */ --fondo-degradado: #eef2f8; --superficie: #ffffff; /* cards / paneles */ --superficie-alt: #f4f7fc; /* superficie elevada / hover */ --superficie-hundida: #f7f9fc; /* inputs */ /* Bordes / separadores */ --borde: #d9e0ec; --borde-fuerte: #c2ccdd; /* Texto (contraste sobre superficies claras) */ --texto: #17233a; /* primario (~13:1 sobre blanco) */ --texto-secundario:#48566e; /* secundario (AA texto normal) */ --texto-atenuado: #6b7890; /* atenuado (AA texto normal ~4.7:1) */ --texto-sobre-acento: #ffffff; /* Marca / interacción principal (azul admin). Mismo principio que en el tema juego: token de marca/interacción INDEPENDIENTE de la familia Geografía (marca ≠ familia). */ --acento: #2563eb; --acento-hover: #1d4ed8; --acento-activo: #1e40af; --acento-suave: rgba(37, 99, 235, 0.10); --texto-sobre-acento-principal: #ffffff; /* Estados (variantes calibradas para fondo claro, AA sobre blanco) */ --exito: #1c8049; --exito-suave: #e7f6ee; --exito-borde: #b6e0c7; --error: #c62839; --error-suave: #fdecee; --error-borde: #f2c0c6; --aviso: #9a6a00; --aviso-suave: #fdf3d9; --aviso-borde: #eed69a; --info: #1b5fbf; --info-suave: #e6effb; --info-borde: #bcd6f5; /* Controles */ --input-fondo: #ffffff; --input-borde: var(--borde-fuerte); --input-texto: var(--texto); --input-placeholder: var(--texto-atenuado); /* Barra de progreso */ --progreso-pista: #e2e8f2; /* ROBUSTEZ: respaldo literal del acento admin (#2563eb). Misma finalidad que en el tema juego: si --acento no resolviera, cae a un azul literal en vez de dejar el relleno transparente. */ --progreso-relleno: var(--acento, #2563eb); --progreso-sindatos: #e8edf5; /* Foco */ --foco-color: #1d4ed8; /* Sombras — perceptibles y suaves sobre fondo claro */ --sombra-sm: 0 1px 2px rgba(23, 35, 58, 0.08); --sombra-md: 0 4px 14px rgba(23, 35, 58, 0.10); --sombra-lg: 0 16px 36px rgba(23, 35, 58, 0.14); /* Acento de familia por defecto para contexto (en claro usar base/-oscuro) */ --familia-actual: var(--familia-entretenimiento); }