/* micro-substrate UI — Microcelium design system port. * Ported from microcelium-website-pelican (themes/microcelium-theme/static/css/style.css) * 2026-05-29. Tokens + component shapes (cards, buttons, forms, tables, * badges, focus ring); substrate-specific layout (sidebar, table-scroll, * fleet-grid, build-cards, tab-nav, HTMX morph hooks) is preserved. * * Theme handling: * - :root carries the dark palette as the default (matches the website). * - data-theme="light" forces the light palette. * - data-theme="dark" forces the dark palette (already :root, no override). * - data-theme="auto" + bare follow @media (prefers-color-scheme). * The inline boot script in base.html.j2 sets the attribute before paint. */ /* ============================================================ 0. Self-hosted webfonts ============================================================ */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/spacegrotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/spacegrotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================ 1. Tokens (dark — default :root, matches the website) ============================================================ */ :root { /* Surface tiers — Instrument: deep slate-blue ground, cool panels. Retuned 2026-07-07 (editorial refresh, Direction A). The whole visual identity lives in these token values; the 74 templates and the kit are untouched. */ --bg-abyss: #070c17; --bg-deep: #0b1220; --bg-mid: #0f1a2e; --bg-surface: #132038; --bg-surface-hover: #1a2c49; --bg-elevated: #16253f; --bg-code: #0a101d; /* Brand palette: Microcelium cyber-cyan accent (matches the website). The trio is collapsed onto the cyan family — accent (cyan), a slightly deeper dim, a soft cyan-teal alt for the rare second-signal (queued/visited/alt tints), and a brighter cyan pop for orphaned. No lavender/magenta — one coherent cyan identity on the deeper slate Instrument ground. */ --accent: #00e5e3; --accent-dim: #00c4c2; --accent-glow: rgba(0, 229, 227, 0.12); --accent-glow-md: rgba(0, 229, 227, 0.25); --accent-glow-strong: rgba(0, 229, 227, 0.42); --accent-alt: #7fdedd; --accent-alt-dim: #5cc9c8; --accent-alt-glow: rgba(127, 222, 221, 0.15); --accent-pop: #4df3f0; --accent-pop-glow: rgba(77, 243, 240, 0.16); /* Text — slate-blue biased neutrals, not pure grey. */ --text-bright: #eef3fb; --text-primary: #dce6f5; --text-secondary: #8ea0bd; --text-muted: #7488a8; --text-dim: #66799a; /* Borders — hairline slate rules. */ --border: #1e2c44; --border-light: #2c3d5c; /* Status — semantic, held apart from the blue accent. */ --success: #34d399; --warn: #fbbf24; --danger: #f87171; /* UI-VIZ-1 micro-visualisation tokens — the ONLY colours the viz kit (_viz.html.j2: meters, sparks, stat chips) may use. Aliases of the semantic set so a re-theme stays one edit; --viz-tick is the one theme-specific literal (track tick marks). */ --viz-ok: var(--success); --viz-warn: var(--warn); --viz-crit: var(--danger); --viz-accent: var(--accent); --viz-track: var(--border); --viz-tick: rgba(255, 255, 255, 0.10); /* Surface tints (cards, dashed borders, faint backgrounds) */ --accent-bg-tint: rgba(0, 229, 227, 0.06); --accent-alt-bg-tint: rgba(127, 222, 221, 0.05); --accent-alt-border-dashed: rgba(127, 222, 221, 0.5); /* Focus ring — glow rather than hard outline */ --focus-ring: 0 0 0 3px var(--accent-glow-md); --focus-ring-offset: 2px; /* Typography */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Outfit', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', "SF Mono", Menlo, Consolas, monospace; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; /* Container widths */ --container: 1200px; --container-narrow: 800px; --container-wide: 1400px; --nav-height: 4rem; /* Motion */ --transition-fast: 150ms ease; --transition: 300ms ease; --transition-slow: 500ms ease; /* Radii */ --radius-sm: 0.375rem; --radius: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; /* ----- Substrate aliases for legacy var names ----- * Rules elsewhere in the file (and in macros emitted from templates) * reference these short names. Map them onto the website token set * so we don't have to chase every callsite. */ --fg: var(--text-primary); --muted: var(--text-muted); --bg: var(--bg-abyss); --card: var(--bg-surface); --accent-visited: var(--accent-alt); --error: var(--danger); --error-bg: rgba(248, 113, 113, 0.10); --error-border: rgba(248, 113, 113, 0.35); --pass: var(--success); --fail: var(--danger); --skip: var(--text-muted); --code-bg: var(--bg-code); --th-bg: var(--bg-surface-hover); /* Role chips — shade off the existing brand palette rather than * inventing new hues. Default chip stays lavender (--accent-alt); * the three "loud" roles each pick a distinct band: * firewall → magenta (--accent-pop, the brand's "danger-ish loud" * token; reads as edge/policy without colliding with * the actual --danger red used for failed statuses); * nas → blue-cool (a darker, more saturated shade than the * cyan accent, so storage reads as "different" from * control-plane info-chrome); * gateway → cyan (--accent), echoing the brand's primary cyan * for ingress / north-south flow. * Bastion / control-plane / appliance / workload reuse the default * lavender so the operator-facing change is opt-in per role. */ --role-firewall: var(--accent-pop); --role-firewall-glow: var(--accent-pop-glow); --role-firewall-border: rgba(77, 243, 240, 0.30); --role-nas: #4a8df0; --role-nas-glow: rgba(74, 141, 240, 0.15); --role-nas-border: rgba(74, 141, 240, 0.30); --role-gateway: var(--accent); --role-gateway-glow: var(--accent-glow); --role-gateway-border: rgba(0, 229, 227, 0.30); --role-default: var(--accent-alt); --role-default-glow: var(--accent-alt-glow); --role-default-border: rgba(127, 222, 221, 0.30); /* ----- Phantom-token aliases (SLICE 0, design-system unify) ----- * Feature blocks authored across ~100 tasks referenced token names * that were never defined (--warning, --card-bg, --rule, --ink, …). * Each silently fell through to a hard-coded literal fallback, so * those blocks IGNORED light mode. Map every phantom name onto the * real token so the whole UI themes coherently. The right long-term * fix is to sweep call-sites to canonical names (later slices); these * aliases make the theme correct immediately with zero risk. */ --warning: var(--warn); --ok: var(--success); --bad: var(--danger); --primary: var(--accent); --ink: var(--text-primary); --text: var(--text-primary); --rule: var(--border); --mono: var(--font-mono); --card-bg: var(--bg-surface); --card-bg-deep: var(--bg-mid); --surface: var(--bg-surface); --surface-2: var(--bg-surface-hover); --surface-alt: var(--bg-mid); --accent-soft: var(--accent-glow); --code-fg: var(--text-primary); --success-bg: rgba(52, 211, 153, 0.15); color-scheme: dark light; } /* ============================================================ 1b. Tokens (light — explicit override + auto via @media) ============================================================ */ [data-theme="light"] { /* Instrument, light: cool slate-white ground, same electric-blue accent as dark so the identity holds across the toggle. */ /* Tell the UA to render NATIVE form widgets (checkboxes, number spinners,