/* ============================================================ Theme: Glass-Mono · Black & White with Blur The glass look stripped of color. Translucent surfaces with backdrop blur, but the accent is pure ink: black buttons in light mode, white buttons in dark mode. Maximum contrast, minimum hue. Activate with `data-template="glass-mono"` on or . ============================================================ */ [data-template="glass-mono"] { --font-display: "Inter Tight", "Inter", system-ui, sans-serif; --tracking-display: -0.045em; /* Estados sobrios — desaturated */ --leaf: #16A34A; /* green-600 */ --warn: #CA8A04; /* yellow-600 */ --danger: #DC2626; /* red-600 */ --info: #525252; /* neutral info */ /* Radios suaves */ --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; /* Sombras neutras */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 8px 24px rgba(0,0,0,0.10); --shadow-lg: 0 24px 60px rgba(0,0,0,0.16); --page-pad: 24px; --topbar-h: 60px; } /* Glass-Mono · light: superficies blancas semitransparentes, acento NEGRO (botones primarios negros sobre fondo blanco). */ [data-template="glass-mono"][data-theme="erplora-light"] { --bg: #F5F5F5; --bg-1: rgba(255, 255, 255, 0.78); --bg-2: rgba(255, 255, 255, 0.70); --bg-3: rgba(245, 245, 245, 0.85); --bg-4: rgba(229, 229, 229, 0.85); --line: rgba(0, 0, 0, 0.07); --line-2: rgba(0, 0, 0, 0.13); --line-3: rgba(0, 0, 0, 0.24); --ink: #0A0A0A; --ink-2: #404040; --ink-3: #737373; --ink-4: #A3A3A3; --brand: #0A0A0A; /* black */ --brand-2: #000000; --brand-3: #404040; --brand-fg: #FFFFFF; --brand-soft: rgba(0, 0, 0, 0.08); color-scheme: light; } /* Glass-Mono · dark: superficies oscuras semitransparentes, acento BLANCO (botones primarios blancos sobre fondo oscuro). */ [data-template="glass-mono"][data-theme="erplora"] { --bg: #0A0A0A; --bg-1: rgba(20, 20, 20, 0.55); --bg-2: rgba(28, 28, 28, 0.50); --bg-3: rgba(38, 38, 38, 0.55); --bg-4: rgba(60, 60, 60, 0.60); --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16); --line-3: rgba(255, 255, 255, 0.28); --ink: #FAFAFA; --ink-2: #D4D4D4; --ink-3: #A3A3A3; --ink-4: #525252; --brand: #FAFAFA; /* white */ --brand-2: #FFFFFF; --brand-3: #D4D4D4; --brand-fg: #0A0A0A; /* black ink on white */ --brand-soft: rgba(255, 255, 255, 0.10); color-scheme: dark; } /* Blur en las superficies clave (igual que glass.css) */ [data-template="glass-mono"] .card, [data-template="glass-mono"] .app-topbar, [data-template="glass-mono"] .topbar, [data-template="glass-mono"] .sidebar, [data-template="glass-mono"] .modal, [data-template="glass-mono"] .drawer, [data-template="glass-mono"] .popover, [data-template="glass-mono"] .toast, [data-template="glass-mono"] .table-wrap { backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); } [data-template="glass-mono"] .card, [data-template="glass-mono"] .app-topbar, [data-template="glass-mono"] .topbar, [data-template="glass-mono"] .sidebar, [data-template="glass-mono"] .modal, [data-template="glass-mono"] .drawer, [data-template="glass-mono"] .popover, [data-template="glass-mono"] .toast, [data-template="glass-mono"] .table-wrap { backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }