:root[data-subsite-theme] { --subsite-primary: #176b52; --subsite-accent: #e67b55; --subsite-bg: #f5f7f8; --subsite-surface: #fff; --subsite-soft: #f8faf9; --subsite-text: #16231f; --subsite-muted: #61716b; --subsite-line: #dfe7e3; }
:root[data-subsite-theme="noir"] { --subsite-primary: #d0a86a; --subsite-accent: #e78872; --subsite-bg: #111419; --subsite-surface: #1b1f25; --subsite-soft: #252b32; --subsite-text: #f5f2eb; --subsite-muted: #bec1c4; --subsite-line: #3d444d; }
:root[data-subsite-theme="pearl"] { --subsite-primary: #a75f4d; --subsite-accent: #d6a26b; --subsite-bg: #faf7f2; --subsite-surface: #fff; --subsite-soft: #f5ede6; --subsite-text: #30231e; --subsite-muted: #766963; --subsite-line: #eadbd0; }
:root[data-subsite-theme="ocean"] { --subsite-primary: #1682a2; --subsite-accent: #5ec9c0; --subsite-bg: #f2f8fa; --subsite-surface: #fff; --subsite-soft: #edf5f6; --subsite-text: #102d38; --subsite-muted: #58727a; --subsite-line: #d3e5e8; }
:root[data-subsite-theme="coral"] { --subsite-primary: #cf514f; --subsite-accent: #ef9a63; --subsite-bg: #fff7f3; --subsite-surface: #fff; --subsite-soft: #fff0e9; --subsite-text: #3c2023; --subsite-muted: #7b6260; --subsite-line: #f0d9d0; }
:root[data-subsite-theme="ink"] { --subsite-primary: #a84d3e; --subsite-accent: #c89955; --subsite-bg: #f7f6f1; --subsite-surface: #fff; --subsite-soft: #f0eee8; --subsite-text: #252522; --subsite-muted: #6c6b63; --subsite-line: #dfddd3; }
:root[data-subsite-color-scheme="dark"][data-subsite-theme="aurora"], :root[data-subsite-color-scheme="dark"][data-subsite-theme="pearl"], :root[data-subsite-color-scheme="dark"][data-subsite-theme="ocean"], :root[data-subsite-color-scheme="dark"][data-subsite-theme="coral"], :root[data-subsite-color-scheme="dark"][data-subsite-theme="ink"] { --subsite-bg: #121916; --subsite-surface: #1b2521; --subsite-soft: #24312c; --subsite-text: #f0f5f2; --subsite-muted: #b5c3bc; --subsite-line: #3b4c45; }
:root[data-subsite-color-scheme="dark"][data-subsite-theme="noir"] { --subsite-bg: #0d0f12; --subsite-surface: #171a1f; --subsite-soft: #232830; --subsite-text: #f6f1e8; --subsite-muted: #c4c4c1; --subsite-line: #3c4148; }
html[data-subsite-theme] body { --ws-bg: var(--subsite-bg); --ws-surface: var(--subsite-surface); --ws-surface-soft: var(--subsite-soft); --ws-text: var(--subsite-text); --ws-muted: var(--subsite-muted); --ws-line: var(--subsite-line); background: var(--subsite-bg); color: var(--subsite-text); }
html[data-subsite-theme] .workspace-sidebar, html[data-subsite-theme] .workspace-topbar, html[data-subsite-theme] .workspace-form-surface, html[data-subsite-theme] .workspace-section, html[data-subsite-theme] .workspace-view > .workspace-page-heading { border-color: var(--subsite-line); background: var(--subsite-surface); color: var(--subsite-text); }
html[data-subsite-theme] .workspace-sidebar a, html[data-subsite-theme] .workspace-nav-group > span, html[data-subsite-theme] .workspace-page-heading span, html[data-subsite-theme] .workspace-form-note, html[data-subsite-theme] .workspace-empty-state { color: var(--subsite-muted); }
html[data-subsite-theme] .workspace-nav a.is-active, html[data-subsite-theme] .workspace-nav a:hover { color: var(--subsite-primary); background: color-mix(in srgb, var(--subsite-primary) 12%, transparent); }
html[data-subsite-theme] .workspace-button.primary { border-color: var(--subsite-primary); background: var(--subsite-primary); }
html[data-subsite-theme] .workspace-button.primary:hover { background: color-mix(in srgb, var(--subsite-primary) 82%, #000); }
html[data-subsite-theme] .subsite-console-tabs, html[data-subsite-theme] .subsite-panel-card, html[data-subsite-theme] .subsite-hero-card { border-color: var(--subsite-line); background: var(--subsite-surface); color: var(--subsite-text); }
html[data-subsite-theme] .subsite-console-tabs button.is-active, html[data-subsite-theme] .subsite-console-tabs button:hover { border-color: var(--subsite-primary); background: var(--subsite-primary); }
html[data-subsite-theme] .subsite-metric-grid article, html[data-subsite-theme] .subsite-benefit-grid article, html[data-subsite-theme] .subsite-open-process li { border-color: var(--subsite-line); background: var(--subsite-soft); }
html[data-subsite-theme] .subsite-metric-grid strong, html[data-subsite-theme] .subsite-benefit-grid strong, html[data-subsite-theme] .subsite-open-process strong { color: var(--subsite-text); }
html[data-subsite-theme] .subsite-metric-grid small, html[data-subsite-theme] .subsite-benefit-grid small, html[data-subsite-theme] .subsite-open-process small { color: var(--subsite-muted); }