/* ============================================================================ tokens.css — Sistema de diseño MASTER SPORT · única fuente de verdad ---------------------------------------------------------------------------- Paleta heredada de MasterSportDemo (azul #3454D1 sobre lienzo frío) y estructura de tokens heredada del boceto: el tema oscuro y los acentos alternativos SÓLO redefinen variables, nunca reglas. El tema vive en , lo aplica un script en línea de antes del primer pintado (sin parpadeo). ========================================================================== */ :root { color-scheme: light; /* --- Marca / acento principal ------------------------------------------ Azul MasterSports. El acento es conmutable por entidad (ver más abajo). */ --ms-brand: #3454D1; --ms-brand-hover: #2B47B8; --ms-brand-active: #23399B; --ms-brand-soft: rgba(52, 84, 209, .09); --ms-brand-soft-hover: rgba(52, 84, 209, .16); --ms-brand-border: rgba(52, 84, 209, .28); --ms-on-brand: #FFFFFF; /* --- Superficies -------------------------------------------------------- */ --ms-bg: #F2F4F9; /* lienzo de la aplicación */ --ms-surface: #FFFFFF; /* tarjetas, tablas, barra lateral */ --ms-surface-2: #F7F9FC; /* cabeceras de tabla, hover suave */ --ms-surface-3: #EEF1F7; /* elemento activo, chips */ --ms-surface-4: #E4E8F0; /* barras de gráfico inactivas */ --ms-overlay: rgba(9, 16, 32, .48); /* --- Bordes ------------------------------------------------------------- */ --ms-border: #E4E8F0; --ms-border-soft: #EEF1F6; --ms-border-strong: #D3DAE8; --ms-border-focus: #3454D1; /* --- Texto -------------------------------------------------------------- */ --ms-text: #16233A; --ms-text-2: #56617A; /* text-3 se oscurece respecto al original de MasterSportDemo (#8B95A8): con ese valor las etiquetas pequeñas en mayúsculas quedaban en 2,7:1 sobre blanco, por debajo del mínimo AA. Ahora rondan 4,8:1. */ --ms-text-3: #626D85; --ms-text-4: #7C879C; /* --- Estados semánticos ------------------------------------------------ Los tonos de MasterSportDemo se oscurecen para el tema claro: en su versión vibrante (#17C666 y equivalentes) el texto sobre fondo suave se quedaba en 3,2:1. El color VIVO se conserva en los fondos (*-bg), que es donde da el aire característico de la paleta. */ --ms-success: #0F7D45; --ms-success-bg: rgba(23, 198, 102, .11); --ms-success-bd: rgba(23, 164, 91, .26); --ms-warning: #A5650B; --ms-warning-bg: rgba(255, 162, 29, .13); --ms-warning-bd: rgba(200, 122, 10, .26); --ms-danger: #D63B3B; --ms-danger-bg: rgba(234, 77, 77, .11); --ms-danger-bd: rgba(214, 59, 59, .26); --ms-info: #0E7A88; --ms-info-bg: rgba(47, 181, 196, .12); --ms-info-bd: rgba(30, 147, 162, .26); --ms-purple: #6B4AE0; --ms-purple-bg: rgba(123, 92, 240, .11); --ms-purple-bd: rgba(107, 74, 224, .26); --ms-neutral: #56617A; --ms-neutral-bg: rgba(120, 132, 155, .11); --ms-neutral-bd: rgba(120, 132, 155, .22); /* --- Sombras ------------------------------------------------------------ */ --ms-shadow-xs: 0 1px 2px rgba(16, 25, 45, .04); --ms-shadow-sm: 0 1px 2px rgba(16, 25, 45, .04), 0 4px 16px rgba(16, 25, 45, .05); --ms-shadow-md: 0 6px 16px rgba(16, 25, 45, .08), 0 2px 4px rgba(16, 25, 45, .04); --ms-shadow-lg: 0 10px 40px rgba(16, 25, 45, .16), 0 4px 12px rgba(16, 25, 45, .06); --ms-ring: 0 0 0 3px rgba(52, 84, 209, .16); --ms-ring-brand: 0 0 0 3px rgba(52, 84, 209, .20); /* --- Tipografía --------------------------------------------------------- */ --ms-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --ms-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace; --ms-fs-xs: 11px; --ms-fs-sm: 12px; --ms-fs-base: 13.5px; --ms-fs-md: 15px; --ms-fs-lg: 18px; --ms-fs-xl: 22px; --ms-fs-2xl: 29px; /* --- Radios ------------------------------------------------------------- */ --ms-radius-xs: 5px; --ms-radius-sm: 8px; --ms-radius: 10px; --ms-radius-lg: 12px; --ms-radius-xl: 16px; --ms-radius-pill: 999px; /* --- Métricas del esqueleto --------------------------------------------- */ --ms-sidebar-w: 264px; --ms-sidebar-w-mini: 76px; --ms-topbar-h: 64px; --ms-page-max: 1600px; --ms-gutter: 24px; /* --- Densidad de tablas (conmutable desde la barra superior) ------------ */ --ms-row-h: 48px; --ms-row-pad: 16px; /* --- Movimiento --------------------------------------------------------- */ --ms-ease: cubic-bezier(.4, 0, .2, 1); --ms-dur: .18s; } /* --- Densidad compacta ---------------------------------------------------- */ :root[data-ms-density="compact"] { --ms-row-h: 38px; --ms-row-pad: 11px; } /* ============================================================================ TEMA OSCURO — sólo redefine tokens ========================================================================== */ :root[data-ms-theme="dark"] { color-scheme: dark; --ms-brand: #5473EE; --ms-brand-hover: #6684F5; --ms-brand-active: #7A96F8; --ms-brand-soft: rgba(84, 115, 238, .16); --ms-brand-soft-hover: rgba(84, 115, 238, .24); --ms-brand-border: rgba(84, 115, 238, .34); --ms-on-brand: #FFFFFF; --ms-bg: #0B1220; --ms-surface: #121C2F; --ms-surface-2: #17223A; --ms-surface-3: #1D2942; --ms-surface-4: #24314C; --ms-overlay: rgba(4, 8, 16, .66); --ms-border: #223049; --ms-border-soft: #1A2540; --ms-border-strong: #2E3E5C; --ms-border-focus: #5473EE; --ms-text: #EEF2F8; --ms-text-2: #A7B3C9; --ms-text-3: #7C8CA6; --ms-text-4: #66738C; --ms-success: #35D383; --ms-success-bg: rgba(23, 198, 102, .15); --ms-success-bd: rgba(23, 198, 102, .30); --ms-warning: #FFBA4D; --ms-warning-bg: rgba(255, 162, 29, .15); --ms-warning-bd: rgba(255, 162, 29, .30); --ms-danger: #F5726F; --ms-danger-bg: rgba(234, 77, 77, .15); --ms-danger-bd: rgba(234, 77, 77, .30); --ms-info: #46CBD8; --ms-info-bg: rgba(47, 181, 196, .16); --ms-info-bd: rgba(47, 181, 196, .30); --ms-purple: #9B7BFF; --ms-purple-bg: rgba(123, 92, 240, .18); --ms-purple-bd: rgba(123, 92, 240, .32); --ms-neutral: #A7B3C9; --ms-neutral-bg: rgba(150, 165, 195, .12); --ms-neutral-bd: rgba(150, 165, 195, .22); --ms-shadow-xs: 0 1px 2px rgba(0, 0, 0, .34); --ms-shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 20px rgba(0, 0, 0, .22); --ms-shadow-md: 0 6px 16px rgba(0, 0, 0, .46); --ms-shadow-lg: 0 16px 48px rgba(0, 0, 0, .55); --ms-ring: 0 0 0 3px rgba(84, 115, 238, .26); --ms-ring-brand: 0 0 0 3px rgba(84, 115, 238, .30); } /* ============================================================================ ACENTOS ALTERNATIVOS POR ENTIDAD El azul MasterSports es el acento aprobado; los demás quedan disponibles para entidades que quieran personalizar su panel (incluido el rojo Conersys). ========================================================================== */ :root[data-ms-accent="conersys"] { --ms-brand:#CD1123; --ms-brand-hover:#B50E1F; --ms-brand-active:#9A0C1A; --ms-brand-soft:rgba(205,17,35,.10); --ms-brand-soft-hover:rgba(205,17,35,.16); --ms-brand-border:rgba(205,17,35,.28); --ms-border-focus:#CD1123; --ms-ring:0 0 0 3px rgba(205,17,35,.18); --ms-ring-brand:0 0 0 3px rgba(205,17,35,.20); } :root[data-ms-accent="ocean"] { --ms-brand:#0E7490; --ms-brand-hover:#0B5C73; --ms-brand-active:#094B5E; --ms-brand-soft:rgba(14,116,144,.10); --ms-brand-soft-hover:rgba(14,116,144,.16); --ms-brand-border:rgba(14,116,144,.28); --ms-border-focus:#0E7490; --ms-ring:0 0 0 3px rgba(14,116,144,.18); --ms-ring-brand:0 0 0 3px rgba(14,116,144,.20); } :root[data-ms-accent="violet"] { --ms-brand:#6B4AE0; --ms-brand-hover:#5A3BC9; --ms-brand-active:#4C31AC; --ms-brand-soft:rgba(107,74,224,.10); --ms-brand-soft-hover:rgba(107,74,224,.16); --ms-brand-border:rgba(107,74,224,.28); --ms-border-focus:#6B4AE0; --ms-ring:0 0 0 3px rgba(107,74,224,.18); --ms-ring-brand:0 0 0 3px rgba(107,74,224,.20); } :root[data-ms-theme="dark"][data-ms-accent="conersys"] { --ms-brand:#F0564A; --ms-brand-hover:#FF6C60; --ms-brand-active:#FF867B; --ms-brand-soft:rgba(240,86,74,.16); --ms-brand-soft-hover:rgba(240,86,74,.24); --ms-brand-border:rgba(240,86,74,.34); --ms-border-focus:#F0564A; } :root[data-ms-theme="dark"][data-ms-accent="ocean"] { --ms-brand:#38BDF8; --ms-brand-hover:#5BCBFA; --ms-brand-active:#7DD8FB; --ms-on-brand:#062430; --ms-brand-soft:rgba(56,189,248,.16); --ms-brand-soft-hover:rgba(56,189,248,.24); --ms-brand-border:rgba(56,189,248,.34); --ms-border-focus:#38BDF8; } :root[data-ms-theme="dark"][data-ms-accent="violet"] { --ms-brand:#9B7BFF; --ms-brand-hover:#AE92FF; --ms-brand-active:#C0A9FF; --ms-brand-soft:rgba(155,123,255,.16); --ms-brand-soft-hover:rgba(155,123,255,.24); --ms-brand-border:rgba(155,123,255,.34); --ms-border-focus:#9B7BFF; }