/* ============================================================================= 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; /* (2026-09-07) --panel-border-strong was never defined in EITHER theme, so every `var(--panel-border-strong,#24304d)` in the portal modules resolved to its DARK navy fallback on white. Defined here, light-only, so dark mode keeps resolving the per-call-site fallback exactly as before. */ --panel-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; /* WARNING/CAUTION TEXT (Gene 2026-09-14): "light yellow is surely a very bad color ... i see this in entire cinti os". 275 hardcoded pale yellows were used as TEXT across the portals and admin — #f4e6b0 on the Forms "public forms are switched off" banner was the one that prompted it. Every one of them was chosen against the dark product and lands at 2-3:1 on white. DEFINED LIGHT-ONLY, ON PURPOSE. Call sites read `var(--warn-text, #f7dc6f)` — keeping each site's ORIGINAL hex as the fallback — so dark mode still resolves its own per-site colour and is unchanged, while light mode collapses them to one readable amber. Defining this on bare :root would silently repaint all 16 distinct yellows in dark mode too. That is exactly how --panel-border-strong went wrong (see the note above): a token that exists in only one place changes what every fallback resolves to. 7.0:1 on white. */ --warn-text: #7a4d00 !important; /* Same treatment, same reasoning, for the other two STATUS text colours (2026-09-14, second pass). Danger red #f44336 is 3.68:1 on white and success green #4caf50 is 2.78:1 — both chosen against the dark product. 602 red and 242 green call sites. Again LIGHT-ONLY with the call site's own hex as the fallback, so dark mode is untouched. NOT swept, and they must not be: any rule that sets a SOLID background on the same declaration. `color:#fff` on a dark button, or white-on-red badges, are CORRECT — the text has its own ground and contrast-vs-white is meaningless there. 22 such sites were skipped by exactly that test. */ --bad-text: #a01b10 !important; /* 7.90:1 on white */ --ok-text: #1b5e20 !important; /* 7.87:1 on white */ /* Third pass (2026-09-14). Secondary/muted text and hardcoded ACCENT text. 218 greys (#888, #aaa, #e8ecf3 …) and 611 accent-coloured (#4ecdc4 cyan, #b388ff purple, #4dabf7 blue …) used as TEXT, all under 4.5:1 on white. Same light-only shape: the call site keeps its own hex as the fallback so dark mode is untouched. These mirror the values --dim and --accent already take in light mode, but they are SEPARATE tokens on purpose: --dim and --accent are defined in dark too, so `var(--dim, #888)` would resolve to the DARK --dim rather than to #888 and would silently repaint dark mode. A fallback only works as a fallback when the token genuinely does not exist in the other theme. */ --dim-text: #33415c !important; /* 10.24:1 on white */ --accent-text: #1b2a63 !important; /* 13.48:1 on white */ } /* 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; } /* Catch hardcoded DARK panel/input BACKGROUNDS set inline by portal modules that predate the token pass (#18233f input wells, #0f1524 modals). Without this they stay near-black boxes on a white page. Background only — never text, never layout. (2026-09-07) */ html[data-theme="light"] [style*="background"][style*="#18233f" i], html[data-theme="light"] [style*="background"][style*="#0f1524" i]{ background-color:#ffffff !important; } /* NOT #0a0e1a. That is the page's own base colour, so an element painted with it inline is usually saying "this is deliberately the dark product" — the Forms builder's live preview mocks the PUBLISHED public form, which really is #0a0e1a, and whitening its ground left dark-mode text on white at 1.18:1. Caught by measuring the builder after adding the rule. (2026-09-07) */ /* ── 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],[data-theme="light"] [style*="#4caf50" i], [data-theme="light"] [style*="#2ecc71" i],[data-theme="light"] [style*="#22c55e" i], [data-theme="light"] [style*="#66bb6a" i],[data-theme="light"] [style*="#81c784" 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],[data-theme="light"] [style*="#8b93a7" i], [data-theme="light"] [style*="#6f7688" i],[data-theme="light"] [style*="#a0a8b8" i], [data-theme="light"] [style*="#8f97a8" i],[data-theme="light"] [style*="#6b7285" i], [data-theme="light"] [style*="#8b93a6" i]{ color:#3a4458 !important; fill:#3a4458 !important; } /* ...EXCEPT where the hex is the element's own BACKGROUND. The catches above are substring matches on the whole style attribute, so they cannot tell `color:#26bdd6` from `background:var(--accent,#26bdd6)` — and a filled accent button written the second way had its INK forced to the same navy as its fill: 1:1, invisible text, on "+ Add a secret", "+ Build a custom integration" and "Import OpenAPI". It had been hidden by a token cycle. `--accent: var(--cinti-accent)` and portal-shell's inline `--cinti-accent: var(--accent, #26bdd6)` referenced each other, so --accent computed to nothing, the background declaration was invalid at computed-value time (a var() fallback does NOT rescue a guaranteed-invalid reference) and the button rendered transparent with dark text. Fixing the cycle gave it a real navy fill and exposed this. These selectors are one specificity step above the catches (an element name plus the two attribute matches), so they win, and they only ever apply to an element that inline-set its background to the accent. Light only. (2026-09-08) */ html[data-theme="light"] [style*="background:var(--accent"], html[data-theme="light"] [style*="background: var(--accent"], html[data-theme="light"] [style*="background-color:var(--accent"], html[data-theme="light"] [style*="background-color: var(--accent"]{ color:#ffffff !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