:root,
:root[data-theme="breeze"] {
    --theme-name: "breeze";
    --theme-bg-page: #152338;
    --theme-bg-page-2: #1a2c44;
    --theme-bg-page-3: #1c2f49;
    --theme-surface: #1f3550;
    --theme-surface-2: #25405f;
    --theme-surface-soft: #182b42;
    --theme-border: #456488;
    --theme-border-strong: #5b83ae;
    --theme-text: #ecf4ff;
    --theme-text-soft: #d7e7f8;
    --theme-muted: #aac1d9;
    --theme-accent: #67c1ff;
    --theme-accent-2: #3ea4ea;
    --theme-success: #8fdeb0;
    --theme-warning: #ffd59b;
    --theme-danger: #ffa3a3;
    --theme-scroll-track: #18293f;
    --theme-scroll-thumb: #55769a;
}

:root[data-theme="skyline"] {
    --theme-name: "skyline";
    --theme-bg-page: #111d2f;
    --theme-bg-page-2: #15253b;
    --theme-bg-page-3: #132338;
    --theme-surface: #172a42;
    --theme-surface-2: #1d3350;
    --theme-surface-soft: #132338;
    --theme-border: #3b5879;
    --theme-border-strong: #4e7399;
    --theme-text: #e7f2ff;
    --theme-text-soft: #c8d9ea;
    --theme-muted: #9eb6cf;
    --theme-accent: #62beff;
    --theme-accent-2: #44a6f1;
    --theme-success: #88d8a7;
    --theme-warning: #ffd18b;
    --theme-danger: #ff9a9a;
    --theme-scroll-track: #132237;
    --theme-scroll-thumb: #4d6e8f;
}

:root[data-theme="graphite"] {
    --theme-name: "graphite";
    --theme-bg-page: #121418;
    --theme-bg-page-2: #171b20;
    --theme-bg-page-3: #1b2027;
    --theme-surface: #1d232c;
    --theme-surface-2: #232b36;
    --theme-surface-soft: #171d25;
    --theme-border: #3a4758;
    --theme-border-strong: #4f6176;
    --theme-text: #f0f4f9;
    --theme-text-soft: #d7e0ea;
    --theme-muted: #a9b5c4;
    --theme-accent: #7eb3ff;
    --theme-accent-2: #5f95e6;
    --theme-success: #95d9b0;
    --theme-warning: #ffd79a;
    --theme-danger: #ff9f9f;
    --theme-scroll-track: #171c23;
    --theme-scroll-thumb: #566476;
}

:root[data-theme="aurora"] {
    --theme-name: "aurora";
    --theme-bg-page: #0d1c1e;
    --theme-bg-page-2: #0f2629;
    --theme-bg-page-3: #102123;
    --theme-surface: #133036;
    --theme-surface-2: #173a42;
    --theme-surface-soft: #102a30;
    --theme-border: #2f6670;
    --theme-border-strong: #3f808c;
    --theme-text: #e8fdff;
    --theme-text-soft: #caf1f6;
    --theme-muted: #9fd0d8;
    --theme-accent: #54d9d5;
    --theme-accent-2: #3fbebf;
    --theme-success: #89e2be;
    --theme-warning: #ffd8a0;
    --theme-danger: #ffa1ad;
    --theme-scroll-track: #102428;
    --theme-scroll-thumb: #3f7178;
}

:root[data-theme="sunset"] {
    --theme-name: "sunset";
    --theme-bg-page: #1d1714;
    --theme-bg-page-2: #241c17;
    --theme-bg-page-3: #261d18;
    --theme-surface: #2d221b;
    --theme-surface-2: #37291f;
    --theme-surface-soft: #261d17;
    --theme-border: #655041;
    --theme-border-strong: #806752;
    --theme-text: #fff2e9;
    --theme-text-soft: #f2dfd1;
    --theme-muted: #cfb7a7;
    --theme-accent: #ffb266;
    --theme-accent-2: #f59445;
    --theme-success: #95d49f;
    --theme-warning: #ffd28a;
    --theme-danger: #ffa3a3;
    --theme-scroll-track: #241b16;
    --theme-scroll-thumb: #7a5d4b;
}

:root[data-theme="glasswave"] {
    --theme-name: "glasswave";
    --theme-bg-page: #e8f2fb;
    --theme-bg-page-2: #dceaf8;
    --theme-bg-page-3: #d3e5f6;
    --theme-surface: #f4f9ff;
    --theme-surface-2: #edf5ff;
    --theme-surface-soft: #e6f1fe;
    --theme-border: #a9c5de;
    --theme-border-strong: #86b0d3;
    --theme-text: #1c3045;
    --theme-text-soft: #2a435f;
    --theme-muted: #4f6985;
    --theme-accent: #2f90da;
    --theme-accent-2: #5ab3eb;
    --theme-success: #3f9d68;
    --theme-warning: #b27b2f;
    --theme-danger: #bb4d4d;
    --theme-scroll-track: #dbeaf7;
    --theme-scroll-thumb: #8fb3d0;
}

: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: "glasswave-pro";
    --theme-bg-page: #eaf4fc;
    --theme-bg-page-2: #dcecf8;
    --theme-bg-page-3: #cfe3f4;
    --theme-surface: rgba(248, 252, 255, 0.86);
    --theme-surface-2: rgba(239, 247, 255, 0.9);
    --theme-surface-soft: rgba(229, 241, 252, 0.82);
    --theme-border: #adc8df;
    --theme-border-strong: #6ea8d2;
    --theme-text: #15293d;
    --theme-text-soft: #24435f;
    --theme-muted: #516d88;
    --theme-accent: #237fca;
    --theme-accent-2: #56b8e9;
    --theme-success: #2f9365;
    --theme-warning: #ad762e;
    --theme-danger: #b64b55;
    --theme-scroll-track: rgba(214, 231, 244, 0.86);
    --theme-scroll-thumb: #86abc8;

    --surface-canvas: #edf6fd;
    --surface-glass: rgba(255, 255, 255, 0.58);
    --surface-glass-strong: rgba(255, 255, 255, 0.76);
    --surface-glass-muted: rgba(230, 242, 252, 0.7);
    --surface-inset: rgba(210, 229, 244, 0.56);
    --surface-code: #102033;
    --surface-code-2: #14283d;
    --elevation-1: 0 8px 22px rgba(50, 82, 112, 0.12);
    --elevation-2: 0 18px 46px rgba(45, 76, 108, 0.16);
    --elevation-3: 0 28px 78px rgba(34, 66, 98, 0.24);
    --elevation-focus: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 22%, transparent);
    --glass-border: rgba(111, 160, 205, 0.48);
    --glass-highlight: rgba(255, 255, 255, 0.72);
    --glass-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.72);

    --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);
}

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

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