/* =========================================================================== JarvisMind — Wynxx DARK theme --------------------------------------------------------------------------- Companion to style.css (the Wynxx LIGHT theme). Load this AFTER style.css. Derived from the LIVE site CSS (new_style/extracted.css) `.dark` block: near-black canvas (#0a0a0a), neutral-800 panels, indigo primary (#1e3ac9, lightened to ~#6172e8 where the token is used as link/active TEXT so it stays legible on dark). It re-declares ONLY the :root tokens — every component in style.css is driven through var(--token), so this re-themes the whole UI. Activation (any of): • — explicit opt-in • — scoped opt-in • OS prefers-color-scheme: dark — automatic, UNLESS the user forced light. The two token blocks below are intentionally identical; keep them in sync. =========================================================================== */ /* --- Explicit opt-in: data-theme="dark" or .theme-dark ------------------- */ :root[data-theme="dark"], .theme-dark { color-scheme: dark; /* --- Palette (Wynxx dark — indigo on near-black neutral) --- */ --bg: #0a0a0a; /* near-black canvas (live --background) */ --panel: #171717; /* neutral-800 cards/header/sidebar */ --border: rgba(255,255,255,0.10); --input: rgba(255,255,255,0.15); /* design-tokens dark --input */ --divider: var(--border); /* design-tokens dark --border */ --text: #fafafa; --muted: #a1a1a1; /* zinc-400 */ --sidebar-fg: #fafafa; /* side-panel nav text + icons (design-system --sidebar-foreground, dark) */ --sidebar-accent: #262626; /* selected side-panel item bg (design-system --sidebar-accent, oklch 26.9%) */ --accent: #5b8bf0; /* UI accent — blue, lightened for legible link/active text on dark; brand mark stays indigo */ --primary: #1e3ac9; /* SOLID button fill — blue-600 (matches --accent) */ --primary-hover: #1d38a3; /* solid button hover — blue-700 */ --accent2: #eab308; /* amber — pending / awaiting human */ --green: #22c55e; --red: #ff6467; /* design-tokens dark --destructive (oklch 70.4% 0.191 22.216) */ --purple: var(--accent); --cyan: var(--accent); --secondary: #262626; /* flat neutral surface (buttons) */ --code-bg: #171717; --code-string: #fbbf24; /* --- RGB channels --- */ --accent-rgb: 91,139,240; --accent2-rgb: 234,179,8; --green-rgb: 34,197,94; --red-rgb: 255,100,103; --muted-rgb: 161,161,161; --purple-rgb: 192,132,252; --cyan-rgb: 34,211,238; --neutral-rgb: 161,161,161; --sw-yellow-rgb: 227,196,94; --sw-orange-rgb: 224,154,94; /* --- Surface alpha layers (white-on-dark elevations) --- */ --surface-1: rgba(255,255,255,0.02); --surface-2: rgba(255,255,255,0.03); --surface-3: rgba(255,255,255,0.05); --surface-4: rgba(255,255,255,0.08); /* --- Overlays & shadows --- */ --overlay: rgba(0,0,0,0.62); --shadow-modal: 0 8px 32px rgba(0,0,0,0.55); --code-overlay: rgba(0,0,0,0.30); --shadow-sm: 0 1px 3px rgba(0,0,0,0.50); /* design-tokens --shadow-sm (cards/panels) */ --shadow-header: 0 1px 3px rgba(0,0,0,0.50); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.50), 0 2px 4px -2px rgba(0,0,0,0.50); /* live --shadow-md (primary button) */ --shadow-pop: 0 8px 24px rgba(0,0,0,0.45); /* --- Brand treatments --- */ --header-bg: var(--bg); /* dark header = the page background (near-black) */ --brand-gradient: linear-gradient(90deg, #6172e8 0%, #2f47e6 100%); --on-accent: #f9fafb; --tick-warn: #c79a3a; --tick-error: #cf6b63; --brand-server-color: #fff; /* white server label on the dark header */ --logo-color: #ffffff; /* Wynxx wordmark letterforms (inline SVG) — live --logo-color, dark */ /* --- Diagram containers (dark-tuned) — see style.css for the light values and the rationale. A container goes dark on the near-black canvas; the solid leaf chips inside (indigo/amber/green) still read against it. --- */ --dg-cli-bg: #12172a; --dg-cli-stroke: #3b4a86; --dg-cli-label: #a5b4fc; --dg-wrap-bg: #1f1a0e; --dg-wrap-stroke: #5c4a1e; --dg-wrap-label: #e2b877; /* --- Swatch palette (type colour picker) — dark-tuned (soft pastels) --- */ --sw-red: #e08583; --sw-orange: #e09a5e; --sw-amber: #e0b15a; --sw-yellow: #e3c45e; --sw-lime: #b3cf73; --sw-green: #7fc88a; --sw-emerald: #6cc4a3; --sw-teal: #5fc0b6; --sw-cyan: #6bbccb; --sw-sky: #6fb0d6; --sw-blue: #7aa6e0; --sw-indigo: #8b94d8; --sw-violet: #a394d8; --sw-purple: #b18fd0; --sw-fuchsia: #cf8fd0; --sw-pink: #db8fb0; --sw-rose: #db8f99; --sw-slate: #94a3b8; } /* --- Automatic: OS dark preference, unless the user forced light ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg: #0a0a0a; --panel: #171717; --border: rgba(255,255,255,0.10); --input: rgba(255,255,255,0.15); /* design-tokens dark --input */ --divider: var(--border); /* design-tokens dark --border */ --text: #fafafa; --muted: #a1a1a1; --sidebar-fg: #fafafa; /* side-panel nav text + icons (design-system --sidebar-foreground, dark) */ --sidebar-accent: #262626; /* selected side-panel item bg (design-system --sidebar-accent, oklch 26.9%) */ --accent: #5b8bf0; --primary: #1e3ac9; --primary-hover: #1d38a3; --accent2: #eab308; --green: #22c55e; --red: #ff6467; /* design-tokens dark --destructive (oklch 70.4% 0.191 22.216) */ --purple: var(--accent); --cyan: var(--accent); --secondary: #262626; /* flat neutral surface (buttons) */ --code-bg: #171717; --code-string: #fbbf24; --accent-rgb: 91,139,240; --accent2-rgb: 234,179,8; --green-rgb: 34,197,94; --red-rgb: 255,100,103; --muted-rgb: 161,161,161; --purple-rgb: 192,132,252; --cyan-rgb: 34,211,238; --neutral-rgb: 161,161,161; --sw-yellow-rgb: 227,196,94; --sw-orange-rgb: 224,154,94; --surface-1: rgba(255,255,255,0.02); --surface-2: rgba(255,255,255,0.03); --surface-3: rgba(255,255,255,0.05); --surface-4: rgba(255,255,255,0.08); --overlay: rgba(0,0,0,0.62); --shadow-modal: 0 8px 32px rgba(0,0,0,0.55); --code-overlay: rgba(0,0,0,0.30); --shadow-sm: 0 1px 3px rgba(0,0,0,0.50); /* design-tokens --shadow-sm (cards/panels) */ --shadow-header: 0 1px 3px rgba(0,0,0,0.50); --shadow-pop: 0 8px 24px rgba(0,0,0,0.45); --header-bg: var(--bg); /* dark header = the page background (near-black) */ --brand-gradient: linear-gradient(90deg, #6172e8 0%, #2f47e6 100%); --on-accent: #f9fafb; --tick-warn: #c79a3a; --tick-error: #cf6b63; --brand-server-color: #fff; /* white server label on the dark header */ --logo-color: #ffffff; /* Wynxx wordmark letterforms (inline SVG) — live --logo-color, dark */ /* --- Diagram containers (dark-tuned) — mirror the explicit-opt-in block above. --- */ --dg-cli-bg: #12172a; --dg-cli-stroke: #3b4a86; --dg-cli-label: #a5b4fc; --dg-wrap-bg: #1f1a0e; --dg-wrap-stroke: #5c4a1e; --dg-wrap-label: #e2b877; --sw-red: #e08583; --sw-orange: #e09a5e; --sw-amber: #e0b15a; --sw-yellow: #e3c45e; --sw-lime: #b3cf73; --sw-green: #7fc88a; --sw-emerald: #6cc4a3; --sw-teal: #5fc0b6; --sw-cyan: #6bbccb; --sw-sky: #6fb0d6; --sw-blue: #7aa6e0; --sw-indigo: #8b94d8; --sw-violet: #a394d8; --sw-purple: #b18fd0; --sw-fuchsia: #cf8fd0; --sw-pink: #db8fb0; --sw-rose: #db8f99; --sw-slate: #94a3b8; } } /* The portal footer uses var(--panel) + var(--border) (see style.css), so it auto-themes to the dark side-panel surface with no override needed. The GFT logo is now a PNG (fixed dark colours), which a token can't recolour — so invert it to WHITE on the dark panel. Covers explicit opt-in (data-theme="dark" / .theme-dark) AND OS-dark (unless the user forced light). */ :root[data-theme="dark"] .portal-footer-logo img, .theme-dark .portal-footer-logo img { filter: brightness(0) invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portal-footer-logo img { filter: brightness(0) invert(1); } } /* Release-stage pills — brighter TEXT hues on the dark canvas (the rgba tint bg/border in style.css carry over unchanged). Covers explicit dark opt-in AND OS-dark unless the user forced light. */ :root[data-theme="dark"] .stage-pill.stage-poc, .theme-dark .stage-pill.stage-poc { color: #f87171; } :root[data-theme="dark"] .stage-pill.stage-alpha, .theme-dark .stage-pill.stage-alpha { color: #fcd34d; } :root[data-theme="dark"] .stage-pill.stage-beta, .theme-dark .stage-pill.stage-beta { color: #4ade80; } :root[data-theme="dark"] .stage-pill.stage-rc, .theme-dark .stage-pill.stage-rc { color: #93c5fd; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage-pill.stage-poc { color: #f87171; } :root:not([data-theme="light"]) .stage-pill.stage-alpha { color: #fcd34d; } :root:not([data-theme="light"]) .stage-pill.stage-beta { color: #4ade80; } :root:not([data-theme="light"]) .stage-pill.stage-rc { color: #93c5fd; } }