/* Community Forum — shared design tokens (admin + front). Light + dark. */ :root{ --cf-accent:#03A9F4; --cf-accent-strong:#0288D1; --cf-accent-ink:#025b8a; --cf-accent-soft:rgba(3,169,244,.10); --cf-accent-line:rgba(3,169,244,.28); --cf-bg:#eef2f6; --cf-bg2:#e9eef4; --cf-surface:#ffffff; --cf-surface-2:#f5f8fb; --cf-surface-3:#eef3f8; --cf-border:#e2e8f0; --cf-border-strong:#cdd8e4; --cf-text:#142130; --cf-text-muted:#5c6b7c; --cf-text-faint:#93a2b2; --cf-gold:#e0920c; --cf-gold-soft:rgba(224,146,12,.12); --cf-green:#159a4e; --cf-green-soft:rgba(21,154,78,.12); --cf-red:#e0483f; --cf-red-soft:rgba(224,72,63,.10); --cf-violet:#7257e6; --cf-teal:#0f9e94; --cf-slate:#5b6b7c; --cf-shadow-sm:0 1px 2px rgba(16,32,50,.05); --cf-shadow:0 1px 2px rgba(16,32,50,.04), 0 10px 26px -14px rgba(16,32,50,.22); --cf-shadow-lg:0 24px 60px -18px rgba(16,32,50,.32); --cf-r-sm:8px; --cf-r:12px; --cf-r-lg:18px; --cf-font:"Roboto","Helvetica Neue",Arial,"Segoe UI",system-ui,sans-serif; } /* Dark mode is driven ONLY by an explicit data-theme on (set by the public forum shell + toggle). The admin never sets data-theme, so it always stays light and matches the Perfex back-office — independent of the OS setting or Theme Studio. (No @media prefers-color-scheme here: it would leak dark into the admin context.) */ :root[data-theme="light"]{ --cf-bg:#eef2f6; --cf-bg2:#e9eef4; --cf-surface:#ffffff; --cf-surface-2:#f5f8fb; --cf-surface-3:#eef3f8; --cf-border:#e2e8f0; --cf-border-strong:#cdd8e4; --cf-text:#142130; --cf-text-muted:#5c6b7c; --cf-text-faint:#93a2b2; --cf-accent:#03A9F4; --cf-accent-strong:#0288D1; --cf-accent-ink:#025b8a; --cf-accent-soft:rgba(3,169,244,.10); --cf-accent-line:rgba(3,169,244,.28); --cf-gold:#e0920c; --cf-green:#159a4e; --cf-red:#e0483f; --cf-shadow-sm:0 1px 2px rgba(16,32,50,.05); --cf-shadow:0 1px 2px rgba(16,32,50,.04), 0 10px 26px -14px rgba(16,32,50,.22); } :root[data-theme="dark"]{ --cf-bg:#0c131c; --cf-bg2:#0e1620; --cf-surface:#141d29; --cf-surface-2:#0f1822; --cf-surface-3:#1a2634; --cf-border:#233142; --cf-border-strong:#2e3f53; --cf-text:#e7eef5; --cf-text-muted:#91a1b3; --cf-text-faint:#63748a; --cf-accent:#29b6f6; --cf-accent-strong:#4fc3f7; --cf-accent-ink:#8fd6fa; --cf-accent-soft:rgba(41,182,246,.13); --cf-accent-line:rgba(41,182,246,.32); --cf-gold:#f0aa3c; --cf-green:#3ec574; --cf-red:#f0655c; --cf-shadow-sm:0 1px 2px rgba(0,0,0,.4); --cf-shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.7); }