/* ═══════════════════════════════════════════════════════════════ mbanc.ai — Themes Three selectable skins. Each overrides the shared --mb-* tokens, so anything that consumes them re-colors automatically. Default (:root) = Twilight Lift. Switch by setting / "horizon" / "twilight". New tokens added here (page bg, header, core, grid) let full-page chrome theme too — consume them instead of hardcoding literals. ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── A · TWILIGHT LIFT — lit indigo→plum, orange spotlight (DEFAULT) ───────────────────────────────────────────────────────────── */ :root, :root[data-theme="twilight"] { --mb-red: #ff5a2c; --mb-red-2: #ff7a4d; --mb-red-dim: #d83415; --mb-ember: #ff8f66; --mb-red-glow: rgba(255, 90, 44, 0.45); --mb-red-soft: rgba(255, 90, 44, 0.10); --mb-ink: #eaf0ff; --mb-ink-2: #c4d0f0; --mb-ink-3: #8794c0; --mb-ink-4: #4a5688; --mb-ink-soft: #a6b2d8; --mb-success: #3ddc84; --mb-success-glow: rgba(61, 220, 132, 0.40); --mb-navy: #1b2452; --mb-navy-2: #26346e; --mb-navy-3: #3a4a8a; --mb-glass: rgba(48, 68, 132, 0.42); --mb-glass-2: rgba(48, 68, 132, 0.32); --mb-glass-hover: rgba(70, 92, 165, 0.52); --mb-glass-strong: rgba(30, 42, 90, 0.72); --mb-hairline: rgba(255, 255, 255, 0.16); --mb-hairline-2: rgba(255, 255, 255, 0.05); /* full-page chrome */ --mb-page-bg: radial-gradient(ellipse 92% 82% at 50% 28%, #2c3c78 0%, #1f2858 44%, #161d44 100%); --mb-scene-opacity: 0.35; /* @kind other */ --mb-grid-line: rgba(255, 255, 255, 0.035); --mb-header-bg: linear-gradient(180deg, rgba(27,36,82,0.72) 0%, rgba(27,36,82,0.28) 74%, transparent 100%); --mb-core-fill: rgba(40, 58, 120, 0.50); --mb-core-glow: 0 0 60px 15px color-mix(in srgb, var(--mb-red) 35%, transparent), 0 0 120px 40px color-mix(in srgb, var(--mb-red) 25%, transparent), 0 0 200px 70px color-mix(in srgb, var(--mb-red) 18%, transparent), inset 0 0 100px color-mix(in srgb, var(--mb-red) 20%, transparent), inset 0 0 0 1px var(--mb-hairline); --mb-core-glow-2: 0 0 80px 25px color-mix(in srgb, var(--mb-red) 45%, transparent), 0 0 160px 60px color-mix(in srgb, var(--mb-red) 32%, transparent), 0 0 260px 100px color-mix(in srgb, var(--mb-red) 22%, transparent), inset 0 0 120px color-mix(in srgb, var(--mb-red) 25%, transparent), inset 0 0 0 1px var(--mb-hairline); --mb-rings-opacity: 1; /* @kind other */ --mb-shadow-card: 0 8px 32px rgba(10, 14, 40, 0.40); --mb-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.10); color-scheme: dark; } /* ───────────────────────────────────────────────────────────── B · FROST / DAYLIGHT — cool paper-white, navy ink, orange accent ───────────────────────────────────────────────────────────── */ :root[data-theme="frost"] { --mb-red: #e8410f; --mb-red-2: #ff5a2c; --mb-red-dim: #c2350a; --mb-ember: #d64a1a; --mb-red-glow: rgba(232, 65, 15, 0.30); --mb-red-soft: rgba(232, 65, 15, 0.08); --mb-ink: #16233f; --mb-ink-2: #3a4a6b; --mb-ink-3: #6b7a99; --mb-ink-4: #9aa8c2; --mb-ink-soft: #55627e; --mb-success: #12b34a; --mb-success-glow: rgba(18, 179, 74, 0.35); --mb-navy: #eef2fa; --mb-navy-2: #e3eaf6; --mb-navy-3: #d7e0f0; --mb-glass: rgba(255, 255, 255, 0.80); --mb-glass-2: rgba(255, 255, 255, 0.66); --mb-glass-hover: rgba(255, 255, 255, 0.94); --mb-glass-strong: rgba(255, 255, 255, 0.86); --mb-hairline: rgba(38, 58, 110, 0.18); --mb-hairline-2: rgba(38, 58, 110, 0.08); --mb-page-bg: radial-gradient(ellipse 95% 85% at 50% 22%, #eaf0f9 0%, #dbe3f1 52%, #eef0f4 100%); --mb-scene-opacity: 0; /* @kind other */ --mb-grid-line: rgba(38, 58, 110, 0.06); --mb-header-bg: linear-gradient(180deg, rgba(238,242,250,0.86) 0%, rgba(238,242,250,0.4) 74%, transparent 100%); --mb-core-fill: rgba(255, 255, 255, 0.78); --mb-core-glow: 0 0 40px 4px color-mix(in srgb, var(--mb-red) 14%, transparent), 0 0 90px 24px color-mix(in srgb, var(--mb-red) 8%, transparent), 0 18px 44px -10px rgba(38, 58, 110, 0.28), inset 0 0 44px rgba(255, 255, 255, 0.55), inset 0 0 0 1px var(--mb-hairline); --mb-core-glow-2: 0 0 54px 8px color-mix(in srgb, var(--mb-red) 18%, transparent), 0 0 108px 30px color-mix(in srgb, var(--mb-red) 10%, transparent), 0 18px 44px -10px rgba(38, 58, 110, 0.28), inset 0 0 50px rgba(255, 255, 255, 0.55), inset 0 0 0 1px var(--mb-hairline); --mb-rings-opacity: 0.5; /* @kind other */ --mb-shadow-card: 0 14px 40px -6px rgba(38, 58, 110, 0.22), 0 2px 8px rgba(38, 58, 110, 0.10); --mb-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.95); color-scheme: light; } /* ───────────────────────────────────────────────────────────── D · WARM HORIZON — dusk navy resolving to a sunrise horizon ───────────────────────────────────────────────────────────── */ :root[data-theme="horizon"] { --mb-red: #ff5a2c; --mb-red-2: #ff7a4d; --mb-red-dim: #e0441c; --mb-ember: #ffb38f; --mb-red-glow: rgba(255, 90, 40, 0.50); --mb-red-soft: rgba(255, 90, 40, 0.10); --mb-ink: #f5ecef; --mb-ink-2: #e0d0dc; --mb-ink-3: #b09aa8; --mb-ink-4: #6a5866; --mb-ink-soft: #c8b4c0; --mb-success: #5fe08f; --mb-success-glow: rgba(95, 224, 143, 0.40); --mb-navy: #26314f; --mb-navy-2: #4a3a54; --mb-navy-3: #6a4a52; --mb-glass: rgba(60, 52, 80, 0.42); --mb-glass-2: rgba(60, 52, 80, 0.32); --mb-glass-hover: rgba(85, 72, 105, 0.52); --mb-glass-strong: rgba(45, 38, 60, 0.72); --mb-hairline: rgba(255, 255, 255, 0.18); --mb-hairline-2: rgba(255, 255, 255, 0.06); --mb-page-bg: linear-gradient(170deg, #26314f 0%, #4a3a54 45%, #8a4a44 75%, #c96b3d 100%); --mb-scene-opacity: 0.22; /* @kind other */ --mb-grid-line: rgba(255, 255, 255, 0.03); --mb-header-bg: linear-gradient(180deg, rgba(38,49,79,0.72) 0%, rgba(38,49,79,0.28) 74%, transparent 100%); --mb-core-fill: rgba(60, 52, 80, 0.50); --mb-core-glow: 0 0 60px 15px color-mix(in srgb, var(--mb-red) 35%, transparent), 0 0 120px 40px color-mix(in srgb, var(--mb-red) 25%, transparent), 0 0 200px 70px color-mix(in srgb, var(--mb-red) 18%, transparent), inset 0 0 100px color-mix(in srgb, var(--mb-red) 20%, transparent), inset 0 0 0 1px var(--mb-hairline); --mb-core-glow-2: 0 0 80px 25px color-mix(in srgb, var(--mb-red) 45%, transparent), 0 0 160px 60px color-mix(in srgb, var(--mb-red) 32%, transparent), 0 0 260px 100px color-mix(in srgb, var(--mb-red) 22%, transparent), inset 0 0 120px color-mix(in srgb, var(--mb-red) 25%, transparent), inset 0 0 0 1px var(--mb-hairline); --mb-rings-opacity: 1; /* @kind other */ --mb-shadow-card: 0 8px 32px rgba(20, 14, 20, 0.42); --mb-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.12); color-scheme: dark; }