/* Theme tokens: light defaults, one dark palette, manual/system selection. */
@layer themes {
:where(:root) {
--ui-color-scheme: light;
        --ui-canvas: #fafafa;
        --ui-admin-canvas: #fafafa;
        --ui-surface: #ffffff;
        --ui-surface-soft: #f7f7f8;
        --ui-surface-quiet: #f0f0f2;
        --ui-ink: #18181b;
        --ui-muted: #52525b;
        --ui-subtle: #71717a;
        --ui-line: #e4e4e7;
        --ui-control-line: #c4c4cb;
        --ui-control-hover-line: #a1a1aa;
        --ui-accent: #2055a2;
        --ui-accent-hover: #173e7b;
        --ui-accent-soft: #e9f0fb;
        --ui-on-accent: #ffffff;
        --ui-primary-fill: var(--ui-accent);
        --ui-primary-hover-fill: var(--ui-accent-hover);
        --ui-primary-image: none;
        --ui-primary-hover-image: none;
        --ui-success: #176b45;
        --ui-success-hover: #105235;
        --ui-success-rgb: 23, 107, 69;
        --ui-danger: #a52d35;
        --ui-danger-hover: #84232b;
        --ui-danger-soft: #fff5f5;
        --ui-danger-line: #e7bfc2;
        --ui-danger-rgb: 165, 45, 53;
        --ui-warning: #8a560b;
        --ui-warning-rgb: 138, 86, 11;
        --ui-exam-ink: #8d232c;
        --ui-exam-surface: #fff1f2;
        --ui-course-surface: var(--ui-surface);
        --ui-marker-mix: #ffffff;
        --ui-marker-mix-amount: 0%;
        --ui-radius: 12px;
        --ui-radius-sm: 8px;
        --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-space-8: 32px;
        --ui-text-xs: 12px;
        --ui-text-sm: 13px;
        --ui-text-base: 14px;
        --ui-text-lg: 18px;
        --ui-text-title: clamp(24px, 2.6vw, 30px);
        --ui-control-height: 44px;
        --ui-duration: 160ms;
        --ui-ease: cubic-bezier(.2, .8, .2, 1);
        --ui-shadow-popover: 0 4px 6px -2px rgb(0 0 0 / 4%), 0 12px 32px -8px rgb(0 0 0 / 12%);
        --ui-shadow-dialog: 0 24px 80px -20px rgb(0 0 0 / 24%);
        --ui-font: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

:where(:root) {
--ui-dark-color-scheme: dark;
    --ui-dark-canvas: #000000;
    --ui-dark-admin-canvas: #000000;
    --ui-dark-surface: #121212;
    --ui-dark-surface-soft: #0a0a0a;
    --ui-dark-surface-quiet: #1c1c1c;
    --ui-dark-ink: #f5f5f5;
    --ui-dark-muted: #cccccc;
    --ui-dark-subtle: #aaaaaa;
    --ui-dark-line: #303030;
    --ui-dark-control-line: #555555;
    --ui-dark-control-hover-line: #93c5fd;
    --ui-dark-accent: #93c5fd;
    --ui-dark-accent-hover: #bfdbfe;
    --ui-dark-accent-soft: #202020;
    --ui-dark-on-accent: #000000;
    --ui-dark-success: #86efac;
    --ui-dark-success-hover: #bbf7d0;
    --ui-dark-success-rgb: 134, 239, 172;
    --ui-dark-danger: #fda4af;
    --ui-dark-danger-hover: #fecdd3;
    --ui-dark-danger-soft: #3b202f;
    --ui-dark-danger-line: #985764;
    --ui-dark-danger-rgb: 253, 164, 175;
    --ui-dark-warning: #fcd34d;
    --ui-dark-warning-rgb: 252, 211, 77;
    --ui-dark-exam-ink: #fda4af;
    --ui-dark-exam-surface: #352331;
    --ui-dark-marker-mix-amount: 70%;
}

@media (prefers-color-scheme: dark) {
:where(:root:not([data-color-scheme])) {
--ui-color-scheme: var(--ui-dark-color-scheme);
    --ui-canvas: var(--ui-dark-canvas);
    --ui-admin-canvas: var(--ui-dark-admin-canvas);
    --ui-surface: var(--ui-dark-surface);
    --ui-surface-soft: var(--ui-dark-surface-soft);
    --ui-surface-quiet: var(--ui-dark-surface-quiet);
    --ui-ink: var(--ui-dark-ink);
    --ui-muted: var(--ui-dark-muted);
    --ui-subtle: var(--ui-dark-subtle);
    --ui-line: var(--ui-dark-line);
    --ui-control-line: var(--ui-dark-control-line);
    --ui-control-hover-line: var(--ui-dark-control-hover-line);
    --ui-accent: var(--ui-dark-accent);
    --ui-accent-hover: var(--ui-dark-accent-hover);
    --ui-accent-soft: var(--ui-dark-accent-soft);
    --ui-on-accent: var(--ui-dark-on-accent);
    --ui-success: var(--ui-dark-success);
    --ui-success-hover: var(--ui-dark-success-hover);
    --ui-success-rgb: var(--ui-dark-success-rgb);
    --ui-danger: var(--ui-dark-danger);
    --ui-danger-hover: var(--ui-dark-danger-hover);
    --ui-danger-soft: var(--ui-dark-danger-soft);
    --ui-danger-line: var(--ui-dark-danger-line);
    --ui-danger-rgb: var(--ui-dark-danger-rgb);
    --ui-warning: var(--ui-dark-warning);
    --ui-warning-rgb: var(--ui-dark-warning-rgb);
    --ui-exam-ink: var(--ui-dark-exam-ink);
    --ui-exam-surface: var(--ui-dark-exam-surface);
    --ui-marker-mix-amount: var(--ui-dark-marker-mix-amount);
}
}

:where(:root[data-color-scheme="dark"]) {
--ui-color-scheme: var(--ui-dark-color-scheme);
    --ui-canvas: var(--ui-dark-canvas);
    --ui-admin-canvas: var(--ui-dark-admin-canvas);
    --ui-surface: var(--ui-dark-surface);
    --ui-surface-soft: var(--ui-dark-surface-soft);
    --ui-surface-quiet: var(--ui-dark-surface-quiet);
    --ui-ink: var(--ui-dark-ink);
    --ui-muted: var(--ui-dark-muted);
    --ui-subtle: var(--ui-dark-subtle);
    --ui-line: var(--ui-dark-line);
    --ui-control-line: var(--ui-dark-control-line);
    --ui-control-hover-line: var(--ui-dark-control-hover-line);
    --ui-accent: var(--ui-dark-accent);
    --ui-accent-hover: var(--ui-dark-accent-hover);
    --ui-accent-soft: var(--ui-dark-accent-soft);
    --ui-on-accent: var(--ui-dark-on-accent);
    --ui-success: var(--ui-dark-success);
    --ui-success-hover: var(--ui-dark-success-hover);
    --ui-success-rgb: var(--ui-dark-success-rgb);
    --ui-danger: var(--ui-dark-danger);
    --ui-danger-hover: var(--ui-dark-danger-hover);
    --ui-danger-soft: var(--ui-dark-danger-soft);
    --ui-danger-line: var(--ui-dark-danger-line);
    --ui-danger-rgb: var(--ui-dark-danger-rgb);
    --ui-warning: var(--ui-dark-warning);
    --ui-warning-rgb: var(--ui-dark-warning-rgb);
    --ui-exam-ink: var(--ui-dark-exam-ink);
    --ui-exam-surface: var(--ui-dark-exam-surface);
    --ui-marker-mix-amount: var(--ui-dark-marker-mix-amount);
}

@supports not (background: color-mix(in srgb, red, white)) {
:where(:root) {
--ui-dark-marker-fallback: #f7f7f8;
}

@media (prefers-color-scheme: dark) {
:where(:root:not([data-color-scheme])) {
--ui-marker-fallback: var(--ui-dark-marker-fallback);
}
}

:where(:root[data-color-scheme="dark"]) {
--ui-marker-fallback: var(--ui-dark-marker-fallback);
}
}
}