/* ═══════════════════════════════════════════════════════════════════════════ OMNIS — Neural × Pulse v3 (NXP v3) The unified design-token CSS. Every internal OMNIS page loads this. Tokens are set at :root level and switched via [data-theme] on . Changes from NXP v2.1: • Warmer dark bg (was #101117, now #18171C — less blue, less eye fatigue) • Lifted surfaces by ~10% lightness (cards, panels visibly above bg) • Softer primary text (#F2F2F5 → #DCDCE2, kills halation) • Desaturated crimson for text uses (button crimson unchanged) • Generous spacing scale (row breathing, panel breathing) • New radius scale (panels at 18px for softer grid) • Larger, heavier body text • Light mode retuned to match the warm/spacious sensibility All legacy token names preserved for backward compatibility. Pages can use var(--bg), var(--t1), var(--c) etc. unchanged. =========================================================================== */ /* ── DARK (default) ─────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { /* ── Surface tokens ── */ --bg: #18171C; /* warmer near-black */ --s1: #1F1D23; /* surface 1 — cards, rails */ --s2: #26242B; /* surface 2 — raised panels */ --s3: #2D2B33; /* surface 3 — hover / focus */ --s4: #35323C; /* surface 4 — active / pressed */ /* ── Text tokens ── */ --t1: #DCDCE2; /* primary — softer than pure white */ --t2: #A8A8B2; /* secondary — labels, muted body */ --t3: #7A7A85; /* tertiary — timestamps, hints */ /* ── Border tokens ── */ --b: rgba(255, 255, 255, .08); /* default — visible but quiet */ --bh: rgba(255, 255, 255, .14); /* hover */ --ba: rgba(255, 255, 255, .2); /* active / focus */ /* ── Brand crimson (unchanged from v2.1, full saturation) ── */ --c: #E8234A; /* buttons, brand, CTAs */ --cd: #C41D3E; /* crimson darker */ --cl: rgba(232, 35, 74, .08); /* crimson light bg */ --cf: rgba(232, 35, 74, .18); /* crimson focus ring */ /* ── NEW: crimson for text uses (desaturated to reduce chromatic aberration) ── */ --c-text: #D8234A; /* text/brackets/hairlines */ /* ── Semantic colors ── */ --g: #2DD4A8; /* green — ok, success */ --gb: rgba(45, 212, 168, .09); /* green bg */ --am: #E5A011; /* amber — warn */ --ab: rgba(229, 160, 17, .09); /* amber bg */ --rd: #FF6B6B; /* red — urgent (not same as brand crimson) */ --rb: rgba(255, 107, 107, .1); /* red bg */ --bl: #00C2F0; /* blue — info */ --bb: rgba(0, 194, 240, .09); --p: #9F6CF7; /* purple — ONE / AI */ --pb: rgba(159, 108, 247, .08); /* purple bg */ /* ── Spacing scale (NEW: generous rhythm) ── */ --sp-2: .25rem; /* 4px — tight */ --sp-3: .4rem; /* 6px — xs */ --sp-4: .6rem; /* 10px — sm */ --sp-5: .8rem; /* 13px — default gap */ --sp-6: 1rem; /* 16px — md */ --sp-7: 1.4rem; /* 22px — lg (panel padding) */ --sp-8: 1.8rem; /* 29px — xl (section gap) */ --sp-9: 2.4rem; /* 38px — xxl */ /* ── Radius scale (NEW: softer corners) ── */ --r-1: 4px; /* pills / chips */ --r-2: 8px; /* small cards */ --r-3: 12px; /* default card / input */ --r-4: 14px; /* KPI cards */ --r-5: 18px; /* major panels */ --r-full: 9999px; /* pills, circles */ /* ── Type scale (NEW: slightly larger body, heavier body weight) ── */ --fs-1: .60rem; /* mono labels */ --fs-2: .72rem; /* small meta */ --fs-3: .78rem; /* body sm */ --fs-4: .84rem; /* body default — up from .74 */ --fs-5: .88rem; /* body lg */ --fs-6: .95rem; /* panel title */ --fs-7: 1.15rem; --fs-8: 1.4rem; /* page title */ --fs-9: 2rem; /* KPI number */ --fw-regular: 400; --fw-medium: 500; --fw-body: 500; /* NEW: body weight bumped from 400 */ --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800; /* ── Motion (calibrated) ── */ --ease-soft: cubic-bezier(.16, 1, .3, 1); --dur-fast: .12s; --dur-med: .2s; --dur-slow: .35s; /* ── Shadow scale ── */ --sh-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.15); --sh-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 10px rgba(0,0,0,.22); --sh-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 20px rgba(0,0,0,.35); --sh-4: 0 1px 0 rgba(255,255,255,.08) inset, 0 12px 32px rgba(0,0,0,.45); /* ── Legacy aliases (back-compat — DO NOT remove) ── */ --r: var(--r-3); --rl: var(--r-4); --e: var(--ease-soft); --w: #FFFFFF; } /* ── LIGHT MODE ──────────────────────────────────────────────────────────── Retuned to match the warm/spacious sensibility of dark. Off-white bg, not pure white (reduces glare). Warm-gray text, not black. Same spacing and radius scales as dark — only colors change. LOCKED: Paired with omnis-theme-switcher.js which forces data-theme=dark. The extra [data-theme-unlocked] requirement prevents this block from ever firing accidentally via browser extension, stale localStorage, or race condition. When light mode is properly QA'd per-component, remove the [data-theme-unlocked] requirement below to re-enable. ────────────────────────────────────────────────────────────────────────── */ [data-theme="light"][data-theme-unlocked] { /* Surfaces — warm off-whites */ --bg: #FAF9F7; /* warm, not pure white */ --s1: #F2F1EE; /* surface 1 — cards */ --s2: #E9E7E2; /* surface 2 — raised */ --s3: #DFDCD6; /* surface 3 — hover */ --s4: #D2CFC8; /* surface 4 — active */ /* Text — warm blacks, not true black */ --t1: #1A1819; /* primary — near-black, warm */ --t2: #55525A; /* secondary */ --t3: #85828A; /* tertiary */ /* Borders */ --b: rgba(0, 0, 0, .09); --bh: rgba(0, 0, 0, .14); --ba: rgba(0, 0, 0, .2); /* Crimson — slightly deeper on light for contrast */ --c: #D8234A; --cd: #B81D3E; --cl: rgba(216, 35, 74, .06); --cf: rgba(216, 35, 74, .16); --c-text: #B81D3E; /* text crimson — even deeper for AA on light */ /* Semantic colors — adjusted for light bg */ --g: #0E9E77; --gb: rgba(14, 158, 119, .08); --am: #B77B0F; --ab: rgba(183, 123, 15, .08); --rd: #D83838; --rb: rgba(216, 56, 56, .08); --bl: #0084A8; --bb: rgba(0, 132, 168, .08); --p: #6E40CC; --pb: rgba(110, 64, 204, .07); /* Shadows — lighter on light */ --sh-1: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 4px rgba(0,0,0,.04); --sh-2: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 10px rgba(0,0,0,.06); --sh-3: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 20px rgba(0,0,0,.1); --sh-4: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 32px rgba(0,0,0,.14); } /* ── Body defaults — every page inherits this ── */ html, body { background: var(--bg); color: var(--t1); font-family: 'Figtree', system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; font-weight: var(--fw-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── Theme transition when user toggles ── */ html { transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft); } /* ── Tabular numbers by default for monospace contexts ── */ .mono, [data-mono], td.data, td.data-muted, .kpi-value { font-variant-numeric: tabular-nums; } /* ── Honor OS reduced-motion preference globally ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; scroll-behavior: auto !important; } } /* NXP-V3 FONT BUMP APPLIED */ /* ═══════════════════════════════════════════════════════════ Rail label + KPI label readability bump Overrides hardcoded sizes that ignore theme tokens. =========================================================== */ .rail-label, .omnis-rail .label, nav.rail a span, aside.rail a span, .nav-v3 .sub, .hdr-kpi-label { font-size: .62rem !important; letter-spacing: .09em; } /* Tab row readability */ .tab, .tabs .tab, .tab-count { font-size: .8rem !important; } /* Table header mono labels */ thead th, table thead th { font-size: .6rem !important; letter-spacing: .09em; }