/* ────────────────────────────────────────────────────────────────── * Content Hub — site-wide dark / light overrides * * Strategy: most pages use the same CSS-variable scheme (--bg, --bg2, * --bg3, --bdr, --txt, --txt2, --txt3, plus a handful of accent vars). * This file overrides those vars for the dark scheme so a single drop-in * makes every variable-driven page respond to the theme toggle. Pages * with hardcoded colour rules (not variable-driven) won't switch fully — * those need per-page CSS retrofit later. * * Apply paths: * 1. Explicit: → forced dark * 2. Explicit: → forced light (no override) * 3. Auto: no attribute + OS in dark → dark via @media fallback * * theme-init.js writes the attribute synchronously in before * styles load, so there's no flash on first paint. * ────────────────────────────────────────────────────────────────── */ /* ── Explicit dark ─────────────────────────────────────────────── */ :root[data-vfk-theme="dark"] { /* Surfaces / borders (covers index, planning, agents, learning, etc.) */ --bg: #0a0a12; --bg2: #12121e; --bg3: #16161f; --bg4: #1c1c28; --bdr: rgba(255,255,255,.10); /* Text */ --txt: #f0f0f5; --txt2: rgba(240,240,245,.75); --txt3: rgba(240,240,245,.55); /* Aliases used by some pages (users.html / progress-meeting / contentvault) */ --text: #f0f0f5; --text-2: rgba(240,240,245,.6); --text-3: rgba(240,240,245,.4); --surface: #16161f; --surface-2: #12121e; --line: rgba(255,255,255,.08); --bdr-2: rgba(255,255,255,.04); /* progress-meeting.html gray scale */ --gray50: #16161f; --gray100: #1a1a25; --gray200: #22222f; --gray300: #2a2a3a; /* Accent tweaks — the burgundy stays, soft variant gets tinted for dark bg */ --fire-soft: rgba(51,65,92,.22); --brandSoft: rgba(122,30,63,.18); --brandSoft2: rgba(122,30,63,.12); --greenSoft: rgba(5,150,105,.18); --redSoft: rgba(220,38,38,.18); /* Paper-like accents */ --paper: #1a1a25; /* contentvault.html "pretty" zone (lines 8848+) */ --ink: #f0f0f5; --body: #c8c8d0; --muted: rgba(240,240,245,.55); --muted2: rgba(240,240,245,.4); /* Shadows: weaker on dark surfaces, slightly stronger absolute alpha */ --shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.6); --shadow-lg: 0 4px 12px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.5); color-scheme: dark; } /* ── Auto: follow OS preference unless user has forced light ───── */ @media (prefers-color-scheme: dark) { :root:not([data-vfk-theme="light"]) { --bg: #0a0a12; --bg2: #12121e; --bg3: #16161f; --bg4: #1c1c28; --bdr: rgba(255,255,255,.10); --txt: #f0f0f5; --txt2: rgba(240,240,245,.75); --txt3: rgba(240,240,245,.55); --text: #f0f0f5; --text-2: rgba(240,240,245,.6); --text-3: rgba(240,240,245,.4); --surface: #16161f; --surface-2: #12121e; --line: rgba(255,255,255,.08); --bdr-2: rgba(255,255,255,.04); --gray50: #16161f; --gray100: #1a1a25; --gray200: #22222f; --gray300: #2a2a3a; --fire-soft: rgba(51,65,92,.22); --brandSoft: rgba(122,30,63,.18); --brandSoft2: rgba(122,30,63,.12); --greenSoft: rgba(5,150,105,.18); --redSoft: rgba(220,38,38,.18); --paper: #1a1a25; --ink: #f0f0f5; --body: #c8c8d0; --muted: rgba(240,240,245,.55); --muted2: rgba(240,240,245,.4); --shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.6); --shadow-lg: 0 4px 12px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.5); color-scheme: dark; } } /* ── Image / asset swap for dark mode ──────────────────────────── */ /* Logos with built-in light backgrounds get a subtle filter so they * blend on dark surfaces without us needing to swap to a dark-variant * SVG for every page. Pages that already supply a dark-variant asset * can opt out by adding .no-dark-invert to the . */ :root[data-vfk-theme="dark"] img[src*="logo_tagline-inverse-trademark"]:not(.no-dark-invert) { filter: invert(1) hue-rotate(180deg); } @media (prefers-color-scheme: dark) { :root:not([data-vfk-theme="light"]) img[src*="logo_tagline-inverse-trademark"]:not(.no-dark-invert) { filter: invert(1) hue-rotate(180deg); } } /* ── Form controls ─────────────────────────────────────────────── */ /* Native inputs / selects styled with --bg2 etc. inherit dark from the * variables above, but their text colour can lag on some browsers. * Force it for safety. */ :root[data-vfk-theme="dark"] input, :root[data-vfk-theme="dark"] select, :root[data-vfk-theme="dark"] textarea { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-vfk-theme="light"]) input, :root:not([data-vfk-theme="light"]) select, :root:not([data-vfk-theme="light"]) textarea { color-scheme: dark; } }