/* Million Automations — shared design kit (the default look for any MA site).
*
* Drop-in (3 lines) for a new MA site or dashboard:
*
*
*
* ...and set (light is the MA default; "dark" also supported).
*
* Provides: MA fonts (Space Grotesk headings + Inter body), the brand light-theme
* token set, base typography, and a translucent .ma-panel card that reads well
* over the constellation background. Page-specific components reference the vars.
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root,
:root[data-theme='light'] {
--ma-bg: #eaf1fb; /* cool near-white; nodebg paints its own light field over this */
--ma-panel: rgba(255,255,255,0.80);
--ma-panel-2: rgba(255,255,255,0.55);
--ma-panel-solid: #ffffff;
--ma-ink: #0c1b30; /* deep navy — headings + numbers */
--ma-ink-2: #33465f; /* body */
--ma-muted: #5a6b82; /* labels (≥4.5:1 on white) */
--ma-line: rgba(12,27,48,0.10);
--ma-line-2: rgba(12,27,48,0.16);
--ma-brand: #06b6d4; /* MA cyan — fills, meters, nodes */
--ma-brand-2: #7fe0f2;
--ma-brand-strong: #0e7490; /* cyan text on white (contrast-safe) */
--ma-brand-ink: #ffffff; /* text on a brand fill */
--ma-track: rgba(12,27,48,0.07);
--ma-good: #059669;
--ma-bad: #e11d48;
--ma-shadow: 0 18px 40px -22px rgba(8,25,53,0.45);
--ma-r: 14px;
--ma-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--ma-head: 'Space Grotesk', var(--ma-sans);
color-scheme: light;
}
:root[data-theme='dark'] {
--ma-bg: #050b18;
--ma-panel: rgba(12,27,48,0.66);
--ma-panel-2: rgba(255,255,255,0.05);
--ma-panel-solid: #0c1b30;
--ma-ink: #f2f7ff;
--ma-ink-2: #c9d4e5;
--ma-muted: #9fb0c8;
--ma-line: rgba(255,255,255,0.12);
--ma-line-2: rgba(255,255,255,0.18);
--ma-brand: #22d3ee;
--ma-brand-2: #7fe0f2;
--ma-brand-strong: #67e8f9;
--ma-brand-ink: #04222b;
--ma-track: rgba(255,255,255,0.08);
--ma-good: #34d399;
--ma-bad: #fb7185;
--ma-shadow: 0 22px 50px -18px rgba(0,0,0,0.7);
color-scheme: dark;
}
.ma-base {
margin: 0;
font-family: var(--ma-sans);
font-size: 14px;
line-height: 1.5;
color: var(--ma-ink-2);
background: var(--ma-bg);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
.ma-base h1, .ma-base h2, .ma-base h3 {
font-family: var(--ma-head);
color: var(--ma-ink);
text-wrap: balance;
}
.ma-panel {
background: var(--ma-panel);
border: 1px solid var(--ma-line);
border-radius: var(--ma-r);
backdrop-filter: blur(10px) saturate(1.15);
-webkit-backdrop-filter: blur(10px) saturate(1.15);
box-shadow: var(--ma-shadow);
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* ===== ma-ui contract v1 — portal switcher =====
* Pairs with /ma-ui.js MAUI.portalStrip(). Surfaces USE these classes, never DEFINE them:
* each surface's own