/* ============================================================================ AURORA — the visual layer of the living organism (one shared implementation) ---------------------------------------------------------------------------- Loaded LAST on every surface (after console.css / client-shell.css / glass-tokens.css) so its overrides win. Owns: 1. AURORA SPECTRUM — emerald (lead) + cyan + violet + magenta currents. 2. ACCENT ROLES — one semantic mapping, day + night: emerald = go / healthy · cyan = info / system violet = intelligence / Council · magenta = urgent / gate 3. REFRACTION — rim refraction + chromatic aberration on every pane. 4. DYNAMIC LIGHT — one virtual light (--light-*) drives rim/specular/bleed. 5. VIEW TRANSITIONS — View Transition API morph + fade fallback. 6. STATIC FALLBACK — reduced-motion / no-JS aurora. No component may define its own spectrum color; consume these tokens. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. AURORA SPECTRUM — RGB triplets (JS reads these too via getComputedStyle). -------------------------------------------------------------------------- */ :root { --au-emerald: 24, 209, 138; /* signature green — the lead */ --au-cyan: 56, 232, 255; /* electric cyan */ --au-violet: 139, 92, 246; /* intelligence violet */ --au-magenta: 232, 121, 249; /* aurora magenta */ /* deep space base — near-black indigo-green (night floor) */ --au-space-0: #03060d; --au-space-1: #06111f; --au-space-2: #04100f; } /* ---------------------------------------------------------------------------- 2. ACCENT ROLES — the one mapping used everywhere (day + night variants). -------------------------------------------------------------------------- */ :root { --acc-go: rgb(var(--au-emerald)); --acc-info: rgb(var(--au-cyan)); --acc-intel: rgb(var(--au-violet)); --acc-urgent: rgb(var(--au-magenta)); --acc-go-soft: rgba(var(--au-emerald), .14); --acc-info-soft: rgba(var(--au-cyan), .14); --acc-intel-soft: rgba(var(--au-violet), .14); --acc-urgent-soft: rgba(var(--au-magenta), .16); } /* day: slightly deeper inks so roles stay readable on the mist base */ :root[data-theme="light"] { --acc-go: #0b7a54; --acc-info: #0b7ea8; --acc-intel: #6d3fd6; --acc-urgent: #c2239a; } /* --- role utility classes (text + filled badge) --- */ .role-go { color: var(--acc-go); } .role-info { color: var(--acc-info); } .role-intel { color: var(--acc-intel); } .role-urgent { color: var(--acc-urgent); } .role-go-fill, .role-info-fill, .role-intel-fill, .role-urgent-fill { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; border-radius: 999px; padding: 2px 10px; box-shadow: inset 0 0 0 1px currentColor; } .role-go-fill { color: var(--acc-go); background: var(--acc-go-soft); } .role-info-fill { color: var(--acc-info); background: var(--acc-info-soft); } .role-intel-fill { color: var(--acc-intel); background: var(--acc-intel-soft); } .role-urgent-fill { color: var(--acc-urgent); background: var(--acc-urgent-soft); } /* ---------------------------------------------------------------------------- 3. FLUID CANVAS — the real-time aurora organism (mounted by aurora.js). -------------------------------------------------------------------------- */ .aurora-fluid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 1; } /* static CSS-only aurora (no-JS fallback, reduced-motion) */ .aurora-static { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(52% 44% at 18% 22%, rgba(var(--au-emerald), .16), transparent 62%), radial-gradient(46% 40% at 78% 12%, rgba(var(--au-cyan), .14), transparent 60%), radial-gradient(58% 52% at 84% 74%, rgba(var(--au-violet), .16), transparent 66%), radial-gradient(48% 46% at 12% 78%, rgba(var(--au-magenta), .13), transparent 58%); } @media (prefers-reduced-motion: reduce) { .aurora-fluid { opacity: .7; } } /* ---------------------------------------------------------------------------- 4. DYNAMIC LIGHT — one virtual light drives every rim / specular / bleed. aurora.js writes --light-x / --light-y / --light-rgb / --light-rgb2. -------------------------------------------------------------------------- */ :root { --light-x: 0; --light-y: 0.5; --light-rgb: 255, 248, 238; --light-rgb2: 56, 232, 255; } /* rim + specular + bleed now follow the light colour (day warm, night neon) */ :root { --glass-bleed: rgba(var(--light-rgb), .10); --glass-rim: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(var(--light-rgb), .12) 22%, rgba(var(--light-rgb2), .16) 50%, rgba(255,255,255,.08) 78%, rgba(255,255,255,.22) 100%); --glass-specular: linear-gradient(180deg, rgba(var(--light-rgb), .16) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 72%); } /* ---------------------------------------------------------------------------- 5. REFRACTION — rim refraction + chromatic aberration on every glass pane. Subtle RGB fringe at the pane edge: red / cyan split + green / violet. "Visible on inspection, invisible in use." Injected via --glass-shadow so it flows through the console.css DESIGN SYSTEM block (which pins `box-shadow: var(--glass-shadow) !important`). -------------------------------------------------------------------------- */ :root { --ca-fringe: inset 0 0 0 1px rgba(255,255,255,.05), inset 1px 0 1px rgba(255,64,96,.12), /* red fringe */ inset -1px 0 1px rgba(64,190,255,.12), /* cyan fringe */ inset 0 1px 1px rgba(64,255,190,.06), /* green fringe (top) */ inset 0 -1px 1px rgba(168,85,247,.12); /* violet fringe (bottom) */ } :root { --glass-shadow: 0 1px 2px rgba(0,0,0,.30), 0 18px 48px rgba(0,0,0,.38), var(--ca-fringe); } :root[data-theme="light"] { --glass-shadow: 0 1px 2px rgba(18,40,30,.08), 0 18px 48px rgba(18,40,30,.14), var(--ca-fringe); } /* modal — stronger rim refraction, still subtle (hardcoded in glass-tokens.css) */ .glass-modal { box-shadow: 0 4px 8px rgba(0,0,0,.32), 0 28px 80px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(255,255,255,.07), inset 1.5px 0 1.5px rgba(255,64,96,.14), inset -1.5px 0 1.5px rgba(64,190,255,.14), inset 0 -1.5px 1.5px rgba(168,85,247,.14); } /* ---------------------------------------------------------------------------- 6. VIEW TRANSITIONS — morph shared elements between screens. -------------------------------------------------------------------------- */ /* a shared element that persists across a navigation morphs its position/size */ .vt-shared { view-transition-name: vt-shared; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } ::view-transition-group(vt-shared) { animation-duration: .42s; } /* no-View-Transition-API fallback: a soft crossfade */ html.vt-fading { transition: opacity .34s ease; opacity: .5; } html.vt-fading * { pointer-events: none; } /* ---------------------------------------------------------------------------- 7. SEMANTIC ACCENT ROLE REMAP — collapse the legacy palette onto the four roles so the mapping reads identically on every surface. (emerald stays go/healthy + the signature; danger -> magenta urgent; warn/dispute -> violet intelligence; system/live -> cyan info.) -------------------------------------------------------------------------- */ :root { --acc-system: var(--acc-info); --acc-council: var(--acc-intel); --acc-gate: var(--acc-urgent); } /* danger / spend / negative -> magenta (urgent) · warn / dispute -> violet (intelligence). Override in BOTH palettes so the mapping holds in day + night. */ :root, :root[data-theme="light"] { --spend: rgb(var(--au-magenta)); --credit: rgb(var(--au-violet)); --income: rgb(var(--au-emerald)); } .btn-danger { background: rgba(var(--au-magenta), .16) !important; color: var(--acc-urgent) !important; box-shadow: inset 0 0 0 1px rgba(var(--au-magenta), .42) !important; } /* status pills — role-tagged for consistency (one mapping everywhere) */ .pill-live { background: rgba(var(--au-emerald), .16); color: var(--acc-go); } .pill-off { background: rgba(var(--au-magenta), .16); color: var(--acc-urgent); } .pill.dispute { background: rgba(var(--au-violet), .16); color: var(--acc-intel); } .pill.record { background: rgba(var(--au-magenta), .14); color: var(--acc-urgent); } /* alert / gate markers — note .al-state.open is a locked NEON-GLOW active state (emerald) in console.css; do not fight it. The gate/urgent role is carried by .btn-danger, .pill-off/.pill.record, and --acc-gate (magenta) instead. */ .al-state.unread { background: rgba(var(--au-violet), .16); color: var(--acc-intel); } .al-state.resolved { background: rgba(var(--au-emerald), .14); color: var(--acc-go); } /* signed money / stat verdicts */ .stat .v.pos { color: var(--acc-go); } .stat .v.neg { color: var(--acc-urgent); } .stat .v.warn { color: var(--acc-intel); } /* system / intelligence accents */ .sd-status .pill-live { color: var(--acc-info); background: rgba(var(--au-cyan), .16); }