/* ============================================================================= cinti-theme.css — CINTI OS universal theme tokens CW Project #63 / Wave 0 / 2026-05-08 Single source of truth for both dark and light themes across every user-facing surface (admin, portals, avatar, public). Load this at the top of , BEFORE any inline styles that depend on tokens, so first paint already has the right colors. Token contract: --cinti-bg-* background surfaces (base → elevated → panel) --cinti-text-* text colors (primary → secondary → dim → mute) --cinti-accent brand accent (cyan dark, teal-blue light) --cinti-success/warn/danger semantic colors --cinti-border* panel/input borders --cinti-shadow elevation shadow --cinti-grid-opacity dot-grid bg pattern (lower in light mode) --cinti-blur glassmorphism blur radius Theme switching: → dark (default; matches :root) → light ============================================================================= */ :root, [data-theme="dark"] { /* surfaces */ --cinti-bg-base: #0a0e1a; --cinti-bg-elevated: #0e1420; --cinti-bg-panel: rgba(18, 28, 52, 0.9); --cinti-bg-input: rgba(10, 18, 35, 0.8); --cinti-bg-hover: rgba(38, 189, 214, 0.06); --cinti-bg-dock: #080c1a; --cinti-bg-desktop: #141e33; /* text */ --cinti-text-primary: #e8edf5; --cinti-text-secondary: #cfd6e2; --cinti-text-dim: #8a92a3; --cinti-text-mute: #5e6675; --cinti-text-inverse: #0a0e1a; /* accent + semantic */ --cinti-accent: #26bdd6; --cinti-accent-bright: #3dd8f0; --cinti-accent-soft: rgba(38, 189, 214, 0.18); /* Unprefixed accent tokens + RGB channels so raw cyan literals (#26bdd6 / rgba(38,189,214,α)) converted to var(--accent…) flip by theme. Dark = exact cyan; light block below flips to navy. (2026-07-09) */ --accent: #26bdd6; --bright: #3dd8f0; --accent-rgb: 38, 189, 214; --bright-rgb: 61, 216, 240; --cinti-success: #00e676; --cinti-warn: #ffb74d; --cinti-danger: #ff4060; --cinti-info: #3dd8f0; /* structure */ --cinti-border: rgba(38, 189, 214, 0.18); --cinti-border-strong: rgba(38, 189, 214, 0.35); --cinti-border-mute: rgba(38, 189, 214, 0.08); --cinti-shadow: rgba(0, 0, 0, 0.4); --cinti-shadow-strong: rgba(0, 0, 0, 0.6); /* effects */ --cinti-grid-opacity: 0.8; --cinti-grid-color: rgba(38, 189, 214, 0.015); --cinti-blur: 20px; /* tables / lists */ --cinti-row-alt: rgba(38, 189, 214, 0.03); --cinti-row-hover: rgba(38, 189, 214, 0.08); /* layout (theme-invariant) */ --cinti-topbar-h: 38px; --cinti-dock-w: 56px; --cinti-taskbar-h: 52px; --cinti-color-scheme: dark; } [data-theme="light"] { /* surfaces — Gene 2026-05-14 surface-tier pass. Light mode was reading as "flat white" because every card sat on a translucent-white panel (no lift, no hierarchy). Replaced the core panel with solid #ffffff and added explicit raised/sunk tiers so the eye has a layer hierarchy instead of one mushed plane. Dark mode untouched. */ --cinti-bg-base: #f4f7fb; --cinti-bg-elevated: #ffffff; --cinti-bg-panel: #ffffff; /* was rgba(255,255,255,0.85) — translucent white invisible on near-white page */ --cinti-bg-raised: #f7f9fc; /* NEW — hover state / sub-panel one tier above base */ --cinti-bg-sunk: #e6ebf2; /* NEW — input wells, table-stripe rows */ --cinti-bg-input: rgba(240, 244, 250, 0.9); --cinti-bg-hover: rgba(26, 154, 181, 0.08); --cinti-bg-dock: #dce3ec; --cinti-bg-desktop: #eef2f7; --cinti-panel-shadow: 0 1px 0 rgba(20,30,50,0.04), 0 8px 24px rgba(20,30,50,0.06); /* NEW — card lift */ --cinti-panel-shadow-hover: 0 1px 0 rgba(20,30,50,0.06), 0 14px 36px rgba(20,30,50,0.10); /* NEW — hover lift */ /* text — Emmanuel 2026-05-13 readability pass: previous values (text-dim #5c6a82, text-mute #8a92a3) failed AA on the off-white background. Bumped to dark slate / dark grey so secondary text reads cleanly. Primary text deepened slightly. Dark mode unchanged. */ --cinti-text-primary: #0e1726; --cinti-text-secondary: #1f2a3e; --cinti-text-dim: #3a4458; --cinti-text-mute: #4d566b; --cinti-text-inverse: #ffffff; /* accent + semantic — darker accent for AA contrast on light */ --cinti-accent: #1b2a63; --cinti-accent-bright: #0f1d4d; --cinti-accent-soft: rgba(13, 80, 100, 0.14); /* Navy overrides for the unprefixed accent tokens + RGB channels — this is what turns every converted cyan literal navy in light mode. (2026-07-09) */ --accent: #1b2a63; --bright: #0f1d4d; --accent-rgb: 27, 42, 99; --bright-rgb: 15, 29, 77; --cinti-success: #007a32; --cinti-warn: #a85a00; --cinti-danger: #b21f1f; --cinti-info: #0f1d4d; /* structure — darker borders so panels read as defined regions instead of fading into the bg. */ --cinti-border: rgba(13, 80, 100, 0.32); --cinti-border-strong: rgba(13, 80, 100, 0.5); --cinti-border-mute: rgba(13, 80, 100, 0.16); --cinti-shadow: rgba(20, 30, 50, 0.08); --cinti-shadow-strong: rgba(20, 30, 50, 0.16); /* effects — grid lines bumped from 0.04@0.3opacity (= ~0.012 net, invisible on light bg) to 0.06@1.0opacity so the page has the same subtle texture as dark mode instead of looking dead-flat. */ --cinti-grid-opacity: 1; --cinti-grid-color: rgba(13, 80, 100, 0.05); --cinti-blur: 16px; /* tables / lists */ --cinti-row-alt: rgba(26, 154, 181, 0.03); --cinti-row-hover: rgba(26, 154, 181, 0.06); --cinti-color-scheme: light; } /* KEYSTONE (Gene 2026-07-09): individual portals define --accent:#26bdd6 in a plain :root block that, by source order, overrode the light navy above — so converted var(--accent…) literals stayed cyan in light. html[data-theme= "light"] outranks :root by specificity and wins regardless of load order, forcing every accent token navy in light. Dark mode untouched. */ html[data-theme="light"] { /* !important so these beat a per-tenant BRAND accent that admin.js applies as an INLINE style on (documentElement.style.setProperty('--accent', branding.accentColor) — a cyan brand color for some tenants). A normal inline style beats a stylesheet rule, but a stylesheet !important beats a NORMAL inline style — which is why a portal could stay cyan in light mode despite the keystone. Dark mode untouched. */ --accent: #1b2a63 !important; --bright: #0f1d4d !important; --accent-2: #1b2a63 !important; --teal: #1b2a63 !important; --accent-rgb: 27, 42, 99 !important; --bright-rgb: 15, 29, 77 !important; --cinti-accent: #1b2a63 !important; --cinti-accent-bright: #0f1d4d !important; /* Borders (Gene 2026-07-10): "every box, every card, every line — DARK in light mode." The old light border was a pale grey (#b8c5d6) that vanished on white. Force a strong dark slate on every var(--border) surface. */ --border: #475569 !important; --border-strong: #334155 !important; --border-dim: #64748b !important; --cinti-border: #475569 !important; --card-border: #475569 !important; --line: #475569 !important; --divider: #475569 !important; /* Secondary / "dim" TEXT tokens (Gene 2026-07-13): the monitoring + many tables use var(--dim) — it was still resolving pale grey on white ("can't read"). Force all dim/secondary/muted text to a dark slate in light mode. HARD RULE: no light text in light mode. */ --dim: #33415c !important; --dim-2: #232e42 !important; --text-2: #1a2233 !important; --muted: #2a3344 !important; --cinti-text-secondary: #33415c !important; } /* Catch hardcoded PALE borders (inline + class) that don't use the token — any element whose inline style sets a near-white border colour gets the dark slate in light mode. Border-only; never touches text or fill. */ html[data-theme="light"] [style*="border"][style*="#e5e7eb" i], html[data-theme="light"] [style*="border"][style*="#e2e8f0" i], html[data-theme="light"] [style*="border"][style*="#eef2f7" i], html[data-theme="light"] [style*="border"][style*="#edeff3" i], html[data-theme="light"] [style*="border"][style*="#f1f5f9" i], html[data-theme="light"] [style*="border"][style*="#d1d5db" i], html[data-theme="light"] [style*="border"][style*="#dbe3ec" i]{ border-color:#475569 !important; } /* ── LIGHT-MODE HARD RULE (Gene 2026-07-10): entire CINTI OS, ALL portals — EVERY light/bright color → dark in light mode (text AND design). Catches inline + JS-computed colors via [style*="#hex"] substring selectors for `color` + SVG `fill`. color/fill-only + !important, never layout. Whole block is [data-theme="light"] → DARK MODE UNTOUCHED. ───────────────────── */ [data-theme="light"] [style*="#ff8a8a" i],[data-theme="light"] [style*="#ffb0b0" i], [data-theme="light"] [style*="#ff8a80" i],[data-theme="light"] [style*="#ff7878" i], [data-theme="light"] [style*="#ff6b6b" i],[data-theme="light"] [style*="#f85149" i], [data-theme="light"] [style*="#ec407a" i],[data-theme="light"] [style*="#e57373" i], [data-theme="light"] [style*="#f472b6" i],[data-theme="light"] [style*="#fb7185" i]{ color:#b01818 !important; fill:#b01818 !important; } [data-theme="light"] [style*="#ffb84d" i],[data-theme="light"] [style*="#ffb74d" i], [data-theme="light"] [style*="#f7dc6f" i],[data-theme="light"] [style*="#ffcb6b" i], [data-theme="light"] [style*="#ff9800" i],[data-theme="light"] [style*="#ffd7b0" i], [data-theme="light"] [style*="#f5a623" i],[data-theme="light"] [style*="#fbbf24" i], [data-theme="light"] [style*="#f59e0b" i]{ color:#8a5300 !important; fill:#8a5300 !important; } [data-theme="light"] [style*="#9be15d" i],[data-theme="light"] [style*="#c3e88d" i], [data-theme="light"] [style*="#4ade80" i],[data-theme="light"] [style*="#26a69a" i], [data-theme="light"] [style*="#00c853" i],[data-theme="light"] [style*="#7adfba" i], [data-theme="light"] [style*="#7ee2a8" i],[data-theme="light"] [style*="#5eead4" i], [data-theme="light"] [style*="#4ecdc4" i]{ color:#0a7a2f !important; fill:#0a7a2f !important; } [data-theme="light"] [style*="#26bdd6" i],[data-theme="light"] [style*="#3dd8f0" i], [data-theme="light"] [style*="#67e8f9" i],[data-theme="light"] [style*="#22d3ee" i], [data-theme="light"] [style*="#00e5ff" i],[data-theme="light"] [style*="#26c6da" i], [data-theme="light"] [style*="#5b9cf5" i],[data-theme="light"] [style*="#60a5fa" i], [data-theme="light"] [style*="#42a5f5" i],[data-theme="light"] [style*="#2bd4e0" i], [data-theme="light"] [style*="#38d6c4" i],[data-theme="light"] [style*="#2ee6d6" i]{ color:#1b2a63 !important; fill:#1b2a63 !important; } [data-theme="light"] [style*="#b388ff" i],[data-theme="light"] [style*="#c792ea" i], [data-theme="light"] [style*="#a78bfa" i],[data-theme="light"] [style*="#7a88ff" i], [data-theme="light"] [style*="#b478ff" i],[data-theme="light"] [style*="#8b5cf6" i]{ color:#4a2a80 !important; fill:#4a2a80 !important; } [data-theme="light"] [style*="#94a3b8" i],[data-theme="light"] [style*="#cbd5e1" i], [data-theme="light"] [style*="#8a92a3" i],[data-theme="light"] [style*="#8a9ab8" i], [data-theme="light"] [style*="#7a8699" i]{ color:#3a4458 !important; fill:#3a4458 !important; } /* Tell the browser's form controls + scrollbars to follow the theme */ html[data-theme] { color-scheme: var(--cinti-color-scheme); } /* Smooth transitions on theme flip — applied broadly so layout doesn't jar. Only color/bg/border properties — NOT layout properties (transitioning width/height etc. would cause unrelated animations). */ html[data-theme] body, html[data-theme] .panel, html[data-theme] .card, html[data-theme] button, html[data-theme] input, html[data-theme] select, html[data-theme] textarea, html[data-theme] .topbar, html[data-theme] .dock, html[data-theme] .taskbar { transition: background-color 240ms cubic-bezier(0.4, 0, 0.2, 1), color 240ms cubic-bezier(0.4, 0, 0.2, 1), border-color 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1); } /* --- Form controls in light mode ----------------------------------------- Native