:root,
:root[data-theme="breeze"] {
    --theme-name: "breeze-blue";
    color-scheme: light;
    --theme-page: #e8f2fb;
    --theme-page-2: #d8e8f6;
    --theme-page-3: #c9ddeb;
    --theme-surface-base: #f8fcff;
    --theme-surface-raised: #edf6fc;
    --theme-surface-inset: #e1edf7;
    --theme-border-base: #7fa3bf;
    --theme-border-emphasis: #3e779f;
    --theme-text-primary: #0d2538;
    --theme-text-secondary: #24445c;
    --theme-text-muted: #3c617a;
    --theme-accent-primary: #0a74c4;
    --theme-accent-secondary: #1685b7;
    --theme-success-strong: #227447;
    --theme-warning-strong: #83520e;
    --theme-danger-strong: #9b2f3a;
    --theme-code-bg: #0e2138;
    --theme-code-text: #e6f3ff;
    --theme-shadow-card: 0 12px 30px rgba(19, 58, 92, 0.16);
    --theme-bg-page: var(--theme-page);
    --theme-bg-page-2: var(--theme-page-2);
    --theme-bg-page-3: var(--theme-page-3);
    --theme-surface: var(--theme-surface-base);
    --theme-surface-2: var(--theme-surface-raised);
    --theme-surface-soft: var(--theme-surface-inset);
    --theme-border: var(--theme-border-base);
    --theme-border-strong: var(--theme-border-emphasis);
    --theme-text: var(--theme-text-primary);
    --theme-text-soft: var(--theme-text-secondary);
    --theme-muted: var(--theme-text-muted);
    --theme-accent: var(--theme-accent-primary);
    --theme-accent-2: var(--theme-accent-secondary);
    --theme-success: var(--theme-success-strong);
    --theme-warning: var(--theme-warning-strong);
    --theme-danger: var(--theme-danger-strong);
    --theme-scroll-track: #d1e3f1;
    --theme-scroll-thumb: #5f89aa;
}

:root {
    --theme-name: "lab-light";
    color-scheme: light;
    --theme-page: #eef5fb;
    --theme-page-2: #e2edf7;
    --theme-page-3: #d5e4f1;
    --theme-surface-base: #fbfdff;
    --theme-surface-raised: #f3f8fc;
    --theme-surface-inset: #e9f1f8;
    --theme-border-base: #8ca8bd;
    --theme-border-emphasis: #4f7fa5;
    --theme-text-primary: #102538;
    --theme-text-secondary: #263f55;
    --theme-text-muted: #405a70;
    --theme-accent-primary: #0b6fae;
    --theme-accent-secondary: #147fae;
    --theme-success-strong: #23784f;
    --theme-warning-strong: #8a5a12;
    --theme-danger-strong: #9d303d;
    --theme-code-bg: #102033;
    --theme-code-text: #e7f2ff;
    --theme-shadow-card: 0 12px 30px rgba(25, 63, 91, 0.14);
    --theme-bg-page: var(--theme-page);
    --theme-bg-page-2: var(--theme-page-2);
    --theme-bg-page-3: var(--theme-page-3);
    --theme-surface: var(--theme-surface-base);
    --theme-surface-2: var(--theme-surface-raised);
    --theme-surface-soft: var(--theme-surface-inset);
    --theme-border: var(--theme-border-base);
    --theme-border-strong: var(--theme-border-emphasis);
    --theme-text: var(--theme-text-primary);
    --theme-text-soft: var(--theme-text-secondary);
    --theme-muted: var(--theme-text-muted);
    --theme-accent: var(--theme-accent-primary);
    --theme-accent-2: var(--theme-accent-secondary);
    --theme-success: var(--theme-success-strong);
    --theme-warning: var(--theme-warning-strong);
    --theme-danger: var(--theme-danger-strong);
    --theme-scroll-track: #d9e7f1;
    --theme-scroll-thumb: #6f93ad;
}

:root[data-theme="skyline"] {
    --theme-name: "skyline-blue";
    color-scheme: light;
    --theme-page: #edf7ff;
    --theme-page-2: #dff0fb;
    --theme-page-3: #d0e6f5;
    --theme-surface-base: #fbfeff;
    --theme-surface-raised: #f1f9fe;
    --theme-surface-inset: #e6f2fa;
    --theme-border-base: #84a9c2;
    --theme-border-emphasis: #477fa5;
    --theme-text-primary: #0e273a;
    --theme-text-secondary: #28475e;
    --theme-text-muted: #42657d;
    --theme-accent-primary: #096fb7;
    --theme-accent-secondary: #1180a9;
    --theme-success-strong: #247344;
    --theme-warning-strong: #815410;
    --theme-danger-strong: #9a303b;
    --theme-code-bg: #0d2236;
    --theme-code-text: #e8f5ff;
    --theme-shadow-card: 0 12px 30px rgba(17, 62, 96, 0.14);
    --theme-bg-page: var(--theme-page);
    --theme-bg-page-2: var(--theme-page-2);
    --theme-bg-page-3: var(--theme-page-3);
    --theme-surface: var(--theme-surface-base);
    --theme-surface-2: var(--theme-surface-raised);
    --theme-surface-soft: var(--theme-surface-inset);
    --theme-border: var(--theme-border-base);
    --theme-border-strong: var(--theme-border-emphasis);
    --theme-text: var(--theme-text-primary);
    --theme-text-soft: var(--theme-text-secondary);
    --theme-muted: var(--theme-text-muted);
    --theme-accent: var(--theme-accent-primary);
    --theme-accent-2: var(--theme-accent-secondary);
    --theme-success: var(--theme-success-strong);
    --theme-warning: var(--theme-warning-strong);
    --theme-danger: var(--theme-danger-strong);
    --theme-scroll-track: #d8e9f4;
    --theme-scroll-thumb: #638eaa;
}

:root[data-theme="graphite"] {
    --theme-name: "graphite-gray";
    color-scheme: light;
    --theme-page: #f1f4f7;
    --theme-page-2: #e3e9ef;
    --theme-page-3: #d7e0e8;
    --theme-surface-base: #fcfdff;
    --theme-surface-raised: #f4f7fa;
    --theme-surface-inset: #e9eef3;
    --theme-border-base: #929fab;
    --theme-border-emphasis: #5d6f80;
    --theme-text-primary: #172431;
    --theme-text-secondary: #334454;
    --theme-text-muted: #4d5f70;
    --theme-accent-primary: #426f9f;
    --theme-accent-secondary: #587e9f;
    --theme-success-strong: #2c734b;
    --theme-warning-strong: #7d5613;
    --theme-danger-strong: #94343d;
    --theme-code-bg: #172231;
    --theme-code-text: #edf4fb;
    --theme-shadow-card: 0 12px 30px rgba(40, 55, 70, 0.14);
    --theme-bg-page: var(--theme-page);
    --theme-bg-page-2: var(--theme-page-2);
    --theme-bg-page-3: var(--theme-page-3);
    --theme-surface: var(--theme-surface-base);
    --theme-surface-2: var(--theme-surface-raised);
    --theme-surface-soft: var(--theme-surface-inset);
    --theme-border: var(--theme-border-base);
    --theme-border-strong: var(--theme-border-emphasis);
    --theme-text: var(--theme-text-primary);
    --theme-text-soft: var(--theme-text-secondary);
    --theme-muted: var(--theme-text-muted);
    --theme-accent: var(--theme-accent-primary);
    --theme-accent-2: var(--theme-accent-secondary);
    --theme-success: var(--theme-success-strong);
    --theme-warning: var(--theme-warning-strong);
    --theme-danger: var(--theme-danger-strong);
    --theme-scroll-track: #dfe6ec;
    --theme-scroll-thumb: #778899;
}

:root[data-theme="aurora"] {
    --theme-name: "aurora-teal";
    color-scheme: light;
    --theme-page: #eaf7f5;
    --theme-page-2: #dcefeb;
    --theme-page-3: #cfe5e1;
    --theme-surface-base: #fbfffe;
    --theme-surface-raised: #eff9f7;
    --theme-surface-inset: #e2f1ef;
    --theme-border-base: #7cafaa;
    --theme-border-emphasis: #3b827c;
    --theme-text-primary: #0f2b2f;
    --theme-text-secondary: #284d51;
    --theme-text-muted: #426b6f;
    --theme-accent-primary: #087f7b;
    --theme-accent-secondary: #188e9a;
    --theme-success-strong: #237849;
    --theme-warning-strong: #805711;
    --theme-danger-strong: #96323d;
    --theme-code-bg: #0f2830;
    --theme-code-text: #e7fbfb;
    --theme-shadow-card: 0 12px 30px rgba(23, 80, 82, 0.14);
    --theme-bg-page: var(--theme-page);
    --theme-bg-page-2: var(--theme-page-2);
    --theme-bg-page-3: var(--theme-page-3);
    --theme-surface: var(--theme-surface-base);
    --theme-surface-2: var(--theme-surface-raised);
    --theme-surface-soft: var(--theme-surface-inset);
    --theme-border: var(--theme-border-base);
    --theme-border-strong: var(--theme-border-emphasis);
    --theme-text: var(--theme-text-primary);
    --theme-text-soft: var(--theme-text-secondary);
    --theme-muted: var(--theme-text-muted);
    --theme-accent: var(--theme-accent-primary);
    --theme-accent-2: var(--theme-accent-secondary);
    --theme-success: var(--theme-success-strong);
    --theme-warning: var(--theme-warning-strong);
    --theme-danger: var(--theme-danger-strong);
    --theme-scroll-track: #d5e9e6;
    --theme-scroll-thumb: #5f918d;
}

:root[data-theme="sunset"] {
    --theme-name: "sunset-amber";
    color-scheme: light;
    --theme-page: #fbf1e8;
    --theme-page-2: #f3e3d4;
    --theme-page-3: #ead6c4;
    --theme-surface-base: #fffdfb;
    --theme-surface-raised: #fbf5ef;
    --theme-surface-inset: #f3e8dc;
    --theme-border-base: #bd9b7e;
    --theme-border-emphasis: #8b674a;
    --theme-text-primary: #332315;
    --theme-text-secondary: #58402c;
    --theme-text-muted: #735b45;
    --theme-accent-primary: #a45918;
    --theme-accent-secondary: #9a6a19;
    --theme-success-strong: #2d7649;
    --theme-warning-strong: #805411;
    --theme-danger-strong: #96313c;
    --theme-code-bg: #2b2118;
    --theme-code-text: #fff3e7;
    --theme-shadow-card: 0 12px 30px rgba(101, 68, 38, 0.14);
    --theme-bg-page: var(--theme-page);
    --theme-bg-page-2: var(--theme-page-2);
    --theme-bg-page-3: var(--theme-page-3);
    --theme-surface: var(--theme-surface-base);
    --theme-surface-2: var(--theme-surface-raised);
    --theme-surface-soft: var(--theme-surface-inset);
    --theme-border: var(--theme-border-base);
    --theme-border-strong: var(--theme-border-emphasis);
    --theme-text: var(--theme-text-primary);
    --theme-text-soft: var(--theme-text-secondary);
    --theme-muted: var(--theme-text-muted);
    --theme-accent: var(--theme-accent-primary);
    --theme-accent-2: var(--theme-accent-secondary);
    --theme-success: var(--theme-success-strong);
    --theme-warning: var(--theme-warning-strong);
    --theme-danger: var(--theme-danger-strong);
    --theme-scroll-track: #ecdccb;
    --theme-scroll-thumb: #a98467;
}

:root {
    --ws-shell-top-bg: color-mix(in srgb, var(--theme-surface-soft) 90%, #000000 10%);
    --ws-shell-top-border: var(--theme-border);
    --ws-shell-bottom-bg: color-mix(in srgb, var(--theme-surface-2) 85%, var(--theme-accent) 15%);
    --ws-shell-border-muted: var(--theme-border);
    --ws-shell-text: var(--theme-text);
    --ws-shell-text-muted: var(--theme-muted);

    --ws-app-bg-dark: var(--theme-bg-page);
    --ws-app-bg-sidebar: var(--theme-surface-soft);
    --ws-app-bg-header: var(--theme-surface-2);
    --ws-app-border: var(--theme-border);
    --ws-app-accent: var(--theme-accent);
    --ws-app-text: var(--theme-text-soft);
    --ws-app-hover: color-mix(in srgb, var(--theme-surface-2) 84%, #ffffff 16%);
    --ws-app-selected: color-mix(in srgb, var(--theme-surface-2) 72%, var(--theme-accent) 28%);
    --ws-app-input: color-mix(in srgb, var(--theme-surface-soft) 78%, #ffffff 22%);
    --ws-app-focus: var(--theme-accent);
}

html,
body {
    color: var(--theme-text);
    background: var(--theme-bg-page);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-scroll-thumb) var(--theme-scroll-track);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--theme-scroll-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--theme-scroll-thumb);
    border-radius: 7px;
    border: 2px solid var(--theme-scroll-track);
}

::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--theme-scroll-thumb) 85%, #ffffff 15%);
}

:root {
    --font-ui: "Noto Sans SC", "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    --font-code: "JetBrains Mono", Consolas, "Cascadia Mono", "Courier New", monospace;
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 220ms;
    --motion-ease-out: cubic-bezier(.2, .8, .2, 1);
    --motion-ease-emphatic: cubic-bezier(.16, 1, .3, 1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --surface-canvas: var(--theme-bg-page);
    --surface-glass: color-mix(in srgb, var(--theme-surface) 78%, transparent);
    --surface-glass-strong: color-mix(in srgb, var(--theme-surface-2) 88%, transparent);
    --surface-glass-muted: color-mix(in srgb, var(--theme-surface-soft) 82%, transparent);
    --surface-inset: color-mix(in srgb, var(--theme-surface-soft) 82%, var(--theme-bg-page) 18%);
    --surface-code: color-mix(in srgb, var(--theme-bg-page) 78%, #000000 22%);
    --surface-code-2: color-mix(in srgb, var(--theme-bg-page-2) 74%, #000000 26%);
    --elevation-1: 0 8px 22px rgba(0, 0, 0, 0.18);
    --elevation-2: 0 18px 46px rgba(0, 0, 0, 0.22);
    --elevation-3: 0 28px 78px rgba(0, 0, 0, 0.28);
    --elevation-focus: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 26%, transparent);
    --glass-border: color-mix(in srgb, var(--theme-border) 72%, transparent);
    --glass-highlight: color-mix(in srgb, #ffffff 46%, transparent);
    --glass-shadow-inset: inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);

    --identity-explorer: #d6a642;
    --identity-editor: #6679e7;
    --identity-docker: #248bd2;
    --identity-ai: #28a99a;
    --identity-collab: #45a86f;
    --identity-share: #db7d79;
    --identity-settings: #7b8798;

    --file-folder: var(--identity-explorer);
    --file-code: var(--identity-editor);
    --file-doc: #4e8fd4;
    --file-image: #44a886;
    --file-archive: #be8450;
    --file-config: #8b79d9;
    --file-log: #77869a;
    --file-docker: var(--identity-docker);
}

:root[data-theme="glasswave"] {
    --theme-name: "lab-light";
    color-scheme: light;
    --theme-page: #eef5fb;
    --theme-page-2: #e2edf7;
    --theme-page-3: #d5e4f1;
    --theme-surface-base: #fbfdff;
    --theme-surface-raised: #f3f8fc;
    --theme-surface-inset: #e9f1f8;
    --theme-border-base: #8ca8bd;
    --theme-border-emphasis: #4f7fa5;
    --theme-text-primary: #102538;
    --theme-text-secondary: #263f55;
    --theme-text-muted: #405a70;
    --theme-accent-primary: #0b6fae;
    --theme-accent-secondary: #147fae;
    --theme-success-strong: #23784f;
    --theme-warning-strong: #8a5a12;
    --theme-danger-strong: #9d303d;
    --theme-code-bg: #102033;
    --theme-code-text: #e7f2ff;
    --theme-shadow-card: 0 12px 30px rgba(25, 63, 91, 0.14);
    --theme-bg-page: var(--theme-page);
    --theme-bg-page-2: var(--theme-page-2);
    --theme-bg-page-3: var(--theme-page-3);
    --theme-surface: var(--theme-surface-base);
    --theme-surface-2: var(--theme-surface-raised);
    --theme-surface-soft: var(--theme-surface-inset);
    --theme-border: var(--theme-border-base);
    --theme-border-strong: var(--theme-border-emphasis);
    --theme-text: var(--theme-text-primary);
    --theme-text-soft: var(--theme-text-secondary);
    --theme-muted: var(--theme-text-muted);
    --theme-accent: var(--theme-accent-primary);
    --theme-accent-2: var(--theme-accent-secondary);
    --theme-success: var(--theme-success-strong);
    --theme-warning: var(--theme-warning-strong);
    --theme-danger: var(--theme-danger-strong);
    --theme-scroll-track: #d9e7f1;
    --theme-scroll-thumb: #6f93ad;

    --surface-canvas: var(--theme-page);
    --surface-glass: rgba(255, 255, 255, 0.88);
    --surface-glass-strong: rgba(255, 255, 255, 0.96);
    --surface-glass-muted: rgba(240, 247, 252, 0.94);
    --surface-inset: #dceaf4;
    --surface-code: var(--theme-code-bg);
    --surface-code-2: #14283d;
    --elevation-1: 0 8px 18px rgba(26, 62, 90, 0.12);
    --elevation-2: 0 16px 36px rgba(26, 62, 90, 0.16);
    --elevation-3: var(--theme-shadow-card);
    --elevation-focus: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 30%, transparent);
    --glass-border: rgba(102, 139, 165, 0.62);
    --glass-highlight: rgba(255, 255, 255, 0.88);
    --glass-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.86);

    --identity-explorer: #d6a642;
    --identity-editor: #6679e7;
    --identity-docker: #248bd2;
    --identity-ai: #28a99a;
    --identity-collab: #45a86f;
    --identity-share: #db7d79;
    --identity-settings: #6a7890;

    --file-folder: #d6a642;
    --file-code: #697be8;
    --file-doc: #4e8fd4;
    --file-image: #44a886;
    --file-archive: #be8450;
    --file-config: #8b79d9;
    --file-log: #65758c;
    --file-docker: #248bd2;
}

html,
body {
    font-family: var(--font-ui);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:root {
    --theme-accent-soft: color-mix(in srgb, var(--theme-accent) 11%, var(--theme-surface));
    --theme-success-soft: color-mix(in srgb, var(--theme-success) 10%, var(--theme-surface));
    --theme-warning-soft: color-mix(in srgb, var(--theme-warning) 11%, var(--theme-surface));
    --theme-danger-soft: color-mix(in srgb, var(--theme-danger) 10%, var(--theme-surface));
}

::selection {
    color: var(--theme-text);
    background: color-mix(in srgb, var(--theme-accent) 24%, transparent);
}

:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: 2px;
}

:where(input, select, textarea) {
    accent-color: var(--theme-accent);
}

:where(button, input, select, textarea):disabled {
    cursor: not-allowed;
}

:where([id]):target {
    scroll-margin-top: calc(var(--ws-shell-top-height, 0px) + 12px);
}

[hidden] {
    display: none !important;
}

code,
pre,
kbd,
samp,
textarea.editor-text,
.docker-log,
.terminal,
.xterm,
.font-monospace {
    font-family: var(--font-code) !important;
}

:root[data-performance-effective="ultra"] {
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --motion-slow: 320ms;
}

:root[data-performance-effective="high"] {
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 240ms;
}

:root[data-performance-effective="medium"] {
    --motion-fast: 100ms;
    --motion-base: 150ms;
    --motion-slow: 200ms;
    --elevation-1: 0 6px 16px rgba(0, 0, 0, 0.12);
    --elevation-2: 0 12px 30px rgba(0, 0, 0, 0.16);
    --elevation-3: 0 18px 48px rgba(0, 0, 0, 0.2);
}

:root[data-performance-effective="low"] {
    --motion-fast: 70ms;
    --motion-base: 90ms;
    --motion-slow: 120ms;
    --elevation-1: 0 3px 8px rgba(0, 0, 0, 0.1);
    --elevation-2: 0 5px 14px rgba(0, 0, 0, 0.12);
    --elevation-3: 0 8px 20px rgba(0, 0, 0, 0.14);
}

:root[data-performance-effective="ultra-low"] {
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
    --elevation-1: none;
    --elevation-2: none;
    --elevation-3: none;
    --glass-shadow-inset: none;
}

:root[data-motion="low"] *,
body[data-motion="low"] * {
    scroll-behavior: auto !important;
}

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after,
body[data-motion="off"] *,
body[data-motion="off"] *::before,
body[data-motion="off"] *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
}

:root[data-page-visibility="hidden"] *,
:root[data-page-visibility="hidden"] *::before,
:root[data-page-visibility="hidden"] *::after {
    animation-play-state: paused !important;
}

:root[data-performance-glass="off"] *,
body[data-performance-glass="off"] * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

:root[data-performance-shadows="off"] *,
:root[data-performance-shadows="off"] *::before,
:root[data-performance-shadows="off"] *::after,
body[data-performance-shadows="off"] *,
body[data-performance-shadows="off"] *::before,
body[data-performance-shadows="off"] *::after {
    box-shadow: none !important;
    text-shadow: none !important;
}

:root[data-performance-background="off"] :where(
    .hero-orb,
    .home-quantum-orbit,
    .quantum-particle,
    .ambient-particle,
    .background-particle,
    .decorative-orbit,
    [data-performance-decoration]
) {
    display: none !important;
}

:root[data-performance-background="reduced"] :where(
    .hero-orb,
    .home-quantum-orbit,
    .quantum-particle,
    .ambient-particle,
    .background-particle
) {
    animation-duration: calc(var(--motion-slow) * 8) !important;
    filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

/* Codex Surface: a system-wide, dense dark workspace profile.  Page-specific
   surfaces can still override these tokens without creating a second theme. */
:root[data-theme="codex"] {
    color-scheme: dark;
    --theme-name: "codex-surface";
    --theme-page: #171717;
    --theme-page-2: #202020;
    --theme-page-3: #2a2a2a;
    --theme-surface-base: #212121;
    --theme-surface-raised: #2a2a2a;
    --theme-surface-inset: #171717;
    --theme-border-base: #3d3d3d;
    --theme-border-emphasis: #5b5b5b;
    --theme-text-primary: #f2f2f2;
    --theme-text-secondary: #c8c8c8;
    --theme-text-muted: #9b9b9b;
    --theme-accent-primary: #10a37f;
    --theme-accent-secondary: #19c37d;
    --theme-success-strong: #52c788;
    --theme-warning-strong: #e7b35a;
    --theme-danger-strong: #ef7c7c;
    --theme-code-bg: #111111;
    --theme-code-text: #f4f4f4;
    --theme-shadow-card: 0 16px 36px rgba(0, 0, 0, .28);
    --theme-bg-page: var(--theme-page);
    --theme-bg-page-2: var(--theme-page-2);
    --theme-bg-page-3: var(--theme-page-3);
    --theme-surface: var(--theme-surface-base);
    --theme-surface-2: var(--theme-surface-raised);
    --theme-surface-soft: var(--theme-surface-inset);
    --theme-border: var(--theme-border-base);
    --theme-border-strong: var(--theme-border-emphasis);
    --theme-text: var(--theme-text-primary);
    --theme-text-soft: var(--theme-text-secondary);
    --theme-muted: var(--theme-text-muted);
    --theme-accent: var(--theme-accent-primary);
    --theme-accent-2: var(--theme-accent-secondary);
    --theme-success: var(--theme-success-strong);
    --theme-warning: var(--theme-warning-strong);
    --theme-danger: var(--theme-danger-strong);
    --theme-scroll-track: #1a1a1a;
    --theme-scroll-thumb: #555555;
}

html[data-theme="codex"] body,
body[data-theme="codex"] {
    background: var(--theme-page);
    color: var(--theme-text-primary);
}

html[data-theme="codex"] .ws-shell-topbar,
body[data-theme="codex"] .ws-shell-topbar {
    background: #171717;
    border-bottom-color: #333333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

html[data-theme="codex"] .ws-shell-bottom,
body[data-theme="codex"] .ws-shell-bottom {
    background: #111111;
    border-top-color: #333333;
}

html[data-theme="codex"] .ws-shell-link,
body[data-theme="codex"] .ws-shell-link {
    border-color: transparent;
    background: transparent;
    color: #c8c8c8;
}

html[data-theme="codex"] .ws-shell-link.active,
body[data-theme="codex"] .ws-shell-link.active {
    background: #2b2b2b;
    color: #ffffff;
    border-color: #454545;
}

html[data-theme="codex"] :is(button, input, select, textarea, .btn, .form-control, .form-select),
body[data-theme="codex"] :is(button, input, select, textarea, .btn, .form-control, .form-select) {
    border-color: #484848;
    background-color: #242424;
    color: #eeeeee;
}

html[data-theme="codex"] :is(button:hover, .btn:hover),
body[data-theme="codex"] :is(button:hover, .btn:hover) {
    border-color: #10a37f;
    background-color: #303030;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="codex"] *, body[data-theme="codex"] * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Site-wide customization contract. Components should consume these aliases. */
:root {
    --ui-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-radius-sm: 6px;
    --ui-radius-md: 8px;
    --ui-radius-lg: 12px;
    --ui-control-height: 34px;
    --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #0b6fae) 28%, transparent);
    --ui-shadow-panel: var(--theme-shadow-card, 0 12px 30px rgba(25, 63, 91, .14));
}

[data-shell-mode="codex"] {
    --ui-surface-app: #101216;
    --ui-surface-panel: #17191f;
    --ui-surface-hover: #20232b;
    --ui-border-subtle: #2b3039;
    --ui-text-primary: #f2f3f5;
    --ui-text-muted: #9ba3b0;
    --ui-accent: #73b8ff;
}

[data-shell-mode="classic"] {
    --ui-surface-app: var(--theme-bg-page, #eef5fb);
    --ui-surface-panel: var(--theme-surface, #fbfdff);
    --ui-surface-hover: var(--theme-surface-2, #f3f8fc);
    --ui-border-subtle: var(--theme-border, #8ca8bd);
    --ui-text-primary: var(--theme-text, #102538);
    --ui-text-muted: var(--theme-muted, #405a70);
    --ui-accent: var(--theme-accent, #0b6fae);
}


/* Optional primitives for new surfaces. Existing modules can adopt these incrementally. */
.ui-shell-surface {
    color: var(--ui-text-primary, var(--theme-text, #102538));
    background: var(--ui-surface-app, var(--theme-bg-page, #eef5fb));
    font-family: var(--ui-font-sans);
}
.ui-panel {
    border: 1px solid var(--ui-border-subtle, var(--theme-border, #8ca8bd));
    border-radius: var(--ui-radius-md, 8px);
    background: var(--ui-surface-panel, var(--theme-surface, #fbfdff));
    box-shadow: var(--ui-shadow-panel, none);
}
.ui-control {
    min-height: var(--ui-control-height, 34px);
    border: 1px solid var(--ui-border-subtle, var(--theme-border, #8ca8bd));
    border-radius: var(--ui-radius-sm, 6px);
    font: inherit;
}
.ui-focusable:focus-visible,
.ui-control:focus-visible {
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}