/* ───────────────────────────────────────────────────────────────────────── OS AURAS — Sanctom OS canvas palettes (Knox-approved 2026-06-02) ─────────────────────────────────────────────────────────────────────────── PRINCIPLE: An Aura restyles ONLY the main content area. The left rail is a LOCKED Sanctom-brand gradient (pinned by admin-chrome.css on the product rail classes) and is NEVER touched here — there is intentionally not a single --rail-* token in this file. SCOPE: Sanctom OS prototypes only. Applied via a dedicated `data-aura` attribute on so it can't collide with the shared `data-theme` system in ui_kits/_shared/themes.css (consumed by Community/Coach/Growth/Relations/ CRM/etc.). Each palette sets BOTH token families — the canonical palette (--ink-900/--surface/--paper-300…) used by the v2 Studio/AM pages AND the --app-* family used by themes.css-based pages — so one Aura drives every OS page no matter which contract it was built on. 6 palettes: 3 light (Daylight default · Mist · Bloom), 3 dark (Slate · Midnight · Plum). All tuned to harmonize with the navy→magenta→purple rail. ───────────────────────────────────────────────────────────────────────── */ /* ── DAYLIGHT (light · default) ── */ html[data-aura="daylight"] { --monitor-accent: #15707D; color-scheme: light; --app-bg: #FBFCFE; --app-fg: #011C42; --app-fg-muted: #5A6B85; --app-fg-subtle: #8A99B2; --surface: #FFFFFF; --paper-50: #FFFFFF; --paper-300: #E6E9EF; --ink-900: #011C42; --fg-muted: #5A6B85; --fg-subtle: #8A99B2; --border: #E6E9EF; --aura-accent: #B30FFA; --surface-raised: #FFFFFF; --surface-sunken: #F4F6FA; --border-strong: #CBD3E0; --fg-on-accent: #FFFFFF; } html[data-aura="daylight"] body { background: #FBFCFE; color: #011C42; } /* ── MIST (light) ── */ html[data-aura="mist"] { --monitor-accent: #15707D; color-scheme: light; --app-bg: #EDF3FA; --app-fg: #011C42; --app-fg-muted: #45597C; --app-fg-subtle: #7E92B3; --surface: #FFFFFF; --paper-50: #FFFFFF; --paper-300: #D6E1EF; --ink-900: #011C42; --fg-muted: #45597C; --fg-subtle: #7E92B3; --border: #D6E1EF; --aura-accent: #096FFF; --surface-raised: #FFFFFF; --surface-sunken: #EDF3FA; --border-strong: #B9C9DF; --fg-on-accent: #FFFFFF; } html[data-aura="mist"] body { background: #EDF3FA; color: #011C42; } /* ── BLOOM (light) ── */ html[data-aura="bloom"] { --monitor-accent: #15707D; color-scheme: light; --app-bg: #FBF1F7; --app-fg: #2A0E22; --app-fg-muted: #8C4A6B; --app-fg-subtle: #B5849C; --surface: #FFFFFF; --paper-50: #FFFFFF; --paper-300: #F0DCE8; --ink-900: #2A0E22; --fg-muted: #8C4A6B; --fg-subtle: #B5849C; --border: #F0DCE8; --aura-accent: #E0157A; --surface-raised: #FFFFFF; --surface-sunken: #FBF1F7; --border-strong: #E3BFD3; --fg-on-accent: #FFFFFF; } html[data-aura="bloom"] body { background: #FBF1F7; color: #2A0E22; } /* ── SLATE (dark) ── */ html[data-aura="slate"] { --monitor-accent: #4FB8C7; color-scheme: dark; --app-bg: #0F1417; --app-fg: #E8EDF0; --app-fg-muted: rgba(232,237,240,0.58); --app-fg-subtle: rgba(232,237,240,0.32); --surface: #1A2126; --paper-50: #0F1417; --paper-300: rgba(255,255,255,0.10); --ink-900: #E8EDF0; --fg-muted: rgba(232,237,240,0.58); --fg-subtle: rgba(232,237,240,0.32); --border: rgba(255,255,255,0.10); --aura-accent: #B6F24E; --surface-raised: #232B31; --surface-sunken: #0F1417; --border-strong: rgba(255,255,255,0.22); --fg-on-accent: #0F1417; } html[data-aura="slate"] body { background: #0F1417; color: #E8EDF0; } /* ── MIDNIGHT (dark) ── */ html[data-aura="midnight"] { --monitor-accent: #4FB8C7; color-scheme: dark; --app-bg: #07142B; --app-fg: #DDE9FB; --app-fg-muted: #8FA6CD; --app-fg-subtle: #5E769B; --surface: #102544; --paper-50: #07142B; --paper-300: rgba(221,233,251,0.13); --ink-900: #DDE9FB; --fg-muted: #8FA6CD; --fg-subtle: #5E769B; --border: rgba(221,233,251,0.13); --aura-accent: #38A8FF; --surface-raised: #16294C; --surface-sunken: #0A1C3A; --border-strong: rgba(221,233,251,0.28); --fg-on-accent: #07142B; } html[data-aura="midnight"] body { background: #07142B; color: #DDE9FB; } /* ── PLUM (dark) ── */ html[data-aura="plum"] { --monitor-accent: #4FB8C7; color-scheme: dark; --app-bg: #18062A; --app-fg: #F3E6FB; --app-fg-muted: #B79AD0; --app-fg-subtle: #8A6BA5; --surface: #2A0E3C; --paper-50: #18062A; --paper-300: rgba(243,230,251,0.13); --ink-900: #F3E6FB; --fg-muted: #B79AD0; --fg-subtle: #8A6BA5; --border: rgba(243,230,251,0.13); --aura-accent: #C77DFF; --surface-raised: #351248; --surface-sunken: #18062A; --border-strong: rgba(243,230,251,0.28); --fg-on-accent: #18062A; } html[data-aura="plum"] body { background: #18062A; color: #F3E6FB; } /* ── Bridge to the current admin-chrome token names (Mira 2026-06-05) ────────── The OS Aura palettes above set --ink-900 / --border / --app-bg (the original OS-console token names). Newer admin-chrome surfaces (Mind, Soul) read --fg / --card-border / --bg, so map them here once. One Aura now drives both token generations. */ [data-aura] { --fg: var(--ink-900); --card-border: var(--border); --bg: var(--app-bg); } /* ── Craft Color System — accent-ink (Knox 2026-07-08) ────────────────────── --admin-accent-ink = the product accent made legible as TEXT on THIS Aura's surface. Derived from whatever --admin-accent the product sets, so every accent (present or future) inherits it — no per-accent light/dark pair. Dark Auras: the accent reads as-is. Light Auras: darkened so accent-coloured text / links / icons don't wash out on a light surface. --admin-accent-tint = a wash for chips. Roles are defined once here; components read the role. 🔴 TWO TOKENS, OPPOSITE ROLES — the #1 colour bug in this system (Mira-Craft 2026-07-15, after it bit three independent Kits in one session; Kern: "a signal the token itself is easy to misuse, not that three people made the same mistake"). · --admin-accent-ink = the accent AS TEXT on the page surface (an accent link). Derived below. NOT a fill ink. · --ink-on-accent = text sitting ON an accent FILL (button label, ribbon, icon in an accent dot). Set it next to --admin-accent. The name reads like "the ink for the accent", so people reach for it when they mean --ink-on-accent. Doing that forces the page to bind --admin-accent-ink to a fill ink (navy), which then renders every genuine accent-as-text navy-on-navy — measured 1.10:1, invisible. commerce.css did exactly this on all 4 usages and, being canonical, pushed the error into every consumer. 🔴 SCOPE RULE — declare the ink tokens WHEREVER you declare --admin-accent. The derivation below is scoped to `.canvas-shell` ON PURPOSE: a custom property resolves against the scope it's DECLARED in, and --admin-accent is set on the shell (`.canvas-shell.craft { --admin-accent: … }`). Hoisting this to :root would freeze the ink to the root's accent and silently break every product that sets its own. The cost: a surface WITHOUT a shell (checkout, commerce, the Craft galleries) gets no derivation and must bind its own — which is precisely when authors bind the wrong role. If your surface has no shell, either add `canvas-shell` to a wrapper to inherit this rule, or mirror both lines locally. Same family as the fg-relative token gotcha (--cool-100/200 needing re-declaration inside .theme-dark). */ [data-aura] .canvas-shell, [data-aura].canvas-shell { --admin-accent-ink: var(--admin-accent); --admin-accent-tint: color-mix(in srgb, var(--admin-accent) 14%, var(--surface)); } [data-aura="daylight"] .canvas-shell, [data-aura="mist"] .canvas-shell, [data-aura="bloom"] .canvas-shell { --admin-accent-ink: color-mix(in srgb, var(--admin-accent) 50%, #0a0e1a); } /* ───────────────────────────────────────────────────────────────────────── AURA POPOVER — self-contained chrome (injected by os-auras.js). Independent of the shared auras-system.css so OS pages need only these two OS files. ───────────────────────────────────────────────────────────────────────── */ .oa-backdrop { position: fixed; inset: 0; background: transparent; z-index: 900; } .oa-popover { position: fixed; top: 60px; right: 20px; width: 320px; z-index: 901; background: var(--surface, #fff); color: var(--ink-900, #011C42); border: 1px solid var(--border, #E6E9EF); border-radius: 14px; box-shadow: 0 10px 40px rgba(1,28,66,0.18), 0 2px 8px rgba(1,28,66,0.10); padding: 16px; font-family: var(--font-body, system-ui, sans-serif); } .oa-popover[hidden], .oa-backdrop[hidden] { display: none; } .oa-head { margin-bottom: 12px; } .oa-eyebrow { font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle, #8A99B2); } .oa-title { font-family: var(--font-serif, serif); font-size: 20px; font-weight: 900; letter-spacing: -0.01em; margin-top: 2px; } .oa-sub { font-size: 11px; color: var(--fg-muted, #5A6B85); margin-top: 3px; } .oa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .oa-tile { border: 1px solid var(--border, #E6E9EF); border-radius: 10px; padding: 0; background: var(--surface, #fff); cursor: pointer; overflow: hidden; text-align: left; transition: border-color 120ms, transform 120ms; } .oa-tile:hover { transform: translateY(-1px); border-color: var(--fg-subtle, #8A99B2); } .oa-tile.selected { border-color: var(--aura-accent, #B30FFA); box-shadow: 0 0 0 2px color-mix(in srgb, var(--aura-accent, #B30FFA) 30%, transparent); } .oa-swatch { height: 42px; display: block; } .oa-tile-meta { padding: 7px 9px 8px; } .oa-tile-name { font-size: 12.5px; font-weight: 700; color: var(--ink-900, #011C42); line-height: 1.1; } .oa-tile-kind { font-family: var(--font-body, sans-serif); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-subtle, #8A99B2); margin-top: 2px; } /* "Apply to all Sanctom apps" toggle */ .oa-applyall { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border, #E6E9EF); cursor: pointer; font-family: var(--font-body, sans-serif); } .oa-applyall input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--aura-accent, #B30FFA); cursor: pointer; flex: none; } .oa-applyall-text { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-900, #011C42); line-height: 1.2; } .oa-applyall-sub { display: block; font-size: 10.5px; color: var(--fg-muted, #5A6B85); margin-top: 1px; }