/* * MEB Tech — design tokens * Branding MEB (negro + rojo) con vocabulario "tech" (glass, grids densas, mono para datos). */ :root { /* ── Base ── * Negros más neutros y profundos (menos azulados) para una base sobria. */ --meb-bg: #0A0A0B; --meb-bg-2: #101011; --meb-bg-3: #141416; --meb-grid: rgba(255, 255, 255, 0.012); /* ── Glass surfaces ── * Superficies más planas y silenciosas: menos salto entre niveles, bordes finos. */ --meb-glass: rgba(255, 255, 255, 0.022); --meb-glass-hi: rgba(255, 255, 255, 0.04); --meb-glass-lo: rgba(255, 255, 255, 0.012); --meb-border: rgba(255, 255, 255, 0.07); --meb-border-hi: rgba(255, 255, 255, 0.13); --meb-border-lo: rgba(255, 255, 255, 0.035); --meb-blur: blur(18px) saturate(140%); /* ── Text ── */ --meb-text: #FFFFFF; --meb-text-soft: rgba(255, 255, 255, 0.78); --meb-muted: rgba(255, 255, 255, 0.55); --meb-muted-2: rgba(255, 255, 255, 0.35); --meb-muted-3: rgba(255, 255, 255, 0.18); /* ── Brand accent — rojo MEB suavizado para dark UI ── */ /* El logo en assets sigue con rojo puro; en UI bajamos saturación para no cansar la vista. */ --meb-rojo: #FF3D50; /* suavizado desde #FF0000 */ --meb-rojo-d: #E11E33; /* variante oscura */ --meb-rojo-soft: rgba(255, 61, 80, 0.10); /* Antes "glow bomb"; ahora un realce sobrio: anillo fino + sombra suave de color. */ --meb-rojo-glow: 0 0 0 1px rgba(255, 61, 80, 0.20), 0 6px 16px -8px rgba(255, 61, 80, 0.28); /* ── Semantic ── */ --meb-success: #00D07A; --meb-warn: #FFB020; --meb-info: #3DA8FF; /* ── Typography ── * Stack tipo Apple: SF Pro real en Mac (-apple-system / BlinkMacSystemFont), * Inter como fallback cross-plataforma. Más neutra y limpia que Montserrat. */ --meb-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', sans-serif; --meb-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --meb-fs-xs: 0.68rem; /* labels, tags, microcopy */ --meb-fs-sm: 0.78rem; /* nav items, secondary */ --meb-fs-md: 0.88rem; /* body */ --meb-fs-lg: 1.05rem; /* section titles */ --meb-fs-xl: 1.35rem; /* page title */ --meb-fs-display: 2.1rem; /* KPI numbers */ /* Caps ajustadas estilo Apple (antes 0.08em, demasiado "tech/tracked"). */ --meb-ls-caps: 0.03em; /* ── Radii ── esquinas más suaves y redondeadas (lenguaje Apple). */ --meb-r-xs: 6px; --meb-r-sm: 9px; --meb-r-md: 13px; --meb-r-lg: 18px; --meb-r-xl: 24px; --meb-r-full: 999px; /* ── Shadows ── * Más difusas y de menor opacidad: profundidad sin pesadez. */ --meb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --meb-shadow-md: 0 8px 28px -12px rgba(0, 0, 0, 0.55); --meb-shadow-lg: 0 28px 64px -28px rgba(0, 0, 0, 0.62); /* ── Motion ── * Vocabulario de movimiento inspirado en Apple: curvas que arrancan * con energía y aterrizan con calma (ease-out marcado), un muelle muy * contenido para lo que aparece, y tiempos algo más largos para que * todo se sienta fluido en vez de brusco. */ --meb-ease: cubic-bezier(0.32, 0.72, 0, 1); /* ease-out sedoso (transiciones y reveals) */ --meb-ease-spring: cubic-bezier(0.34, 1.28, 0.52, 1); /* muelle suave, apenas un punto de rebote */ --meb-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* entrada/salida equilibrada para estados */ --meb-dur-fast: 150ms; --meb-dur: 280ms; --meb-dur-slow: 460ms; /* ── Layout ── */ --meb-sidebar-w: 248px; --meb-sidebar-w-c: 68px; /* collapsed */ --meb-topbar-h: 56px; --meb-content-pad: 36px; } @media (prefers-reduced-motion: reduce) { :root { --meb-dur-fast: 1ms; --meb-dur: 1ms; --meb-dur-slow: 1ms; } } /* ────────────────────────────────────────────────────────────── * LIGHT THEME — toggle via [data-theme="light"] en * Mantiene el rojo MEB como acento, invierte fondos y textos. * ────────────────────────────────────────────────────────────── */ html[data-theme="light"] { color-scheme: light; --meb-bg: #F5F5F7; --meb-bg-2: #FFFFFF; --meb-bg-3: #ECECEF; --meb-grid: rgba(0, 0, 0, 0.025); --meb-glass: rgba(0, 0, 0, 0.025); --meb-glass-hi: rgba(0, 0, 0, 0.05); --meb-glass-lo: rgba(0, 0, 0, 0.012); --meb-border: rgba(0, 0, 0, 0.1); --meb-border-hi: rgba(0, 0, 0, 0.2); --meb-border-lo: rgba(0, 0, 0, 0.06); --meb-text: #0F0F0F; --meb-text-soft: rgba(15, 15, 15, 0.78); --meb-muted: rgba(15, 15, 15, 0.55); --meb-muted-2: rgba(15, 15, 15, 0.4); --meb-muted-3: rgba(15, 15, 15, 0.22); /* Acento rojo en light: rebajado y menos saturado para que sea sobrio, * no un rojo "señal de alarma". Sigue siendo el único color de marca. */ --meb-rojo: #D23344; --meb-rojo-d: #B22637; --meb-rojo-soft: rgba(210, 51, 68, 0.06); --meb-rojo-glow: 0 0 0 1px rgba(210, 51, 68, 0.12), 0 6px 16px -8px rgba(210, 51, 68, 0.14); /* Semánticos en light: versiones profundas y desaturadas. Sobre fondo * blanco los neones (verde/azul/ámbar puros) cansan; estos respiran. */ --meb-success: #1F9D6B; --meb-warn: #B5780F; --meb-info: #3A72C4; --meb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --meb-shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.16); --meb-shadow-lg: 0 24px 50px -16px rgba(0, 0, 0, 0.22); }