/* ============================================================ ENSURE — Neutral-first skin (draft) ------------------------------------------------------------ Loaded after main.css. Only active when . Toggle by adding ?skin=neutral to any app URL. Palette: Ink + Off-white + Forest Strategy: - Single brand accent (forest) replaces navy throughout - Every status pill becomes a neutral chip + colored dot - Only true danger (red) keeps a saturated tint, used sparingly - Sidebar / KPI / nav icons drop per-module colors ============================================================ */ html[data-skin="neutral"] { /* ---- Base tokens ---- "Brand" collapses to a near-black gray. The orange logo dot is the only saturated color in the system. */ --navy: #1F1F1F; /* dark charcoal — primary button + active states */ --navy-l: #F0F0F0; /* very faint gray, for tinted backgrounds */ --navy-m: #404040; --navy-d: #0A0A0A; /* hover — pure ink */ --steel: #525252; --steel-l: #F4F4F5; --steel-m: #909090; --steel-d: #1F1F1F; /* Logo dot stays orange — brand mark is sacred */ --safety-orange: #EA580C; --safety-orange-l:#FFEDD5; --success: #15803D; --success-l: #E8EFEA; /* much quieter — barely tinted */ --warning: #525252; /* desaturated — was loud amber */ --warning-l: #F4F4F5; --danger: #B91C1C; /* keep — red is reserved for true danger */ --danger-l: #FBE7E7; --slate-50: #FAFAFA; --slate-100: #F4F4F5; --slate-200: #E5E5E5; --slate-300: #D4D4D4; --slate-400: #909090; --slate-500: #525252; --slate-600: #404040; --slate-700: #262626; --slate-800: #171717; --slate-900: #0A0A0A; --bg: #FAFAFA; --bg2: #FFFFFF; --bg3: #F4F4F5; --border: #E5E5E5; --text: #0A0A0A; --text2: #3F3F3F; /* darker — was #525252, too light on white */ --text3: #6B6B6B; /* darker — was #909090, was hard to read */ /* Per-module accent colors all collapse to neutrals — */ /* this is what kills the "Pantone fan" look. */ --purple: #525252; --purple-l: #F4F4F5; --purple-m: #909090; --amber: #525252; --amber-l: #F4F4F5; --amber-m: #909090; --teal: #1F4D3A; --teal-l: #E6ECE8; --red: #B91C1C; --red-l: #FBE7E7; --green: #15803D; --green-l: #E8EFEA; --coral: #525252; } /* ============================================================ TYPE SIZE — +1px across the board for legibility Body bumps from 13px → 14px; px-set rules get explicit bumps. ============================================================ */ html[data-skin="neutral"] body { font-size: 14px; } html[data-skin="neutral"] .page-title { font-size: 17px; } html[data-skin="neutral"] .panel-title { font-size: 14.5px; } html[data-skin="neutral"] .panel-link { font-size: 12.5px; } html[data-skin="neutral"] .stat-label { font-size: 11px; } html[data-skin="neutral"] .stat-sub { font-size: 11.5px; } html[data-skin="neutral"] .tbl th { font-size: 11px; } html[data-skin="neutral"] .tbl td { font-size: 13.5px; } html[data-skin="neutral"] .nav-item { font-size: 13.5px; } html[data-skin="neutral"] .nav-label { font-size: 10px; } html[data-skin="neutral"] .user-name { font-size: 13px; } html[data-skin="neutral"] .user-role { font-size: 11px; } html[data-skin="neutral"] .btn { font-size: 13.5px; } html[data-skin="neutral"] .btn-sm { font-size: 12.5px; } /* ============================================================ STATUS / BADGE PILLS — soft tinted capsule. No dot, no border. The tint itself carries the meaning. Three visual weights: - ALARM (red) — actionable - WATCH (amber) — attention required - QUIET (neutral)— nothing wrong ============================================================ */ html[data-skin="neutral"] .bdg { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; background: var(--bg3); color: var(--text2); border: 0; line-height: 1.4; } /* Alarm — red tint, red text (the only "loud" state) */ html[data-skin="neutral"] .b-danger, html[data-skin="neutral"] .b-red { background: #FBE7E7; color: #9F1818; } /* Watch — amber tint, deep amber text */ html[data-skin="neutral"] .b-warning, html[data-skin="neutral"] .b-amb, html[data-skin="neutral"] .b-orange, html[data-skin="neutral"] .b-cor { background: #FBF1DC; color: #8A5A0A; } /* In-motion (implementation / in progress) — ink tint */ html[data-skin="neutral"] .b-primary, html[data-skin="neutral"] .b-pur { background: #EAEAEA; color: #1F1F1F; } /* Done — quiet success */ html[data-skin="neutral"] .b-success, html[data-skin="neutral"] .b-grn { background: #ECEFEC; color: #4A5A4F; } /* Info / verification — pure neutral */ html[data-skin="neutral"] .b-info, html[data-skin="neutral"] .b-blu { background: #F4F4F5; color: #525252; } /* Gray — most quiet */ html[data-skin="neutral"] .b-gray, html[data-skin="neutral"] .b-gry { background: #F4F4F5; color: #707070; } /* ============================================================ BUTTONS — primary becomes forest ============================================================ */ html[data-skin="neutral"] .btn-primary { background: var(--navy); color: #fff; } html[data-skin="neutral"] .btn-primary:hover { background: var(--navy-d); } /* ============================================================ SIDEBAR — drop the navy active state, use ink-on-bg3 instead ============================================================ */ html[data-skin="neutral"] .nav-item.active { background: var(--bg3); color: var(--text); } html[data-skin="neutral"] .nav-item.active .nav-icon { color: var(--text); opacity: 1; } /* Forest sliver on the active item — restrained brand cue */ html[data-skin="neutral"] .nav-item.active { position: relative; } html[data-skin="neutral"] .nav-item.active::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 2px; background: var(--navy); border-radius: 2px; } html[data-skin="neutral"] .nav-badge { background: var(--safety-orange); color: #fff; } /* Avatar bubble — was navy, now ink */ html[data-skin="neutral"] .avatar { background: var(--text); color: var(--bg2); } /* ============================================================ PANELS / STAT CARDS — soften shadows, drop colored accents ============================================================ */ html[data-skin="neutral"] .panel, html[data-skin="neutral"] .stat-card, html[data-skin="neutral"] .kpi-card { box-shadow: none; } /* Table refs were colored navy — keep forest as the link cue */ html[data-skin="neutral"] .tbl-ref { color: var(--navy); } html[data-skin="neutral"] .panel-link { color: var(--navy); } /* ============================================================ STAT BAR — quieter fills (the chip is what carries meaning) ============================================================ */ html[data-skin="neutral"] .stat-sub.up { color: var(--text2); } html[data-skin="neutral"] .stat-sub.dn { color: var(--danger); } /* ============================================================ TOPBAR — quiet ============================================================ */ html[data-skin="neutral"] .topbar { background: var(--bg2); } html[data-skin="neutral"] .page-title { font-weight: 600; letter-spacing: -0.01em; }