/* ============================================================================ SonidoenRed — TOKENS Único origen de verdad del sistema de diseño. Se carga ANTES que cualquier otra hoja. Ver DESIGN-GUIDE.md. Capas: L1 Primitivas — no dependen del tema (tipografía, espacio, radios, motion) L2 Semánticas — color y elevación, con override en [data-theme="dark"] L3 Compatibilidad— nombres antiguos que aún consumen las 22 hojas restantes El bloque claro se declara en :root y también en [data-theme="light"], para poder forzar una isla clara dentro de una página oscura (lo usa el styleguide para enseñar las dos paletas a la vez). BREAKPOINTS (no pueden ser variables: @media no acepta var()). El código nuevo usa SOLO estos cinco, siempre en min-width, móvil primero: 480px móvil grande 640px phablet / 2 columnas 768px tablet 1024px escritorio 1280px ancho El código antiguo conserva los suyos hasta que se migre su página. ============================================================================ */ :root, [data-theme="light"] { /* ========================================================================== L1 — PRIMITIVAS ========================================================================== */ /* --- Familias ----------------------------------------------------------- */ --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* --- Escala tipográfica ------------------------------------------------- Sustituye la improvisación de 14.5 / 13.5 / 12.5px por 15 / 14 / 13. Space Grotesk llega hasta 700: no existe un peso 800 en este sistema. */ --fs-display-xl: clamp(40px, 6vw, 68px); --fs-display-lg: clamp(30px, 4vw, 44px); --fs-display-md: clamp(24px, 3vw, 32px); --fs-xl: 20px; --fs-lg: 18px; --fs-md: 16px; --fs-base: 15px; --fs-sm: 14px; --fs-xs: 13px; --fs-2xs: 11px; --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tighter: -.03em; --ls-tight: -.02em; --ls-normal: 0; --ls-wide: .09em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- Espaciado (base 4px) ----------------------------------------------- */ --space-0: 0; --space-px: 1px; --space-05: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; --section-y: clamp(70px, 9vw, 110px); --gutter: clamp(16px, 4vw, 24px); /* --- Radios ------------------------------------------------------------- Absorben los 8/11/12/13/14/16/18/20/22/28 hardcodeados de hoy. --radius-btn y --radius-card van con nombre porque son los dos que definen el carácter del sistema y se repiten por todas partes. */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 28px; --radius-pill: 999px; --radius-btn: 13px; --radius-card: 18px; /* --- Motion ------------------------------------------------------------- --dur-slow debe quedarse por debajo de los 300ms que main.js:75 espera antes de poner hidden en el menú móvil. */ --dur-instant: 90ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 290ms; --dur-slower: 500ms; --dur-reveal: 700ms; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-standard: cubic-bezier(.4, 0, .2, 1); /* --- Layout ------------------------------------------------------------- --header-h está CONGELADO en 68px: 26 reglas de 12 hojas lo usan para offsets sticky y scroll-margin-top. Cambiarlo descoloca barras de filtros y anclas en toda la web. */ --container: 1200px; --container-narrow: 760px; --container-wide: 1360px; --header-h: 68px; /* --- Capas -------------------------------------------------------------- */ --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-drawer: 500; --z-toast: 600; --z-progress: 700; /* ========================================================================== L2 — SEMÁNTICAS (modo claro) ========================================================================== */ /* --- Marca -------------------------------------------------------------- #7A0CFF es el ancla de identidad. 6.3:1 sobre blanco → AA. --accent-rgb existe para que las sombras de acento sigan al tema en vez de quedarse con el morado claro hardcodeado. */ --accent: #7A0CFF; --accent-rgb: 122 12 255; --accent-strong: #6200E0; --accent-soft: #F3EBFF; --accent-border: #E2D1FF; --accent-contrast: #FFFFFF; --accent-cyan: #22B8D6; /* --- Superficies --------------------------------------------------------- */ --bg: #FFFFFF; --bg-alt: #F7F5FC; --surface: #FFFFFF; --surface-2: #FBFAFE; --surface-3: #F3F0FA; --overlay: rgba(8, 5, 16, .55); /* Lienzo para fotos de catálogo. Blanco en los dos temas a propósito: las imágenes vienen recortadas con fondo blanco cocido, así que sobre cualquier otro color se ve un rectángulo dentro de otro. */ --photo: #FFFFFF; /* --- Texto --------------------------------------------------------------- Contraste sobre --bg en claro: ink 17.6:1 · ink-soft 7.7:1 · ink-faint 5.4:1. ink-faint era #8A8398 y daba 3.6:1, por debajo de AA para texto normal, y se usa para metadatos (fechas, contadores) en toda la web. Se oscurece. */ --ink: #15101F; --ink-soft: #574F66; --ink-faint: #6E6780; --ink-inverse: #FFFFFF; /* --- Bordes -------------------------------------------------------------- */ --border: #ECE8F4; --border-strong: #DDD6EC; --focus-ring: #7A0CFF; /* --- Estados ------------------------------------------------------------- */ --success: #1B9E4B; --success-soft: #E7F6EC; --success-border: #BCE6CB; --danger: #C13737; --danger-soft: #FBEAEA; --danger-border: #F58F8F; /* Texto legible sobre --danger. En oscuro el rojo se aclara y el blanco baja a 2,5:1, así que ahí el contraste lo da la tinta oscura. */ --danger-contrast: #FFFFFF; --warning: #C98A00; --warning-soft: #FBF3DF; --warning-border: #E8CE8A; --info: #0B84BA; --info-soft: #E6F4FA; --info-border: #A8D8EA; --star: #F5A524; /* --- Elevación ----------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(21, 16, 31, .05); --shadow-sm: 0 1px 2px rgba(21, 16, 31, .04), 0 2px 6px rgba(21, 16, 31, .04); --shadow-md: 0 4px 12px rgba(21, 16, 31, .06), 0 12px 32px rgba(21, 16, 31, .07); --shadow-lg: 0 12px 28px rgba(21, 16, 31, .10), 0 28px 60px rgba(21, 16, 31, .10); --shadow-xl: 0 24px 48px rgba(21, 16, 31, .14), 0 48px 96px rgba(21, 16, 31, .12); --shadow-accent-sm: 0 6px 18px rgb(var(--accent-rgb) / .28); --shadow-accent-md: 0 10px 26px rgb(var(--accent-rgb) / .38); /* --- Series de datos (gráficos del panel) -------------------------------- Orden fijo: el color va con la entidad (macOS, Windows, Linux), nunca con su posición en el ranking. No son los colores de marca tal cual: están ajustados para que se distingan con daltonismo y contrasten 3:1 contra --surface. Si añades una serie, no inventes un color: agrupa en «Otros». */ --chart-1: #7A0CFF; --chart-2: #0E8FA8; --chart-3: #B8730A; --chart-otros: #8A8398; --chart-grid: #EFECF6; /* ========================================================================== L3 — COMPATIBILIDAD CON NOMBRES ANTIGUOS Las otras 22 hojas (~10.800 líneas) consumen estos nombres. La sustitución de custom properties se resuelve contra el valor EN CASCADA del mismo elemento, así que un alias definido aquí sigue automáticamente al valor que [data-theme="dark"] ponga más abajo: no hace falta repetirlos en el bloque oscuro. TIER A — alias: el valor nuevo y el viejo ya coincidían. ========================================================================== */ --text-color-accent-default: var(--accent); --icon-color-accent-default: var(--accent); --background-color-primary-default: var(--bg); --background-color-accent-default: var(--accent-soft); --background-color-error-default: var(--danger-soft); --text-color-success-default: var(--success); --icon-color-success-default: var(--success); --text-color-error-default: var(--danger); --icon-color-error-default: var(--danger); --text-color-link-default: var(--info); /* --- TIER B — CONGELADOS ------------------------------------------------- Su valor antiguo NO coincide con el nuevo y aliasarlos repintaría cientos de reglas de páginas todavía sin migrar. Se quedan con su literal exacto (claro y oscuro) hasta que se migre la página que los consume. Descongelar es parte de la migración de cada página, no de este paso. */ --color-accent-default: #7A0CFF; /* FROZEN — 44 usos */ --text-color-primary-default: #2D2D31; /* FROZEN — 40 usos */ --text-color-secondary-default: #71717A; /* FROZEN — 48 usos */ --border-color-primary-default: #71717A; /* FROZEN */ --border-color-secondary-default: #C6C6CA; /* FROZEN — 56 usos */ --border-color-accent-default: #CA9EFF; /* FROZEN */ --border-color-error-default: #F58F8F; /* FROZEN */ --icon-color-primary-default: #2D2D31; /* FROZEN */ --icon-color-secondary-default: #71717A; /* FROZEN */ --color-text-original: #22252F; /* FROZEN — relleno de SVG de marca */ --color-text-light: #E9E9EE; /* FROZEN — relleno de SVG de marca */ --color-bg-default: #22252F; /* FROZEN — relleno de SVG de marca */ --color-corner-outline: #2D2D31; /* FROZEN */ --color-label-default: #F1F1F2; /* FROZEN */ /* --- TIER C — estructurales, alias con valor idéntico --------------------- */ --spacing-xxs: var(--space-1); --spacing-xs: var(--space-2); --spacing-sm: var(--space-3); --spacing-md: var(--space-4); --spacing-lg: var(--space-5); --spacing-xl: var(--space-6); --spacing-xxl: var(--space-7); --corner-radius-xs: var(--radius-xs); /* 8 — 11 usos */ --corner-radius-sm: var(--radius-sm); /* 12 — 16 usos */ --corner-radius-md: var(--radius-md); /* 16 — 10 usos */ --corner-radius-lg: var(--radius-lg); /* 20 — 1 uso */ --corner-radius-xl: var(--radius-xl); /* 24 — 15 usos */ --header-height: var(--header-h); --content-max-horizontal-padding: 20px; --content-max-horizontal-padding-mb: 8px; --content-max-vertical-padding-16: 16px; --content-max-vertical-padding-32: 32px; --content-max-vertical-padding-64: 64px; /* --- Nombres huérfanos --------------------------------------------------- Se referencian en el CSS existente pero no estaban definidos en ninguna parte. Dos de ellos eran fallos reales sin fallback: comparator/comparator.css:745 background: var(--background-color-secondary-default) training/index.css:566 color: var(--text-color-muted) Ambos resolvían a inválido. Definirlos aquí los arregla. */ --color-border: var(--border); --color-surface: var(--surface); --color-surface-2: var(--surface-2); --color-text: var(--ink); --color-text-muted: var(--ink-faint); --text-color-muted: var(--ink-faint); --color-accent-hover: var(--accent-strong); --background-color-secondary-default: var(--surface-2); } /* ============================================================================ MODO OSCURO Selector de atributo a secas (no html[data-theme]) a propósito: permite pintar una isla oscura dentro de una página clara (
) para las muestras comparadas del styleguide. Solo se redefinen las semánticas. Los alias del Tier A y C las siguen solos. ============================================================================ */ [data-theme="dark"] { /* --- Marca --------------------------------------------------------------- El morado se aclara para mantener AA sobre fondo oscuro: #A66BFF da 5.8:1 sobre --bg. Y el texto SOBRE el acento pasa a ser casi negro: blanco sobre #A66BFF solo daría 3.4:1, que no llega a AA para texto normal. */ --accent: #A66BFF; --accent-rgb: 166 107 255; --accent-strong: #8A3CFF; --accent-soft: rgba(166, 107, 255, .13); --accent-border: rgba(166, 107, 255, .32); --accent-contrast: #100B1A; --accent-cyan: #3AD2EF; /* --- Superficies --------------------------------------------------------- */ --bg: #0C0913; --bg-alt: #100B1A; --surface: #15101F; --surface-2: #1A1428; --surface-3: #211A32; --overlay: rgba(4, 2, 9, .68); /* --- Texto --------------------------------------------------------------- */ --ink: #F5F2FB; --ink-soft: #B4ADC4; --ink-faint: #7E7791; --ink-inverse: #15101F; /* --- Bordes -------------------------------------------------------------- */ --border: #251D38; --border-strong: #322749; --focus-ring: #A66BFF; /* --- Estados ------------------------------------------------------------- danger-soft, warning, warning-soft y star no tenían valor oscuro: se quedaban con el fondo claro sobre #0C0913. */ --success: #34D87A; --success-soft: rgba(52, 216, 122, .12); --success-border: rgba(52, 216, 122, .3); --danger: #FF8080; --danger-soft: rgba(255, 128, 128, .12); --danger-border: rgba(255, 128, 128, .32); --danger-contrast: #2A0E0E; --warning: #F0B429; --warning-soft: rgba(240, 180, 41, .12); --warning-border: rgba(240, 180, 41, .32); --info: #60B4E4; --info-soft: rgba(96, 180, 228, .12); --info-border: rgba(96, 180, 228, .32); --star: #FFB020; /* --- Elevación ----------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 6px 20px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); --shadow-xl: 0 28px 64px rgba(0, 0, 0, .62); /* --- Series de datos en oscuro ------------------------------------------- No es el claro aclarado: son sus propios pasos validados contra la superficie oscura. */ --chart-1: #A66BFF; --chart-2: #1B96AF; --chart-3: #C07F14; --chart-otros: #7E7791; --chart-grid: #221B33; /* --- TIER B en oscuro — congelados igual que en claro --------------------- */ --color-accent-default: #9333EA; /* FROZEN */ --text-color-primary-default: #EEEEF5; /* FROZEN */ --text-color-secondary-default: #8888A0; /* FROZEN */ --border-color-primary-default: #3A3A50; /* FROZEN */ --border-color-secondary-default: #252535; /* FROZEN */ --border-color-accent-default: #4A1E9E; /* FROZEN */ --border-color-error-default: #7A2020; /* FROZEN */ --icon-color-primary-default: #EEEEF5; /* FROZEN */ --icon-color-secondary-default: #8888A0; /* FROZEN */ --color-text-original: #EEEEF5; /* FROZEN */ --color-text-light: #EEEEF5; /* FROZEN */ --color-bg-default: #06060D; /* FROZEN */ --color-corner-outline: #1E1E2E; /* FROZEN */ --color-label-default: #F1F1F2; /* FROZEN */ }