/* ===================================================================== EMPIRIUM — a quiet, navy-and-porcelain brand system. Dark only: Near-Black Ink canvas, Empirium Midnight cards, Tailored Sky as the working accent. No neon glow — earned emphasis reads as a soft tinted shadow, not a halo. ===================================================================== */ @font-face{ font-family:'Nunito Sans'; font-style:normal; font-weight:200 1000; font-display:swap; src:url('../fonts/NunitoSans-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:'Nunito Sans'; font-style:normal; font-weight:200 1000; font-display:swap; src:url('../fonts/NunitoSans-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; } /* ===================================================================== EMPIRIUM OS — cyberpunk faces (activated 2026-07-11). Variable woff2 files live in renderer/fonts/ (see docs/ASSET_MANIFEST.md); the --font-* tokens below pick them up automatically. Nunito Sans stays as the body fallback. All font-display:swap, local files only (CSP 'self'). body / reading → Inter renderer/fonts/Inter.woff2 display / kickers→ Space Grotesk renderer/fonts/SpaceGrotesk.woff2 mono / metrics → JetBrains Mono renderer/fonts/JetBrainsMono.woff2 ===================================================================== */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/Inter.woff2') format('woff2'); } @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('../fonts/SpaceGrotesk.woff2') format('woff2'); } @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap; src:url('../fonts/JetBrainsMono.woff2') format('woff2'); } :root{ /* ---- Surfaces: Near-Black Ink canvas, Empirium Midnight cards (default) ---- */ --bg:#02060D; /* surface 0 — black-glass studio canvas */ --bg-rgb:2,6,13; --panel:#050B16; /* surface 1 — chrome, columns, sidebars */ --panel-rgb:5,11,22; --panel-2:#07101F; /* surface 1.5 — chrome gradient top */ --card:#081322; /* surface 2 — default instrument panel */ --card-2:#0A1729; /* surface 3 — raised / hero panel */ --card-hover:#10233A; /* hover lift for cards / rows */ --card-subtle:#020914; /* recessed list rows / inputs (inset) */ --card-subtle-rgb:2,9,20; --bg-grad-1:#02060D; --bg-grad-2:#050B16; /* ---- Lines: Sky-tinted hairlines, multi-weight ---- */ --line:rgba(82,203,239,.20); --line-soft:rgba(82,203,239,.09); --line-bright:rgba(82,203,239,.38); --grid-line:rgba(82,203,239,.10); --line-strong:rgba(82,203,239,.29); --hud-edge:rgba(82,203,239,.56); /* lit bracket/corner colour (active/hero only) */ /* ---- Text: Soft Porcelain, light blue-grey for muted/faint ---- */ --text:#F5F3EC; --text-rgb:245,243,236; /* used by rgba(var(--text-rgb),X) hover/tint overlays app-wide */ --muted:#94A6CC; --faint:#6F80A8; /* ---- Accents: Empirium palette. Tailored Sky = everyday accent (precision). Assured Cobalt = rare secondary voice. Amber = state. Red = error/blocked only. Green = positive/heatmaps. NB: --accent2 keeps its legacy name — 130+ feature-CSS uses. ---- */ --accent:#52CBEF; --accent-soft:#83DCF5; --accent-rgb:82,203,239; /* PRIMARY — signal cyan */ --accent2:#12248C; --accent2-soft:#0E1C70; --accent2-rgb:18,36,140; /* legacy secondary name — Assured Cobalt */ --accent-2:#4A7FD1; --accent-2-soft:#3A66B0; --accent-2-rgb:74,127,209; /* SECONDARY — rare highlight, royal-blue blend */ --on-accent:#080A12; /* ink for text/icons sitting on the sky accent fill */ --good:#3FBE83; --good-rgb:63,190,131; /* heatmaps stay green */ --warn:#D99A3E; --warn-rgb:217,154,62; /* amber — regulation / action-required */ --danger:#D9647A; --danger-rgb:217,100,122; --danger-soft:#C24B5C; /* red — errors/blocked only */ --important:#D9647A;--important-rgb:217,100,122;--important-soft:#C24B5C; --stop:#C0A29F; --stop-rgb:192,162,159; --ice:#8FE3FF; --ice-rgb:143,227,255; /* baby-blue neon — passive/standby time */ /* ---- Radius scale — soft, quietly certain geometry. ---- */ --radius:10px; /* legacy alias */ --r-sm:6px; /* chips, badges, small buttons */ --r-md:8px; /* buttons, inputs, glyphs */ --r-lg:12px; /* cards, panels */ --r-xl:18px; /* modals, large overlays */ /* ---- Elevation: deeper, near-black drops ---- */ --shadow:0 16px 40px rgba(0,0,0,.55); --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 2px 8px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45); --sh-3:0 24px 64px rgba(0,0,0,.6); /* ---- Glow: retired in favour of soft tinted elevation. Only active/ selected/live elements get the lift — never a halo. ---- */ --glow-accent:0 0 0 1px rgba(var(--accent-rgb),.22), 0 8px 20px rgba(var(--accent-rgb),.16); --glow-accent-2:0 0 0 1px rgba(var(--accent-2-rgb),.22), 0 8px 20px rgba(var(--accent-2-rgb),.16); --glow-warn:0 0 0 1px rgba(var(--warn-rgb),.22), 0 6px 16px rgba(var(--warn-rgb),.14); /* ---- Glass: chrome over atmosphere (topbar / docks / modals), NOT cards ---- */ --glass:rgba(8,10,18,.55); --glass-blur:blur(14px) saturate(120%); --panel-opacity:.72; /* ---- Light-leak: retired ---- */ --leak:transparent; --leak-strong:transparent; --leak-red:transparent; --leak-glow:none; /* ---- Spacing scale ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; /* ---- Font weights ---- */ --fw-r:400; --fw-m:600; --fw-sb:700; --fw-b:800; /* ---- Typography roles (see @font-face hooks above; fall back safely until the woff2 files ship). ---- */ --font-body:'Inter','Nunito Sans',"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; --font-display:'Space Grotesk','Rajdhani',var(--font-body); --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,'Cascadia Mono','Consolas',monospace; --font-reading:Georgia,'Times New Roman',serif; /* personal documents rendered by the system */ --tracking-label:.18em; /* uppercase technical labels / kickers */ --tracking-wide:.08em; /* uppercase pills / buttons / chips */ /* ---- Motion: speeds + easings (HUD-flavoured) ---- */ --ease:cubic-bezier(.23,1,.32,1); --ease-hud:cubic-bezier(.2,.8,.2,1); /* decisive, slightly mechanical */ --ease-snap:cubic-bezier(.4,0,.2,1); --t-snap:.12s; --t-base:.2s; --t-slow:.4s; --t-boot:.9s; --scan-speed:8s; /* ambient scanline period */ /* ---- z-index scale ---- */ --z-bg:-1; --z-content:1; --z-dock:20; --z-nav:30; --z-popover:40; --z-modal:60; --z-toast:80; /* ---- Type scale: one consistent hierarchy used app-wide ---- page title → section title → content title → body → small → label → caption */ --fs-page-title:24px; /* the single largest heading on a page */ --fs-section:16px; /* a card / section's own title */ --fs-content:15px; /* the title of an item inside a section */ --fs-body:14px; /* default reading text */ --fs-small:12.5px; /* secondary / supporting text */ --fs-label:11.5px; /* uppercase "overline" labels */ --fs-caption:10.5px; /* the smallest meta text */ } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{margin:0;height:100%;overflow:hidden;} body{ font-family:var(--font-body); background:var(--bg); background-attachment:fixed; color:var(--text); height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::-webkit-scrollbar{width:12px;height:12px;} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:3px solid transparent;background-clip:content-box;} ::-webkit-scrollbar-thumb:hover{background:var(--line-bright);background-clip:content-box;} ::-webkit-scrollbar-track{background:transparent;} button{font-family:inherit;} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;} ::selection{background:rgba(var(--accent-rgb),.22);color:var(--text);} /* Honour reduced-motion: kill decorative transitions/animations app-wide */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} } /* User "Static mode" — same kill-switch, driven by html[data-motion="static"] (see the pre-paint restore script + window.eoSetMotion in index.html/theme.js). Ambient atmosphere motion additionally flattens via its own rules in structure.css. */ html[data-motion="static"] *, html[data-motion="static"] *::before, html[data-motion="static"] *::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important; }