/* ============================================================================= Sawadi OS — shared UI design system (os-ui.css) · LOCKED DIRECTION v1 --------------------------------------------------------------------------- The approved language: Atelier premium (ivory · Fraunces headline figures · bordeaux + antique gold · hairline depth) MARRIED to Meridian/Onyx usability (more air, rounded forms, OBVIOUS filled-accent actions, clear hover/focus). Light + Dark + System theming. Built for a collaborative platform (deal rooms, presence, approvals, discussion). PALETTE IS A SWAPPABLE LAYER. Colour is NOT final — every colour lives in the token block in §1 only. Retune the palette there and the whole app follows; no component CSS changes. (Fonts, spacing, depth are locked; colour is open.) SAFETY: every class is `sv-`-prefixed so this loads alongside legacy admin.html CSS without clobbering .btn/.card/.input. Screens migrate to sv- classes one at a time, behind the ui_v2 flag. ========================================================================== */ /* ---- 1) PALETTE TOKENS (the only place colour is defined) ---------------- */ /* DARK is the brand-primary theme (matches the public site: #0a0a0b / #d8272f). It is the default (:root) so the platform leads on-brand; light is a refined secondary. Gold is the premium accent the brand layers on top of red. */ :root,:root[data-theme="dark"]{ /* STONE · WARM DARK (owner-locked 2026-07-17, "Ledger × Soft" direction) — warm graphite-brown neutrals, quiet stone-gold, claret-family red. Supersedes Obsidian. Mockup: CRM-Redesign-v2-LedgerSoft.html. */ --sv-bg:#131110; --sv-surface:#1b1917; --sv-inset:#232019; --sv-ink:#efedea; --sv-muted:#aca69c; --sv-faint:#878176; --sv-line:rgba(255,250,240,.11); --sv-line-2:rgba(255,250,240,.055); --sv-hair:rgba(255,250,240,.08); --sv-accent:#d34a4a; --sv-accent-2:#e05c5c; --sv-accent-ink:#eba3a0; --sv-accent-weak:#2a1514; --sv-accent-glow:rgba(211,74,74,.25); --sv-gold:#b39a72; --sv-gold-soft:#c6ad84; --sv-gold-weak:#242017; --sv-good:#3fce8f; --sv-good-weak:#122419; --sv-warn:#e2a63c; --sv-warn-weak:#231d10; --sv-bad:#f0716e; --sv-bad-weak:#2a1515; --sv-side:#0e0d0c; --sv-side-ink:#cbc6be; --sv-side-faint:#7b766c; --sv-side-line:rgba(255,250,240,.09); --sv-side-active:rgba(211,74,74,.14); --sv-ring-track:#2b2822; --sv-grid:rgba(255,250,240,.06); --sv-sh-sm:0 1px 2px rgba(0,0,0,.5); --sv-sh:0 2px 10px rgba(0,0,0,.5),0 24px 55px rgba(0,0,0,.42); --sv-sh-hover:0 28px 65px rgba(0,0,0,.52); --sv-hi:inset 0 1px 0 rgba(255,255,255,.05); --sv-r:16px; --sv-r-sm:12px; } /* LIGHT — refined warm neutral sibling (NOT stark white), still red+gold on-brand. */ :root[data-theme="light"]{ /* STONE · WARM LIGHT (owner-locked 2026-07-17, "Ledger × Soft") — sober greige paper, NEVER stark white; quiet stone-gold; claret leads. Supersedes the old cool light theme. Off-white per owner: "the white is horrible". */ --sv-bg:#eeece8; --sv-surface:#f7f6f2; --sv-inset:#e4e1da; --sv-ink:#201e1a; --sv-muted:#514e47; --sv-faint:#767065; --sv-line:rgba(38,35,28,.13); --sv-line-2:rgba(38,35,28,.065); --sv-hair:rgba(38,35,28,.09); --sv-accent:#8e1d24; --sv-accent-2:#a52830; --sv-accent-ink:#7c161d; --sv-accent-weak:#f2e3e2; --sv-accent-glow:rgba(142,29,36,.15); --sv-gold:#7c6748; --sv-gold-soft:#6f5b3e; --sv-gold-weak:#eae5d9; --sv-good:#276b4c; --sv-good-weak:#e3eee5; --sv-warn:#8f6410; --sv-warn-weak:#f2ead1; --sv-bad:#a03a30; --sv-bad-weak:#f3e3df; --sv-side:#181614; --sv-side-ink:#d5d1ca; --sv-side-faint:#8b867d; --sv-side-line:rgba(255,250,240,.09); --sv-side-active:rgba(142,29,36,.16); --sv-ring-track:#dfdcd4; --sv-grid:rgba(38,35,28,.06); --sv-sh-sm:0 1px 2px rgba(38,35,28,.05); --sv-sh:0 1px 2px rgba(38,35,28,.05),0 12px 30px rgba(38,35,28,.07); --sv-sh-hover:0 2px 6px rgba(38,35,28,.07),0 20px 44px rgba(38,35,28,.11); --sv-hi:inset 0 1px 0 rgba(255,255,255,.6); --sv-r:16px; --sv-r-sm:12px; } /* system = follow OS; default (no override) is the brand dark above. */ @media (prefers-color-scheme:light){:root[data-theme="system"]{ /* STONE · WARM LIGHT (owner-locked 2026-07-17, "Ledger × Soft") — sober greige paper, NEVER stark white; quiet stone-gold; claret leads. Supersedes the old cool light theme. Off-white per owner: "the white is horrible". */ --sv-bg:#eeece8; --sv-surface:#f7f6f2; --sv-inset:#e4e1da; --sv-ink:#201e1a; --sv-muted:#514e47; --sv-faint:#767065; --sv-line:rgba(38,35,28,.13); --sv-line-2:rgba(38,35,28,.065); --sv-hair:rgba(38,35,28,.09); --sv-accent:#8e1d24; --sv-accent-2:#a52830; --sv-accent-ink:#7c161d; --sv-accent-weak:#f2e3e2; --sv-accent-glow:rgba(142,29,36,.15); --sv-gold:#7c6748; --sv-gold-soft:#6f5b3e; --sv-gold-weak:#eae5d9; --sv-good:#276b4c; --sv-good-weak:#e3eee5; --sv-warn:#8f6410; --sv-warn-weak:#f2ead1; --sv-bad:#a03a30; --sv-bad-weak:#f3e3df; --sv-side:#181614; --sv-side-ink:#d5d1ca; --sv-side-faint:#8b867d; --sv-side-line:rgba(255,250,240,.09); --sv-side-active:rgba(142,29,36,.16); --sv-ring-track:#dfdcd4; --sv-grid:rgba(38,35,28,.06); --sv-sh-sm:0 1px 2px rgba(38,35,28,.05); --sv-sh:0 1px 2px rgba(38,35,28,.05),0 12px 30px rgba(38,35,28,.07); --sv-sh-hover:0 2px 6px rgba(38,35,28,.07),0 20px 44px rgba(38,35,28,.11); --sv-hi:inset 0 1px 0 rgba(255,255,255,.6); --sv-r:16px; --sv-r-sm:12px; }} /* ---- 1b) SKINS — palette directions layered ON TOP of the theme ----------- A skin overrides only the relevant tokens; it composes with data-theme so each skin reads correctly in BOTH light and dark. BALANCED is the base above and has NO data-skin attribute, so the default (today's look) is byte-for-byte unchanged. Skin selection is governed by os-theme.js (data-skin on ) behind ui_v2. AURUM + VERMILLION skins retired 2026-07-11 (owner decision: ONE design - the OBSIDIAN base above). Stored sv-skin values other than 'investor' fall back to the base tokens automatically (no matching CSS block). */ /* INVESTOR — the external register (os4 LOCKED 2026-07-06): calmer, warmer, gold-led hairlines, gentler radius. For investor/partner portal surfaces; the staff app leads with VERMILLION. Ships dark AND light (theme stays orthogonal to skin). */ :root[data-skin="investor"],:root[data-skin="investor"][data-theme="dark"]{ --sv-bg:#100e0b; --sv-surface:#1b1813; --sv-inset:#241f18; --sv-ink:#f4f1ea; --sv-muted:#b3aa9a; --sv-faint:#8d8575; /* B.readability pass 2 */ --sv-line:rgba(255,248,235,.11); --sv-line-2:rgba(255,248,235,.05); --sv-hair:rgba(255,248,235,.07); --sv-accent:#dc2f37; --sv-accent-2:#f23a42; --sv-accent-ink:#f6a9ac; --sv-accent-weak:#2a1714; --sv-accent-glow:rgba(216,39,47,.28); --sv-gold:#c9a766; --sv-gold-soft:#e0c692; --sv-gold-weak:#272013; --sv-side:#0c0a08; --sv-side-ink:#c9c1b2; --sv-side-faint:#6f685c; --sv-side-line:rgba(201,167,102,.16); --sv-side-active:rgba(201,167,102,.14); --sv-ring-track:#2c271e; --sv-grid:rgba(255,248,235,.06); --sv-r:16px; --sv-r-sm:11px; } /* INVESTOR · LIGHT — warm paper neutral, restrained red, private-bank calm. */ :root[data-skin="investor"][data-theme="light"]{ --sv-bg:#efeeec; --sv-surface:#ffffff; --sv-inset:#f5f4f2; --sv-ink:#1a1917; --sv-muted:#4e4a44; --sv-faint:#6e685d; /* B.readability pass 2 */ --sv-line:rgba(20,18,16,.12); --sv-line-2:rgba(20,18,16,.06); --sv-hair:rgba(20,18,16,.08); --sv-accent:#c81f27; --sv-accent-2:#d8272f; --sv-accent-ink:#991319; --sv-accent-weak:#f7e7e7; --sv-accent-glow:rgba(200,31,39,.15); --sv-gold:#8a6c39; --sv-gold-soft:#8f7135; --sv-gold-weak:#f2ebda; /* B.readability pass 2 */ --sv-side:#141210; --sv-side-ink:#d3cec5; --sv-side-faint:#857f74; --sv-side-line:rgba(255,248,235,.10); --sv-side-active:rgba(200,31,39,.16); --sv-ring-track:#e6e4e0; --sv-grid:rgba(20,18,16,.06); --sv-r:16px; --sv-r-sm:11px; } @media (prefers-color-scheme:light){:root[data-skin="investor"][data-theme="system"]{ --sv-bg:#efeeec; --sv-surface:#ffffff; --sv-inset:#f5f4f2; --sv-ink:#1a1917; --sv-muted:#4e4a44; --sv-faint:#6e685d; /* B.readability pass 2 */ --sv-line:rgba(20,18,16,.12); --sv-line-2:rgba(20,18,16,.06); --sv-hair:rgba(20,18,16,.08); --sv-accent:#c81f27; --sv-accent-2:#d8272f; --sv-accent-ink:#991319; --sv-accent-weak:#f7e7e7; --sv-accent-glow:rgba(200,31,39,.15); --sv-gold:#8a6c39; --sv-gold-soft:#8f7135; --sv-gold-weak:#f2ebda; /* B.readability pass 2 */ --sv-side:#141210; --sv-side-ink:#d3cec5; --sv-side-faint:#857f74; --sv-side-line:rgba(255,248,235,.10); --sv-side-active:rgba(200,31,39,.16); --sv-ring-track:#e6e4e0; --sv-grid:rgba(20,18,16,.06); --sv-r:16px; --sv-r-sm:11px; }} /* ---- 2) Fixed scales (locked; radius is now themeable — see §1 / §1b) ---- */ /* --sv-r / --sv-r-sm moved into the palette token blocks so skins set radius. BALANCED keeps 18px/12px (defined in §1); xs/pill stay fixed below. */ :root{ --sv-r-xs:10px; --sv-r-pill:999px; --sv-font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --sv-display:"Fraunces",Georgia,"Times New Roman",serif; /* Ledger×Soft: serif display voice (owner-locked 2026-07-17) */ --sv-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sv-focus:0 0 0 3px var(--sv-accent-glow); /* ---- 2a-i) TYPE SCALE (Design-Language v2 §2 — 9 steps, 3 weights) ------- 400 body · 600 UI/labels · 700 display. Numbers ALWAYS var(--sv-mono) + tabular-nums, right-aligned, equal decimals per column. */ --sv-fs-display-xl:48px; --sv-lh-display-xl:52px; /* hero KPI figure */ --sv-fs-display-l:32px; --sv-lh-display-l:38px; /* page title / section KPI */ --sv-fs-heading:24px; --sv-lh-heading:30px; /* card/panel titles */ --sv-fs-subheading:20px; --sv-lh-subheading:28px; --sv-fs-body-l:16px; --sv-lh-body-l:24px; --sv-fs-body:15px; --sv-lh-body:22px; /* default UI text (B.readability pass 1) */ --sv-fs-label:13.5px; --sv-lh-label:19px; /* buttons, nav, table headers */ --sv-fs-caption:12.5px; --sv-lh-caption:17px; --sv-fs-eyebrow:11px; --sv-lh-eyebrow:16px; /* mono, uppercase, +0.04em */ /* ---- 2a-ii) SPACING SCALE (v2 §3 — 4px base, 8px rhythm) ----------------- Rule of three gaps: space-2 (8) inside a group, space-4 (16) between groups, space-6/7 (32/40) between page sections. */ --sv-space-1:4px; --sv-space-2:8px; --sv-space-3:12px; --sv-space-4:16px; --sv-space-5:24px; --sv-space-6:32px; --sv-space-7:40px; --sv-space-8:64px; --sv-space-9:96px; } /* ---- 2b) Extra semantic tokens used by the legacy-elevation layer (§16/§17) - info (blue), violet (purple), paper (white doc plate), scrim (modal backdrop), hover (row/tile overlay), glass (translucent topbar). Theme-aware; skins inherit from the base dark/light blocks. paper stays white in both themes by intent. */ :root,:root[data-theme="dark"]{ --sv-info:#5b8fd6; --sv-info-weak:#15243a; --sv-violet:#a274d6; --sv-violet-weak:#1f1630; --sv-paper:#ffffff; --sv-paper-ink:#1a1a1a; --sv-scrim:rgba(6,5,3,.62); --sv-hover:rgba(255,248,235,.05); --sv-glass:color-mix(in srgb,var(--sv-surface) 82%,transparent); } :root[data-theme="light"]{ --sv-info:#3f6fae; --sv-info-weak:#e7eef7; --sv-violet:#7a52b0; --sv-violet-weak:#efe9f6; --sv-scrim:rgba(20,18,16,.42); --sv-hover:rgba(20,18,16,.045); } @media(prefers-color-scheme:light){:root[data-theme="system"]{ --sv-info:#3f6fae; --sv-info-weak:#e7eef7; --sv-violet:#7a52b0; --sv-violet-weak:#efe9f6; --sv-scrim:rgba(20,18,16,.42); --sv-hover:rgba(20,18,16,.045); }} /* ---- 2c) Legacy-preserving vars for INLINE / JS-set colours (§18) --------- Some colours live in inline style="" attributes or JS colour helpers that a CSS layer cannot override. The JS is edited to reference these vars instead of raw hex. Default values are the EXACT pre-elevation hex, so ui_v2-off is byte-for-byte unchanged; under data-theme they remap to the sv tokens. */ :root{ --lg-formbg:#0d0d0f; --lg-formline:rgba(255,255,255,.14); --lg-good:#2fbf6b; --lg-warn:#e0a82e; --lg-bad:#d8272f; --lg-info:#2f7bbf; --lg-faint:#7a7a82; --lg-gold:#e3b04b; --lg-goodbg:#16321f; --lg-chip:#26262b; --lg-chipink:#c7c6ca; } :root[data-theme]{ --lg-formbg:var(--sv-inset); --lg-formline:var(--sv-line-2); --lg-good:var(--sv-good); --lg-warn:var(--sv-warn); --lg-bad:var(--sv-bad); --lg-info:var(--sv-info); --lg-faint:var(--sv-faint); --lg-gold:var(--sv-gold); --lg-goodbg:var(--sv-good-weak); --lg-chip:var(--sv-inset); --lg-chipink:var(--sv-muted); } /* ---- 3) Primitives ------------------------------------------------------- */ .sv-ui{font-family:var(--sv-font);color:var(--sv-ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01"} .sv-ui *{box-sizing:border-box} .sv-dsp{font-family:var(--sv-display);font-weight:600;letter-spacing:-.01em} /* Fraunces reads heavy at 700 */ .sv-mono{font-family:var(--sv-mono);font-variant-numeric:tabular-nums} .sv-muted{color:var(--sv-muted)} .sv-faint{color:var(--sv-faint)} .sv-pos{color:var(--sv-good);font-weight:600} .sv-neg{color:var(--sv-bad);font-weight:600} .sv-link{color:var(--sv-accent-2);font-weight:600;text-decoration:none;cursor:pointer} .sv-link:hover{text-decoration:underline} .sv-eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--sv-faint);font-weight:600;display:inline-flex;align-items:center;gap:9px} .sv-eyebrow:before{content:"";width:16px;height:1px;background:var(--sv-gold)} /* ---- 4) Buttons (obvious affordances) ----------------------------------- */ .sv-btn{font:600 13px var(--sv-font);border:1px solid var(--sv-line);background:var(--sv-surface);color:var(--sv-ink); border-radius:var(--sv-r-sm);padding:10px 16px;cursor:pointer;display:inline-flex;gap:8px;align-items:center; box-shadow:var(--sv-sh-sm);transition:transform .05s,box-shadow .15s,border-color .15s} .sv-btn:hover{border-color:color-mix(in srgb,var(--sv-ink) 26%,var(--sv-line));box-shadow:var(--sv-sh)} .sv-btn:active{transform:translateY(1px)} .sv-btn:focus-visible{outline:none;box-shadow:var(--sv-focus)} .sv-btn--accent{background:linear-gradient(180deg,var(--sv-accent-2),var(--sv-accent));border:none;color:#fff; box-shadow:0 2px 8px var(--sv-accent-glow),0 8px 20px var(--sv-accent-glow)} .sv-btn--accent:hover{filter:brightness(1.05)} .sv-btn--ghost{background:transparent;border-color:transparent;color:var(--sv-muted);box-shadow:none} .sv-btn--ghost:hover{background:var(--sv-inset);color:var(--sv-ink)} .sv-btn--sm{padding:6px 11px;font-size:12px} .sv-btn[disabled]{opacity:.5;cursor:not-allowed} /* ---- 5) App shell (sidebar + topbar) ------------------------------------ */ .sv-app{display:grid;grid-template-columns:240px 1fr} .sv-side{background:var(--sv-side);color:var(--sv-side-ink);padding:20px 15px;min-height:100vh;position:sticky;top:0;align-self:start;border-right:1px solid var(--sv-side-line);overflow:auto;height:100vh} .sv-side__logo{display:flex;align-items:center;gap:12px;padding:4px 8px 18px;border-bottom:1px solid var(--sv-side-line);margin-bottom:14px} .sv-side__logo .mk{width:34px;height:34px;border-radius:10px;background:linear-gradient(155deg,#2b2519,#000);color:#fff;display:grid;place-items:center;font-family:var(--sv-display);font-weight:600;font-size:17px;box-shadow:inset 0 0 0 1px rgba(201,167,102,.4)} .sv-side__logo b{font-family:var(--sv-display);font-weight:600;font-size:15px;letter-spacing:.18em;color:#fff} .sv-side__grp{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sv-side-faint);font-weight:600;margin:16px 10px 7px} .sv-side a{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;color:var(--sv-side-ink);font-size:13px;margin:2px 0;cursor:pointer;position:relative;transition:background .12s;text-decoration:none} .sv-side a .dot{width:6px;height:6px;border-radius:50%;background:var(--sv-side-faint);flex:0 0 auto} .sv-side a:hover{background:rgba(255,255,255,.05)} .sv-side a.is-on{background:var(--sv-side-active);color:#fff} .sv-side a.is-on .dot{background:var(--sv-gold)} .sv-side a.is-on:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--sv-accent-2)} .sv-main{min-width:0} .sv-topbar{height:62px;display:flex;align-items:center;gap:16px;padding:0 28px;border-bottom:1px solid var(--sv-hair); background:color-mix(in srgb,var(--sv-surface) 80%,transparent);backdrop-filter:saturate(1.3) blur(12px);position:sticky;top:0;z-index:9} .sv-crumb{color:var(--sv-faint);font-size:12.5px}.sv-crumb b{color:var(--sv-ink);font-weight:600} .sv-sp{flex:1} .sv-presence{display:flex;align-items:center;gap:8px;color:var(--sv-muted);font-size:12px} .sv-livedot{width:7px;height:7px;border-radius:50%;background:var(--sv-good);box-shadow:0 0 0 3px var(--sv-good-weak)} .sv-avstack{display:flex}.sv-avstack .sv-av{margin-left:-9px} .sv-av{width:28px;height:28px;border-radius:50%;border:2px solid var(--sv-surface);display:grid;place-items:center;font:700 10px var(--sv-font);color:#fff;flex:0 0 auto} .sv-bell{position:relative;width:38px;height:38px;border-radius:11px;border:1px solid var(--sv-line);display:grid;place-items:center;color:var(--sv-muted);background:var(--sv-surface);cursor:pointer} .sv-bell .b{position:absolute;top:-6px;right:-6px;background:var(--sv-accent-2);color:#fff;font:700 9px var(--sv-font);border-radius:999px;padding:2px 6px} /* theme toggle */ .sv-themetoggle{display:inline-flex;flex:none;border:1px solid var(--sv-line);border-radius:var(--sv-r-pill);overflow:hidden;background:var(--sv-inset)} .sv-themetoggle button{border:none;background:transparent;color:var(--sv-muted);padding:7px 12px;font:600 12.5px var(--sv-font);cursor:pointer;white-space:nowrap} .sv-themetoggle button.is-on{background:var(--sv-ink);color:var(--sv-bg)} /* ---- 6) Page + hero/highlights ------------------------------------------ */ .sv-page{max-width:1280px;margin:0 auto;padding:28px} /* v2 §3: data views full-width to 1280; never a narrow reading column */ .sv-prose{max-width:720px} /* long-form measure ONLY for prose (notes, KB articles) inside the wide layout */ .sv-hero{position:relative;background:radial-gradient(150% 130% at 100% -10%,var(--sv-accent-weak),transparent 52%),var(--sv-surface); border:1px solid var(--sv-line);border-radius:22px;box-shadow:var(--sv-sh),var(--sv-hi);padding:28px 30px;overflow:hidden;margin-bottom:20px} .sv-hero:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--sv-accent),var(--sv-gold) 72%,transparent)} .sv-hero__row{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap} .sv-crest{width:64px;height:64px;border-radius:17px;background:linear-gradient(155deg,#2a2418,#0b0a07);color:#fff;display:grid;place-items:center;font-family:var(--sv-display);font-size:24px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(201,167,102,.42),0 10px 24px rgba(0,0,0,.2);flex:0 0 auto} .sv-hero h1{font-family:var(--sv-display);font-weight:500;font-size:34px;line-height:1;margin:8px 0 0;letter-spacing:-.02em} .sv-meta{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:12px;color:var(--sv-muted);font-size:13px} .sv-dotsep{width:3px;height:3px;border-radius:50%;background:var(--sv-faint)} .sv-hero__acts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap} .sv-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 11px;border-radius:var(--sv-r-pill);border:1px solid var(--sv-line);background:var(--sv-inset);color:var(--sv-muted)} .sv-pill--live{color:var(--sv-good);border-color:color-mix(in srgb,var(--sv-good) 32%,transparent);background:var(--sv-good-weak)} .sv-pill--client{color:var(--sv-accent-ink);border-color:color-mix(in srgb,var(--sv-accent) 30%,transparent);background:var(--sv-accent-weak)} .sv-pill--warn{color:var(--sv-warn);background:var(--sv-warn-weak);border-color:color-mix(in srgb,var(--sv-warn) 30%,transparent)} .sv-kpis{display:grid;grid-template-columns:repeat(5,1fr);margin-top:24px;border-top:1px solid var(--sv-hair)} .sv-kpi{padding:18px 20px 4px;border-right:1px solid var(--sv-line-2)}.sv-kpi:last-child{border-right:none} .sv-kpi .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--sv-faint);font-weight:600} /* B.readability pass 2: 10px/.15em was illegible */ .sv-kpi .v{font-family:var(--sv-display);font-weight:500;font-size:30px;margin-top:9px;line-height:1;letter-spacing:-.02em} .sv-kpi .v small{font-size:15px;color:var(--sv-muted)} .sv-kpi .d{font-size:11.5px;margin-top:8px;color:var(--sv-muted)} /* ---- 7) Tabs ------------------------------------------------------------- */ .sv-tabs{display:flex;gap:28px;margin:26px 4px 20px;border-bottom:1px solid var(--sv-hair);overflow:auto} .sv-tabs a{padding:0 0 14px;font-size:13.5px;font-weight:600;color:var(--sv-muted);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap} .sv-tabs a.is-on{color:var(--sv-ink);border-bottom-color:var(--sv-accent-2)} .sv-tabs a:hover{color:var(--sv-ink)} /* ---- 8) Cards + grids ---------------------------------------------------- */ .sv-cols{display:grid;grid-template-columns:1fr 336px;gap:20px;align-items:start} .sv-card{background:var(--sv-surface);border:1px solid var(--sv-line);border-radius:var(--sv-r);box-shadow:var(--sv-sh-sm),var(--sv-hi);margin-bottom:20px;transition:box-shadow .15s,transform .05s} .sv-card--click:hover{box-shadow:var(--sv-sh-hover);transform:translateY(-1px);cursor:pointer} .sv-card__h{display:flex;align-items:center;gap:10px;padding:17px 20px 14px} .sv-card__h h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--sv-muted)} .sv-card__h .more{margin-left:auto;font-size:12px;color:var(--sv-accent-2);font-weight:600;cursor:pointer} .sv-card__b{padding:4px 20px 18px} .sv-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px} .sv-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} /* ---- 9) Approvals chain (workflow) -------------------------------------- */ .sv-chain{display:flex;padding:8px 0 2px} .sv-node{flex:1;text-align:center;position:relative;padding:6px 4px} .sv-node:not(:last-child):after{content:"";position:absolute;top:25px;right:-50%;width:100%;height:2px;background:var(--sv-line)} .sv-node.done:not(:last-child):after{background:var(--sv-good)} .sv-node .nc{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin:0 auto 9px;font:700 13px var(--sv-font);position:relative;z-index:1;border:2px solid var(--sv-line);background:var(--sv-surface);color:var(--sv-faint)} .sv-node.done .nc{background:var(--sv-good);border-color:var(--sv-good);color:#fff} .sv-node.now .nc{background:var(--sv-accent-2);border-color:var(--sv-accent-2);color:#fff;box-shadow:0 0 0 5px var(--sv-accent-glow)} .sv-node .nl{font-size:11.5px;font-weight:600}.sv-node .nm{font-size:10.5px;color:var(--sv-faint);margin-top:1px} /* ---- 10) Discussion / comments ------------------------------------------ */ .sv-cm{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--sv-line-2)}.sv-cm:last-child{border-bottom:none} .sv-cm .bd{font-size:13px}.sv-cm .mention{color:var(--sv-accent-2);font-weight:600} .sv-cm .meta{font-size:11px;color:var(--sv-faint);margin-top:3px} .sv-cmbox{display:flex;gap:9px;margin-top:12px} .sv-cmbox input{flex:1;border:1px solid var(--sv-line);background:var(--sv-inset);border-radius:var(--sv-r-sm);padding:11px 14px;font:13px var(--sv-font);color:var(--sv-ink)} .sv-cmbox input:focus{outline:none;border-color:var(--sv-accent-2);box-shadow:var(--sv-focus)} /* ---- 11) Tasks / people / activity -------------------------------------- */ .sv-step{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--sv-line-2)}.sv-step:last-child{border-bottom:none} .sv-chk{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--sv-line);margin-top:1px;flex:0 0 auto;cursor:pointer} .sv-due{font-size:11.5px;color:var(--sv-accent-2);font-weight:600;margin-top:2px} .sv-asg{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 9.5px var(--sv-font);color:#fff;flex:0 0 auto} .sv-person{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--sv-line-2)}.sv-person:last-child{border-bottom:none} .sv-ro{font-size:11.5px;color:var(--sv-muted)}.sv-star{margin-left:auto;color:var(--sv-gold)} .sv-ev{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--sv-line-2)}.sv-ev:last-child{border-bottom:none} .sv-evd{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--sv-accent-2)} .sv-evd--g{background:var(--sv-good)}.sv-evd--b{background:#8a6bd0}.sv-evd--w{background:var(--sv-gold)} .sv-when{font-size:11px;color:var(--sv-faint);margin-top:2px} /* ---- 12) Tables ---------------------------------------------------------- */ .sv-tablewrap{overflow:auto} .sv-table{width:100%;border-collapse:collapse} .sv-table th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sv-faint);font-weight:600;padding:11px 18px;border-top:1px solid var(--sv-hair);border-bottom:1px solid var(--sv-hair)} .sv-table th.sv-num{text-align:right} .sv-table td{padding:14px 18px;border-bottom:1px solid var(--sv-line-2);font-size:13px} .sv-table td.sv-num{text-align:right;font-family:var(--sv-mono);font-variant-numeric:tabular-nums;font-size:12.5px} .sv-table tbody tr:hover{background:var(--sv-inset);cursor:pointer} .sv-toolbar{display:flex;gap:8px;align-items:center;padding:6px 18px 14px;flex-wrap:wrap} .sv-toolbar input{flex:1;min-width:200px;border:1px solid var(--sv-line);border-radius:var(--sv-r-sm);padding:10px 13px;font:13px var(--sv-font);background:var(--sv-inset);color:var(--sv-ink)} .sv-fchip{font:600 12px var(--sv-font);color:var(--sv-muted);background:var(--sv-inset);border:1px solid var(--sv-line);border-radius:var(--sv-r-pill);padding:7px 13px;cursor:pointer} .sv-fchip.is-on{background:var(--sv-accent-weak);color:var(--sv-accent-ink);border-color:color-mix(in srgb,var(--sv-accent) 26%,transparent)} .sv-brandtag{font-size:10.5px;font-weight:600;color:var(--sv-muted);border:1px solid var(--sv-line);border-radius:6px;padding:2px 8px} /* ---- 13) Forms + fields -------------------------------------------------- */ .sv-label{display:block;font-size:12px;font-weight:600;color:var(--sv-muted);margin:12px 0 6px} .sv-input,.sv-select,.sv-textarea{width:100%;border:1px solid var(--sv-line);background:var(--sv-inset);color:var(--sv-ink);border-radius:var(--sv-r-sm);padding:11px 13px;font:13.5px var(--sv-font)} .sv-input:focus,.sv-select:focus,.sv-textarea:focus{outline:none;border-color:var(--sv-accent-2);box-shadow:var(--sv-focus)} .sv-field .l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sv-faint);font-weight:600} .sv-field .v{font-size:15px;font-weight:600;margin-top:4px} .sv-bar{height:8px;background:var(--sv-line-2);border-radius:6px;overflow:hidden;margin-top:8px} .sv-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--sv-accent),var(--sv-gold));border-radius:6px} /* ---- 14) States ---------------------------------------------------------- */ .sv-empty{padding:30px 18px;text-align:center;color:var(--sv-faint);font-size:13px} .sv-loading{padding:22px 18px;color:var(--sv-faint);font-size:13px} .sv-skel{background:linear-gradient(90deg,var(--sv-line-2),var(--sv-inset),var(--sv-line-2));background-size:200% 100%;animation:sv-shimmer 1.2s infinite;border-radius:6px;height:12px} @keyframes sv-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @media(max-width:1080px){.sv-app{grid-template-columns:1fr}.sv-side{display:none}.sv-cols{grid-template-columns:1fr}.sv-kpis,.sv-grid-3{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.sv-kpis,.sv-grid-2,.sv-grid-3{grid-template-columns:1fr}} /* ---- 15) OBSIDIAN base tweaks (skins retired 2026-07-11) ------------------ */ /* Mono-forward KPI figures everywhere — numbers are always tabular mono. */ .sv-kpi .v{font-family:var(--sv-mono);font-weight:600} /* ============================================================================ 16) UI-v2 LEGACY ELEVATION --------------------------------------------------------------------------- The sv- components above are only used by screens that were rebuilt (SCF). Every OTHER screen still ships the original admin + per-module DOM, whose modules each inject their OWN hardcoded near-black surfaces (#0d0d0f / #141417 / #26262b), so the colour bridge can't reach them and light mode clashes. This layer lifts those legacy building blocks to the sv standard so the WHOLE app is coherent — not just recoloured. Gated entirely on :root[data-theme]: when ui_v2 is OFF there is no data-theme attribute, nothing here matches, and the legacy UI is byte-for-byte unchanged. Per-module rules are id-scoped (#view-x .cls) in their own stylesheets, so the overrides repeat the view id to win specificity (no !important needed). ========================================================================= */ /* -- 16a) admin-native primitives ----------------------------------------- */ :root[data-theme] .card{background:var(--sv-surface);border:1px solid var(--sv-line); border-radius:var(--sv-r);box-shadow:var(--sv-sh-sm),var(--sv-hi)} :root[data-theme] .bar h1{font-family:var(--sv-display);font-weight:600;font-size:22px;letter-spacing:-.02em} /* buttons — admin's base .btn IS the filled red primary */ :root[data-theme] .btn{font-family:var(--sv-font);font-weight:600;border-radius:var(--sv-r-sm); background:linear-gradient(180deg,var(--sv-accent-2),var(--sv-accent));border:none;color:#fff; box-shadow:0 2px 8px var(--sv-accent-glow),0 8px 20px var(--sv-accent-glow); transition:filter .15s,transform .05s,box-shadow .15s} :root[data-theme] .btn:hover{filter:brightness(1.05)} :root[data-theme] .btn:active{transform:translateY(1px)} :root[data-theme] .btn.ghost{background:transparent;background-image:none;border:1px solid var(--sv-line); color:var(--sv-muted);box-shadow:none} :root[data-theme] .btn.ghost:hover{background:var(--sv-inset);color:var(--sv-ink);filter:none; border-color:color-mix(in srgb,var(--sv-ink) 24%,var(--sv-line))} :root[data-theme] .btn.sm{padding:7px 12px;font-size:12px} /* tags / status pills */ :root[data-theme] .tag{border-radius:var(--sv-r-pill);border:1px solid var(--sv-line); background:var(--sv-inset);color:var(--sv-muted);font-family:var(--sv-mono)} :root[data-theme] .tag.open{background:var(--sv-good-weak);color:var(--sv-good); border-color:color-mix(in srgb,var(--sv-good) 30%,transparent)} :root[data-theme] .tag.closed{background:var(--sv-inset);color:var(--sv-faint)} /* kpi-card (admin-native) */ :root[data-theme] .kpi-card{background:var(--sv-surface);border:1px solid var(--sv-line); border-radius:var(--sv-r-sm);box-shadow:var(--sv-sh-sm),var(--sv-hi)} :root[data-theme] .kpi-card .v{font-family:var(--sv-display);font-weight:600;color:var(--sv-ink)} :root[data-theme] .kpi-card .l{color:var(--sv-faint)} :root[data-skin="vermillion"][data-theme] .kpi-card .v{font-family:var(--sv-mono)} /* plain tables inside admin cards (pipeline report, partner/investor lists, …) */ :root[data-theme] .card table{border-collapse:collapse;width:100%} :root[data-theme] .card th{font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--sv-faint);font-weight:600;border-bottom:1px solid var(--sv-hair)} :root[data-theme] .card td{border-bottom:1px solid var(--sv-line-2);color:var(--sv-ink)} :root[data-theme] .card tbody tr:hover{background:var(--sv-inset)} /* sidebar active treatment */ :root[data-theme] .nav-item.active{background:var(--sv-side-active);color:#fff} :root[data-theme] .nav-item.active::before{background:var(--sv-accent-2)} /* -- 16b) per-module surfaces (id-scoped to beat the modules' own CSS) ----- */ /* cards */ :root[data-theme] #view-today .tdx-card, :root[data-theme] #view-crm .crmx-card, :root[data-theme] #view-ir .irx-card{background:var(--sv-surface);border:1px solid var(--sv-line); border-radius:var(--sv-r);box-shadow:var(--sv-sh-sm),var(--sv-hi);padding:18px 20px} :root[data-theme] #view-today .tdx-card h3, :root[data-theme] #view-crm .crmx-card h3, :root[data-theme] #view-ir .irx-card h3{font-family:var(--sv-display);font-weight:600; font-size:15px;letter-spacing:-.01em;color:var(--sv-ink)} /* KPI tiles */ :root[data-theme] #view-today .tdx-kpi, :root[data-theme] #view-crm .crmx-kpi, :root[data-theme] #view-ir .irx-kpi{background:var(--sv-surface);border:1px solid var(--sv-line); border-radius:var(--sv-r-sm);box-shadow:var(--sv-sh-sm),var(--sv-hi);padding:14px 16px} :root[data-theme] #view-today .tdx-kpi .val, :root[data-theme] #view-crm .crmx-kpi .v, :root[data-theme] #view-ir .irx-kpi .val{font-family:var(--sv-display);font-weight:600; letter-spacing:-.02em;color:var(--sv-ink)} :root[data-theme] #view-today .tdx-kpi .l, :root[data-theme] #view-crm .crmx-kpi .l, :root[data-theme] #view-ir .irx-kpi .l{color:var(--sv-faint)} :root[data-theme] #view-today .tdx-kpi .val, :root[data-theme] #view-crm .crmx-kpi .v, :root[data-theme] #view-ir .irx-kpi .val{font-family:var(--sv-mono)} /* CRM kanban */ :root[data-theme] #view-crm .crmx-col{background:var(--sv-inset);border:1px solid var(--sv-line);border-radius:var(--sv-r-sm)} :root[data-theme] #view-crm .crmx-col h4{color:var(--sv-faint)} :root[data-theme] #view-crm .crmx-deal{background:var(--sv-surface);border:1px solid var(--sv-line); border-radius:var(--sv-r-xs);box-shadow:var(--sv-sh-sm)} :root[data-theme] #view-crm .crmx-deal:hover{box-shadow:var(--sv-sh); border-color:color-mix(in srgb,var(--sv-accent) 50%,var(--sv-line))} /* module grids */ :root[data-theme] #view-today .tdx-grid th, :root[data-theme] #view-crm .crmx-grid th, :root[data-theme] #view-ir .irx-grid th{color:var(--sv-faint);border-bottom:1px solid var(--sv-hair)} :root[data-theme] #view-today .tdx-grid td, :root[data-theme] #view-crm .crmx-grid td, :root[data-theme] #view-ir .irx-grid td{border-bottom:1px solid var(--sv-line-2)} :root[data-theme] #view-today .tdx-grid tr.click:hover td, :root[data-theme] #view-crm .crmx-grid tr.click:hover td, :root[data-theme] #view-ir .irx-grid tr.click:hover td{background:var(--sv-inset)} /* module pills + crm tab underline */ :root[data-theme] #view-today .tdx-pill, :root[data-theme] #view-crm .crmx-pill, :root[data-theme] #view-ir .irx-pill{background:var(--sv-inset);color:var(--sv-muted);border:1px solid var(--sv-line)} :root[data-theme] #view-crm .crmx-tab.on{color:var(--sv-ink);border-bottom-color:var(--sv-accent-2)} /* ============================================================================ 17) UI-v2 LEGACY ELEVATION — WAVE 2 (full coverage) --------------------------------------------------------------------------- Covers every remaining CSS-reachable hardcoded surface across all screens: the SCF cockpit (#view-scf .scf-*), facility/security (#svFacSec .fs-*), the SCF workspace module (#view-scfx .scfx-*), the CRM write modal (#crmxModal), and the admin status/semantic classes (chips, bands, badges, scans, KB, vault, HR, profile). Still gated on :root[data-theme] so ui_v2-off is unchanged. (Inline style="" literals + JS colour functions are handled separately in JS.) ========================================================================= */ /* -- 17a) SCF cockpit (#view-scf) — re-skin via local vars + literal classes -- */ :root[data-theme] #view-scf .scf-root{ --g:var(--sv-good); --gb:var(--sv-good-weak); --a:var(--sv-warn); --ab:var(--sv-warn-weak); --go:var(--sv-gold); --gob:var(--sv-gold-weak); --tr:var(--sv-info); --trb:var(--sv-info-weak); --bu:var(--sv-violet); --bub:var(--sv-violet-weak); --su:var(--sv-bad); --sub:var(--sv-bad-weak); --r:var(--sv-bad)} :root[data-theme] #view-scf .scf-ib{background:var(--sv-accent);color:#fff} :root[data-theme] #view-scf .scf-kpi, :root[data-theme] #view-scf .scf-panel{background:var(--sv-surface);border-color:var(--sv-line)} :root[data-theme] #view-scf .scf-dstat, :root[data-theme] #view-scf .scf-stat, :root[data-theme] #view-scf .scf-bar{background:var(--sv-inset);border-color:var(--sv-line)} :root[data-theme] #view-scf .scf-kpi .l,:root[data-theme] #view-scf .scf-kpi .s, :root[data-theme] #view-scf .scf-pd,:root[data-theme] #view-scf .scf-legend, :root[data-theme] #view-scf .scf-hint,:root[data-theme] #view-scf .scf-dstat .l, :root[data-theme] #view-scf .scf-stat .l,:root[data-theme] #view-scf .scf-stat .s, :root[data-theme] #view-scf .scf-drow b,:root[data-theme] #view-scf .scf-hl .cap, :root[data-theme] #view-scf .scf-covmeta .cl,:root[data-theme] #view-scf .scf-rrow .rs, :root[data-theme] #view-scf .scf-note{color:var(--sv-faint)} :root[data-theme] #view-scf .scf-drow{color:var(--sv-ink)} :root[data-theme] #view-scf .scf-kpi.r .v{color:var(--sv-bad)} :root[data-theme] #view-scf .scf-kpi.g .v, :root[data-theme] #view-scf .scf-hl .big.sv{color:var(--sv-good)} :root[data-theme] #view-scf .scf-sechd{color:var(--sv-accent)} :root[data-theme] #view-scf .scf-ctrl input{accent-color:var(--sv-accent)} :root[data-theme] #view-scf .scf-stat.sv{background:var(--sv-good-weak);border-color:color-mix(in srgb,var(--sv-good) 35%,transparent)} :root[data-theme] #view-scf .scf-stat.sv .v{color:var(--sv-good)} :root[data-theme] #view-scf .scf-stat.save{background:var(--sv-gold-weak);border-color:color-mix(in srgb,var(--sv-gold) 40%,transparent)} :root[data-theme] #view-scf .scf-stat.save .v{color:var(--sv-gold)} :root[data-theme] #view-scf .scf-bar.p i{background:linear-gradient(90deg,var(--sv-accent),var(--sv-accent-2))} :root[data-theme] #view-scf .scf-bar.s i{background:linear-gradient(90deg,color-mix(in srgb,var(--sv-good) 78%,#000),var(--sv-good))} :root[data-theme] #view-scf .scf-hl{background:linear-gradient(135deg,var(--sv-info-weak),var(--sv-inset));border-color:color-mix(in srgb,var(--sv-info) 30%,transparent)} /* SCF cockpit tables + chips */ :root[data-theme] #view-scf table.scf-tbl th{color:var(--sv-faint);border-bottom-color:var(--sv-line)} :root[data-theme] #view-scf table.scf-tbl td{color:var(--sv-ink);border-bottom-color:var(--sv-line-2)} :root[data-theme] #view-scf table.scf-tbl tr.clk:hover td{background:var(--sv-hover)} :root[data-theme] #view-scf .scf-chip{background:var(--sv-inset);color:var(--sv-muted)} :root[data-theme] #view-scf .scf-chip.g{color:var(--sv-good);background:var(--sv-good-weak)} :root[data-theme] #view-scf .scf-chip.a{color:var(--sv-warn);background:var(--sv-warn-weak)} :root[data-theme] #view-scf .scf-chip.r{color:var(--sv-bad);background:var(--sv-bad-weak)} :root[data-theme] #view-scf .scf-chip.b{color:var(--sv-info);background:var(--sv-info-weak)} :root[data-theme] #view-scf .scf-back{color:var(--sv-ink);border-color:var(--sv-line-2)} :root[data-theme] #view-scf .scfw-alert{border-color:color-mix(in srgb,var(--sv-bad) 40%,transparent);background:var(--sv-bad-weak)} :root[data-theme] #view-scf .scfw-alert.ok{border-color:color-mix(in srgb,var(--sv-good) 35%,transparent);background:var(--sv-good-weak)} :root[data-theme] #view-scf .scfw-alert.warn{border-color:color-mix(in srgb,var(--sv-warn) 40%,transparent);background:var(--sv-warn-weak)} :root[data-theme] #view-scf .scfw-alert .l,:root[data-theme] #view-scf .scfw-alert .s{color:var(--sv-faint)} :root[data-theme] #view-scf .scfw-portrow.sel td{background:var(--sv-accent-weak)} /* -- 17b) Facility / Security (#svFacSec .fs-*) ---------------------------- */ :root[data-theme] #svFacSec .fs-hd{color:var(--sv-faint)} :root[data-theme] #svFacSec .fs-panel{background:var(--sv-surface);border-color:var(--sv-line)} :root[data-theme] #svFacSec .fs-sechd{color:var(--sv-accent)} :root[data-theme] #svFacSec table.fs-tbl th{color:var(--sv-faint);border-bottom-color:var(--sv-line)} :root[data-theme] #svFacSec table.fs-tbl td{color:var(--sv-ink);border-bottom-color:var(--sv-line-2)} :root[data-theme] #svFacSec .fs-chip{background:var(--sv-inset);color:var(--sv-muted)} :root[data-theme] #svFacSec .fs-chip.g{color:var(--sv-good);background:var(--sv-good-weak)} :root[data-theme] #svFacSec .fs-chip.a{color:var(--sv-warn);background:var(--sv-warn-weak)} :root[data-theme] #svFacSec .fs-chip.r{color:var(--sv-bad);background:var(--sv-bad-weak)} :root[data-theme] #svFacSec .fs-chip.b{color:var(--sv-info);background:var(--sv-info-weak)} :root[data-theme] #svFacSec .fs-stat{background:var(--sv-inset);border-color:var(--sv-line)} :root[data-theme] #svFacSec .fs-stat .l,:root[data-theme] #svFacSec .fs-stat .s, :root[data-theme] #svFacSec .fs-note{color:var(--sv-faint)} /* -- 17c) SCF workspace module (#view-scfx .scfx-*) ----------------------- */ :root[data-theme] #view-scfx .scfx-tabs{border-bottom-color:var(--sv-line)} :root[data-theme] #view-scfx .scfx-tab{color:var(--sv-muted)} :root[data-theme] #view-scfx .scfx-tab:hover{color:var(--sv-ink)} :root[data-theme] #view-scfx .scfx-tab.on{color:var(--sv-ink);border-bottom-color:var(--sv-accent-2)} :root[data-theme] #view-scfx .scfx-kpi, :root[data-theme] #view-scfx .scfx-card, :root[data-theme] #view-scfx .scfx-sugg{background:var(--sv-surface);border-color:var(--sv-line)} :root[data-theme] #view-scfx .scfx-kpi .l,:root[data-theme] #view-scfx .scfx-kpi .d, :root[data-theme] #view-scfx .scfx-sub,:root[data-theme] #view-scfx .scfx-rng label, :root[data-theme] #view-scfx label.scfx-lbl,:root[data-theme] #view-scfx .scfx-back, :root[data-theme] #view-scfx .scfx-empty,:root[data-theme] #view-scfx .scfx-sugg .me{color:var(--sv-muted)} :root[data-theme] #view-scfx .scfx-sugg .ac{color:var(--sv-ink)} :root[data-theme] #view-scfx .scfx-grid th{color:var(--sv-muted);border-bottom-color:var(--sv-line)} :root[data-theme] #view-scfx .scfx-grid td{border-bottom-color:var(--sv-line-2)} :root[data-theme] #view-scfx .scfx-grid tr.click:hover td{background:var(--sv-inset)} :root[data-theme] #view-scfx .scfx-pill{background:var(--sv-inset);color:var(--sv-muted)} :root[data-theme] #view-scfx .scfx-pill.warn{background:var(--sv-bad-weak);color:var(--sv-bad)} :root[data-theme] #view-scfx .scfx-pill.ok{background:var(--sv-good-weak);color:var(--sv-good)} :root[data-theme] #view-scfx .scfx-pill.info{background:var(--sv-info-weak);color:var(--sv-info)} :root[data-theme] #view-scfx .scfx-bar{background:var(--sv-inset)} :root[data-theme] #view-scfx .scfx-bar>i{background:var(--sv-accent)} :root[data-theme] #view-scfx .scfx-note.ok{background:var(--sv-good-weak);color:var(--sv-good)} :root[data-theme] #view-scfx .scfx-note.err{background:var(--sv-bad-weak);color:var(--sv-bad)} :root[data-theme] #view-scfx .scfx-link, :root[data-theme] #view-scfx .nav-group.scfx-platforms .gh{color:var(--sv-accent)} :root[data-theme] #view-scfx .scfx-in{background:var(--sv-inset);border-color:var(--sv-line-2);color:var(--sv-ink)} :root[data-theme] #view-scfx .scfx-in:focus{border-color:var(--sv-accent);box-shadow:var(--sv-focus)} :root[data-theme] #view-scfx .scfx-btn{background:var(--sv-accent);color:#fff} :root[data-theme] #view-scfx .scfx-btn.ghost{background:transparent;border-color:var(--sv-line-2);color:var(--sv-ink)} /* Elevate the CONTENT tabs (facilities/economics/contacts/documents/data) so the scfx-card/scfx-kpi rhythm matches the sv- account cards. */ :root[data-theme] #view-scfx .scfx-card{padding:18px 20px} :root[data-theme] #view-scfx .scfx-card h3{font-family:var(--sv-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--sv-muted);margin-bottom:12px} :root[data-theme] #view-scfx .scfx-kpi .v{font-family:var(--sv-display);font-weight:600;letter-spacing:-.02em;color:var(--sv-ink)} /* -- 17d) CRM write modal (#crmxModal) + remaining module text ------------ */ :root[data-theme] #crmxModal{background:var(--sv-scrim)} :root[data-theme] #crmxModal .box{background:var(--sv-surface);border-color:var(--sv-line);box-shadow:var(--sv-sh)} :root[data-theme] #crmxModal label{color:var(--sv-muted)} :root[data-theme] #crmxModal input, :root[data-theme] #crmxModal select, :root[data-theme] #crmxModal textarea{background:var(--sv-inset);border-color:var(--sv-line-2);color:var(--sv-ink)} :root[data-theme] #crmxModal .err{color:var(--sv-bad)} :root[data-theme] #view-crm .crmx-tabs{border-bottom-color:var(--sv-line)} :root[data-theme] #view-crm .crmx-tab{color:var(--sv-muted)} :root[data-theme] #view-crm .crmx-sub,:root[data-theme] #view-crm .crmx-back, :root[data-theme] #view-crm .crmx-deal .mt, :root[data-theme] #view-ir .irx-sub,:root[data-theme] #view-ir .irx-back, :root[data-theme] #view-today .tdx-sub{color:var(--sv-muted)} /* -- 17e) Admin status / semantic classes (chips, bands, badges, scans) --- */ :root[data-theme] .chip.red{color:var(--sv-bad);background:var(--sv-bad-weak);border-color:color-mix(in srgb,var(--sv-bad) 35%,transparent)} :root[data-theme] .chip.amber{color:var(--sv-warn);background:var(--sv-warn-weak);border-color:color-mix(in srgb,var(--sv-warn) 35%,transparent)} :root[data-theme] .chip.green{color:var(--sv-good);background:var(--sv-good-weak);border-color:color-mix(in srgb,var(--sv-good) 35%,transparent)} :root[data-theme] .band.Low,:root[data-theme] .scan-clean{color:var(--sv-good);background:var(--sv-good-weak)} :root[data-theme] .band.Medium,:root[data-theme] .scan-pending{color:var(--sv-warn);background:var(--sv-warn-weak)} :root[data-theme] .band.High,:root[data-theme] .scan-rejected{color:var(--sv-bad);background:var(--sv-bad-weak)} :root[data-theme] .scan-skipped{color:var(--sv-faint)} :root[data-theme] .src-onboarding{color:var(--sv-info)} :root[data-theme] .src-staff{color:var(--sv-violet)} :root[data-theme] .pipe-health .bad .v,:root[data-theme] .prio-High{color:var(--sv-bad)} :root[data-theme] .pipe-health .warn .v,:root[data-theme] .expsoon{color:var(--sv-warn)} :root[data-theme] .pipe-health .good .v{color:var(--sv-good)} :root[data-theme] .exppast{color:var(--sv-bad)} :root[data-theme] .dchip{color:var(--sv-good);background:var(--sv-good-weak);border-color:color-mix(in srgb,var(--sv-good) 28%,transparent)} :root[data-theme] .dfac-eyebrow{color:var(--sv-accent-ink)} /* KB badges + nav rail + quiz dots */ :root[data-theme] .kb-badge.pub{color:var(--sv-good);border-color:color-mix(in srgb,var(--sv-good) 30%,transparent)} :root[data-theme] .kb-badge.draft{color:var(--sv-warn);border-color:color-mix(in srgb,var(--sv-warn) 30%,transparent)} :root[data-theme] .kb-nav a.on{background:var(--sv-accent-weak);color:var(--sv-ink);box-shadow:inset 2px 0 0 var(--sv-accent)} :root[data-theme] .kb-nav a .d{color:var(--sv-warn)} :root[data-theme] .qz-dot.on{color:var(--sv-ink);border-color:var(--sv-accent);background:var(--sv-accent-weak)} :root[data-theme] .qz-dot.done{color:var(--sv-good);border-color:color-mix(in srgb,var(--sv-good) 30%,transparent)} /* HR alert cards */ :root[data-theme] .alert-card{border-left-color:var(--sv-warn)} :root[data-theme] .alert-card.ok{border-left-color:var(--sv-good)} /* -- 17f) Admin hardcoded surfaces (modal, glass, hovers, banners, inputs) - */ :root[data-theme] .modal-bg{background:var(--sv-scrim)} :root[data-theme] .modal{background:var(--sv-surface);border-color:var(--sv-line);box-shadow:var(--sv-sh)} :root[data-theme] .top,:root[data-theme] .topbar{background:var(--sv-glass);border-bottom-color:var(--sv-hair)} :root[data-theme] tbody tr:hover,:root[data-theme] tr.clk:hover, :root[data-theme] .frow:hover,:root[data-theme] .party-row:hover, :root[data-theme] .folder-hd:hover,:root[data-theme] .qr:hover{background:var(--sv-hover)} :root[data-theme] .gnode:hover{background:var(--sv-inset);border-color:var(--sv-line-2)} :root[data-theme] .qs-res{box-shadow:var(--sv-sh)} :root[data-theme] .pcol.drag{border-color:var(--sv-accent);background:var(--sv-accent-weak)} :root[data-theme] .dropzone.drag,:root[data-theme] .dropzone:hover{border-color:var(--sv-accent);background:var(--sv-accent-weak)} :root[data-theme] .dfac{background:radial-gradient(140% 130% at 100% -10%,var(--sv-accent-weak),transparent 55%),var(--sv-surface);border-color:color-mix(in srgb,var(--sv-accent) 30%,var(--sv-line))} :root[data-theme] .pf-cover{background:linear-gradient(120deg,var(--sv-accent-weak),var(--sv-inset) 58%,var(--sv-surface))} :root[data-theme] .pf-cover:after{background:radial-gradient(circle at 82% -20%,var(--sv-accent-glow),transparent 60%)} :root[data-theme] .pf-progress>i{background:linear-gradient(90deg,var(--sv-accent),var(--sv-accent-2))} :root[data-theme] .input:focus,:root[data-theme] select:focus,:root[data-theme] textarea:focus, :root[data-theme] .qs input:focus,:root[data-theme] .kb-search input:focus{border-color:var(--sv-accent);box-shadow:var(--sv-focus)} :root[data-theme] ::-webkit-scrollbar-thumb{background:var(--sv-line)} :root[data-theme] ::-webkit-scrollbar-thumb:hover{background:var(--sv-line-2)} /* ============================================================================ 18) UI-v2 PAGE-HEADER RHYTHM (admin-native pages) Every legacy admin screen uses `

…

…
` as its page header. Lift that to a consistent premium header app-wide so pages read as "designed", not just recoloured — CSS only, no per-page markup changes. Gated on :root[data-theme] so ui_v2-off is unchanged. ========================================================================= */ :root[data-theme] .bar{align-items:baseline;gap:14px;border-bottom:1px solid var(--sv-hair); padding-bottom:16px;margin-bottom:22px} :root[data-theme] .bar h1{font-family:var(--sv-display);font-weight:600;font-size:24px;letter-spacing:-.02em;line-height:1.1} :root[data-theme] .bar > span{color:var(--sv-faint);font-size:12.5px} :root[data-theme] .dash-kpis{gap:14px} :root[data-theme] .sec-t h2{font-family:var(--sv-display);font-weight:600;letter-spacing:-.01em} :root[data-theme] .sec-t .e{color:var(--sv-accent)} /* section/card headings inside admin pages → quieter, consistent */ :root[data-theme] .card > h3:first-child{font-size:13px;font-weight:700;letter-spacing:.01em;margin-bottom:12px} /* ============================================================================ 19) UI-v2 BESPOKE-CARD ELEVATION (admin card grids) Many admin pages use their own card class (People, Org, JVs, Vault, KB, Onboarding, Files, Projects, Profiles) that the colour bridge only recoloured. Lift them all to the sv-card visual standard: surface, hairline, radius, depth, and a subtle hover for the clickable ones. CSS only; gated on data-theme. ========================================================================= */ :root[data-theme] .proj, :root[data-theme] .folder, :root[data-theme] .jv-card, :root[data-theme] .jv-proj, :root[data-theme] .emp-card, :root[data-theme] .board-card, :root[data-theme] .org-card, :root[data-theme] .vault-card, :root[data-theme] .kb-card, :root[data-theme] .kb-cat-card, :root[data-theme] .onb-card, :root[data-theme] .pf-card, :root[data-theme] .pf-sec, :root[data-theme] .intake-card, :root[data-theme] .alert-card, :root[data-theme] .task, :root[data-theme] .gnode, :root[data-theme] .folder-sec{ background:var(--sv-surface); border:1px solid var(--sv-line); border-radius:var(--sv-r-sm); box-shadow:var(--sv-sh-sm),var(--sv-hi); } /* clickable cards get a gentle lift on hover */ :root[data-theme] .proj:hover, :root[data-theme] .folder:hover, :root[data-theme] .jv-proj:hover, :root[data-theme] .emp-card:hover, :root[data-theme] .board-card:hover, :root[data-theme] .org-card:hover, :root[data-theme] .vault-card:hover, :root[data-theme] .kb-card:hover, :root[data-theme] .kb-cat-card:hover, :root[data-theme] .onb-card:hover, :root[data-theme] .task:hover, :root[data-theme] .gnode:hover{ box-shadow:var(--sv-sh-hover); border-color:color-mix(in srgb,var(--sv-accent) 28%,var(--sv-line)); transform:translateY(-1px); } /* org/board connector lines + person rows → token hairlines */ :root[data-theme] .org-link{background:var(--sv-line)} :root[data-theme] .party-row, :root[data-theme] .hr-row, :root[data-theme] .frow, :root[data-theme] .frow2{border-color:var(--sv-line-2)} /* ============================================================================ 20) INVESTMENT-OS v2 COMPONENTS (os4 design language — additive, inert until markup adopts them; consumed by the shell/Command-Center/Deal-OS rebuilds). Every component is token-driven; no raw colour below this line. ========================================================================= */ /* -- 20a) Decision band — "decisions, not data" (inverted pyramid step 2) --- Sits ABOVE the raw table: the recommended action + the exceptions. */ .sv-decisions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sv-space-4);margin-bottom:var(--sv-space-5)} @media(max-width:900px){.sv-decisions{grid-template-columns:1fr}} .sv-decision{display:flex;gap:var(--sv-space-3);align-items:flex-start;padding:var(--sv-space-3) var(--sv-space-4); border:1px solid var(--sv-line);border-left:3px solid var(--sv-accent);border-radius:var(--sv-r-sm); background:var(--sv-surface);box-shadow:var(--sv-sh-sm);cursor:pointer} .sv-decision:hover{box-shadow:var(--sv-sh)} .sv-decision--warn{border-left-color:var(--sv-warn)} .sv-decision--info{border-left-color:var(--sv-info)} .sv-decision--ok{border-left-color:var(--sv-good)} .sv-decision .t{font-size:var(--sv-fs-label);font-weight:600} .sv-decision .s{font-size:var(--sv-fs-caption);color:var(--sv-muted);margin-top:2px} .sv-decision .go{margin-left:auto;color:var(--sv-accent-2);font-weight:600;font-size:var(--sv-fs-caption);white-space:nowrap} /* -- 20b) Deltas — colour is ALWAYS double-encoded with a sign (v2 §4) ------ */ .sv-delta{font-family:var(--sv-mono);font-variant-numeric:tabular-nums;font-size:var(--sv-fs-caption);font-weight:600} .sv-delta.up{color:var(--sv-good)} .sv-delta.up:before{content:"▲ "} .sv-delta.down{color:var(--sv-bad)} .sv-delta.down:before{content:"▼ "} .sv-delta.flat{color:var(--sv-faint)} .sv-delta.flat:before{content:"— "} /* -- 20c) Context drawer — right-side 360 panel for any entity ------------- */ .sv-drawer-scrim{position:fixed;inset:0;background:var(--sv-scrim);z-index:60;opacity:0;pointer-events:none;transition:opacity .18s} .sv-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);z-index:61;background:var(--sv-surface); border-left:1px solid var(--sv-line);box-shadow:var(--sv-sh);transform:translateX(102%);transition:transform .2s ease; display:flex;flex-direction:column;overflow:hidden} .sv-drawer.is-open{transform:none} .sv-drawer.is-open+.sv-drawer-scrim,.sv-drawer-scrim.is-open{opacity:1;pointer-events:auto} .sv-drawer__h{display:flex;align-items:center;gap:var(--sv-space-3);padding:var(--sv-space-4) var(--sv-space-5);border-bottom:1px solid var(--sv-hair)} .sv-drawer__h h2{margin:0;font:600 var(--sv-fs-subheading)/var(--sv-lh-subheading) var(--sv-display);letter-spacing:-.01em} .sv-drawer__b{flex:1;overflow:auto;padding:var(--sv-space-4) var(--sv-space-5)} .sv-drawer__x{margin-left:auto;width:32px;height:32px;border-radius:var(--sv-r-xs);border:1px solid var(--sv-line); background:transparent;color:var(--sv-muted);cursor:pointer;display:grid;place-items:center} .sv-drawer__x:hover{color:var(--sv-ink);background:var(--sv-inset)} /* -- 20d) Lifecycle stage board (source → … → exit/archive) ---------------- */ .sv-stage-board{display:flex;gap:var(--sv-space-3);overflow-x:auto;padding-bottom:var(--sv-space-2)} .sv-stage{flex:0 0 240px;background:var(--sv-inset);border:1px solid var(--sv-line-2);border-radius:var(--sv-r-sm);padding:var(--sv-space-3)} .sv-stage__h{display:flex;align-items:center;gap:var(--sv-space-2);font:600 var(--sv-fs-eyebrow)/var(--sv-lh-eyebrow) var(--sv-mono); letter-spacing:.08em;text-transform:uppercase;color:var(--sv-faint);padding:0 2px var(--sv-space-2)} .sv-stage__h .n{margin-left:auto;color:var(--sv-muted)} .sv-stage.is-current{border-color:color-mix(in srgb,var(--sv-gold) 45%,transparent)} .sv-stage .sv-card{margin-bottom:var(--sv-space-2)} /* -- 20e) Timeline / event stream (universal activity spine) --------------- */ .sv-timeline{position:relative;padding-left:22px} .sv-timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--sv-line)} .sv-tl-ev{position:relative;padding:var(--sv-space-2) 0 var(--sv-space-3)} .sv-tl-ev:before{content:"";position:absolute;left:-19px;top:14px;width:9px;height:9px;border-radius:50%; background:var(--sv-surface);border:2px solid var(--sv-faint)} .sv-tl-ev--doc:before{border-color:var(--sv-info)} .sv-tl-ev--ok:before{border-color:var(--sv-good)} .sv-tl-ev--rel:before{border-color:var(--sv-gold)} .sv-tl-ev--risk:before{border-color:var(--sv-bad)} .sv-tl-ev .t{font-size:var(--sv-fs-label);font-weight:600} .sv-tl-ev .m{font-size:var(--sv-fs-caption);color:var(--sv-muted);margin-top:2px} .sv-tl-ev .w{font:400 var(--sv-fs-caption)/var(--sv-lh-caption) var(--sv-mono);color:var(--sv-faint);margin-top:2px} /* -- 20f) Approval queue card ---------------------------------------------- */ .sv-approval{display:flex;gap:var(--sv-space-3);align-items:center;padding:var(--sv-space-3) var(--sv-space-4); background:var(--sv-surface);border:1px solid var(--sv-line);border-radius:var(--sv-r-sm);box-shadow:var(--sv-sh-sm);margin-bottom:var(--sv-space-2)} .sv-approval .who{font-size:var(--sv-fs-caption);color:var(--sv-muted)} .sv-approval .acts{margin-left:auto;display:flex;gap:var(--sv-space-2)} /* -- 20g) Risk heatmap ------------------------------------------------------ */ .sv-heatmap{display:grid;gap:3px} .sv-heatcell{aspect-ratio:1;border-radius:4px;background:var(--sv-inset);border:1px solid var(--sv-line-2); display:grid;place-items:center;font:600 10px var(--sv-mono);color:var(--sv-faint);cursor:pointer} .sv-heatcell.is-low{background:var(--sv-good-weak);color:var(--sv-good)} .sv-heatcell.is-med{background:var(--sv-warn-weak);color:var(--sv-warn)} .sv-heatcell.is-high{background:var(--sv-bad-weak);color:var(--sv-bad)} /* -- 20h) Release / permission chrome (what is safe to show externally) ---- */ .sv-release-banner{display:flex;gap:var(--sv-space-3);align-items:center;padding:var(--sv-space-2) var(--sv-space-4); border-radius:var(--sv-r-sm);border:1px solid var(--sv-line);font-size:var(--sv-fs-caption);font-weight:600;margin-bottom:var(--sv-space-4)} .sv-release-banner--draft{background:var(--sv-warn-weak);color:var(--sv-warn);border-color:color-mix(in srgb,var(--sv-warn) 32%,transparent)} .sv-release-banner--internal{background:var(--sv-inset);color:var(--sv-muted)} .sv-release-banner--released{background:var(--sv-good-weak);color:var(--sv-good);border-color:color-mix(in srgb,var(--sv-good) 32%,transparent)} .sv-permission-badge{display:inline-flex;align-items:center;gap:5px;font:600 10px var(--sv-mono);letter-spacing:.06em; text-transform:uppercase;padding:3px 8px;border-radius:var(--sv-r-pill);border:1px solid var(--sv-line);background:var(--sv-inset);color:var(--sv-muted)} .sv-permission-badge--released{color:var(--sv-good);background:var(--sv-good-weak);border-color:color-mix(in srgb,var(--sv-good) 30%,transparent)} .sv-permission-badge--held{color:var(--sv-warn);background:var(--sv-warn-weak);border-color:color-mix(in srgb,var(--sv-warn) 30%,transparent)} /* -- 20i) AI insight card — governed AI: source + confidence + human review - */ .sv-ai-insight{background:var(--sv-surface);border:1px solid color-mix(in srgb,var(--sv-violet) 32%,var(--sv-line)); border-radius:var(--sv-r-sm);box-shadow:var(--sv-sh-sm);padding:var(--sv-space-3) var(--sv-space-4);margin-bottom:var(--sv-space-3)} .sv-ai-insight__h{display:flex;align-items:center;gap:var(--sv-space-2);font:600 var(--sv-fs-eyebrow)/var(--sv-lh-eyebrow) var(--sv-mono); letter-spacing:.08em;text-transform:uppercase;color:var(--sv-violet);margin-bottom:var(--sv-space-2)} .sv-ai-insight .src{font-size:var(--sv-fs-caption);color:var(--sv-faint)} .sv-ai-insight .src a{color:var(--sv-info)} .sv-ai-conf{display:inline-flex;align-items:center;gap:5px;font:600 10px var(--sv-mono);padding:2px 8px; border-radius:var(--sv-r-pill);background:var(--sv-violet-weak);color:var(--sv-violet)} .sv-ai-insight__acts{display:flex;gap:var(--sv-space-2);margin-top:var(--sv-space-3);padding-top:var(--sv-space-2);border-top:1px dashed var(--sv-line-2)} /* -- 20j) States: honest empty + error (every module, no dead dashboards) -- */ .sv-empty--action{padding:var(--sv-space-7) var(--sv-space-5);text-align:center;border:1px dashed var(--sv-line);border-radius:var(--sv-r-sm);color:var(--sv-muted)} .sv-empty--action .t{font-weight:600;color:var(--sv-ink);font-size:var(--sv-fs-body)} .sv-empty--action .s{font-size:var(--sv-fs-caption);color:var(--sv-faint);margin:var(--sv-space-1) 0 var(--sv-space-3)} .sv-error-state{padding:var(--sv-space-5);border:1px solid color-mix(in srgb,var(--sv-bad) 34%,transparent); background:var(--sv-bad-weak);border-radius:var(--sv-r-sm);color:var(--sv-bad);font-size:var(--sv-fs-label)} .sv-error-state .retry{margin-top:var(--sv-space-2)} /* -- 20k) Table density modes (40 / 48 / 56px rows; v2 §6) ------------------ */ .sv-table--compact td{padding:9px 16px} .sv-table--compact th{padding:8px 16px} .sv-table--relaxed td{padding:17px 18px} .sv-table .sv-frozen{position:sticky;left:0;background:var(--sv-surface);z-index:1} .sv-table thead.sv-sticky th{position:sticky;top:0;background:var(--sv-surface);z-index:2} /* ==== �22 MOBILE (B.mobile 2026-07-16, owner report: phone views clipped) ==== Principles: never let the page scroll horizontally; rows that cannot fit WRAP; wide tables scroll INSIDE their card; drawers cap at the viewport. */ @media (max-width:760px){ html,body{overflow-x:hidden;max-width:100vw} /* !important: admin.html's inline