/* Theme tokens: light defaults, one dark palette, manual/system selection. */
@layer themes {
:where(html[data-ui-template="glass"]) {
--ui-canvas: #e9e7e2;
    --ui-solid-surface: #f5f5f1;
    --ui-solid-surface-soft: #eceee8;
    --ui-primary-fill: #343d43;
    --ui-primary-hover-fill: #293237;
    --ui-primary-image: linear-gradient(150deg, #626b70, #343d43 62%, #262f34);
    --ui-primary-hover-image: linear-gradient(150deg, #6b7479, #293237);
    --glass-hover-fill: linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(247 248 245 / 40%));
    --glass-scene-background: radial-gradient(ellipse 48% 52% at 3% 28%, rgb(169 174 170 / 44%), transparent 85%), radial-gradient(ellipse 48% 50% at 98% 5%, rgb(189 181 166 / 38%), transparent 80%), radial-gradient(ellipse 44% 48% at 85% 95%, rgb(167 173 179 / 36%), transparent 80%), linear-gradient(135deg, #f8f7f4, #e0e1dd 58%, #ebe8e0);
    --glass-scene-lobe-opacity: 1;
    --glass-edge: rgb(255 255 255 / 85%);
    --glass-glint: rgb(255 255 255 / 94%);
    --glass-muted-fill: rgb(255 255 255 / 42%);
    --glass-inset-fill: rgb(255 255 255 / 24%);
    --glass-control-radius: 14px;
    --glass-dialog-radius: 30px;
    --glass-course-radius: 12px;
    --glass-course-mobile-radius: 9px;
    --glass-contrast-line: #576660;
    --ui-admin-canvas: #e9e7e2;
    --ui-surface: rgb(255 255 255 / 42%);
    --ui-surface-soft: rgb(255 255 255 / 24%);
    --ui-ink: #272c30;
    --ui-muted: #4e575d;
    --ui-subtle: #60696e;
    --ui-line: rgb(255 255 255 / 70%);
    --ui-accent: #343d43;
    --ui-accent-hover: #252d32;
    --ui-accent-soft: rgb(216 219 218 / 48%);
    --ui-radius: 26px;
    --ui-radius-sm: 16px;
    --glass-fill: linear-gradient(145deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 16%) 55%, rgb(250 250 248 / 38%));
    --glass-control-fill: linear-gradient(145deg, rgb(255 255 255 / 70%), rgb(249 249 246 / 25%));
    --glass-input-fill: linear-gradient(145deg, rgb(255 255 255 / 68%), rgb(251 251 248 / 38%));
    --glass-current-fill: linear-gradient(145deg, rgb(232 234 231 / 72%), rgb(252 252 248 / 24%) 65%, rgb(255 255 255 / 45%));
    --glass-course-fill: linear-gradient(150deg, rgb(255 255 255 / 82%), rgb(252 252 249 / 46%));
    --glass-dialog-fill: linear-gradient(145deg, rgb(252 252 249 / 88%), rgb(244 245 241 / 66%));
    --glass-selected-fill: linear-gradient(155deg, rgb(255 255 255 / 92%), rgb(232 235 232 / 52%));
    --glass-light: radial-gradient(ellipse at var(--glass-light-x, 18%) var(--glass-light-y, 0%), rgb(255 255 255 / 52%), transparent 68%);
    --glass-shadow: inset 1px 1px 0 rgb(255 255 255 / 96%), inset -1px -1px 0 rgb(116 122 120 / 26%), inset 0 -8px 16px rgb(255 255 255 / 16%), 0 12px 32px rgb(70 72 66 / 14%);
    --glass-control-shadow: inset 1px 1px 0 rgb(255 255 255 / 96%), inset -1px -1px 0 rgb(102 110 108 / 24%), 0 4px 12px rgb(68 69 67 / 13%);
    --glass-blur: blur(22px) saturate(110%);
    --ui-color-scheme: light;
}

@media (max-width: 768px) {
:where(html[data-ui-template="glass"]) {
--ui-radius: 24px;
    --glass-blur: blur(18px) saturate(110%);
}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:where(html[data-ui-template="glass"]) {
--glass-fill: linear-gradient(var(--ui-solid-surface), var(--ui-solid-surface-soft));
    --glass-control-fill: var(--glass-fill);
    --glass-input-fill: var(--glass-fill);
    --glass-current-fill: var(--glass-fill);
    --glass-course-fill: var(--glass-fill);
    --glass-dialog-fill: var(--glass-fill);
    --glass-selected-fill: linear-gradient(var(--ui-surface-quiet), var(--ui-surface-soft));
    --glass-light: linear-gradient(transparent, transparent);
    --ui-surface: var(--ui-solid-surface);
    --ui-surface-soft: var(--ui-solid-surface-soft);
}
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
:where(html[data-ui-template="glass"]) {
--glass-fill: linear-gradient(var(--ui-solid-surface), var(--ui-solid-surface-soft));
    --glass-control-fill: var(--glass-fill);
    --glass-input-fill: var(--glass-fill);
    --glass-current-fill: var(--glass-fill);
    --glass-course-fill: var(--glass-fill);
    --glass-dialog-fill: var(--glass-fill);
    --glass-selected-fill: linear-gradient(var(--ui-surface-quiet), var(--ui-surface-soft));
    --glass-light: linear-gradient(transparent, transparent);
    --ui-surface: var(--ui-solid-surface);
    --ui-surface-soft: var(--ui-solid-surface-soft);
    --glass-blur: none;
}
}

@media (prefers-contrast: more) {
:where(html[data-ui-template="glass"]) {
--ui-line: #8a9690;
}
}

:where(html[data-ui-template="glass"]) {
--ui-dark-color-scheme: dark;
    --ui-dark-canvas: #000000;
    --ui-dark-admin-canvas: #000000;
    --ui-dark-solid-surface: #121212;
    --ui-dark-solid-surface-soft: #1c1c1c;
    --ui-dark-surface: #121212;
    --ui-dark-surface-soft: #0a0a0a;
    --ui-dark-ink: #f5f5f5;
    --ui-dark-muted: #cccccc;
    --ui-dark-subtle: #aaaaaa;
    --ui-dark-line: #303030;
    --ui-dark-accent: #e5e5e5;
    --ui-dark-accent-hover: #f5f5f5;
    --ui-dark-accent-soft: #303030;
    --ui-dark-primary-fill: #cccccc;
    --ui-dark-primary-hover-fill: #e5e5e5;
    --ui-dark-primary-image: linear-gradient(150deg, #e5e5e5, #aaaaaa);
    --ui-dark-primary-hover-image: linear-gradient(150deg, #f5f5f5, #cccccc);
    --glass-dark-fill: linear-gradient(145deg, rgb(24 24 24 / 94%), rgb(10 10 10 / 90%));
    --glass-dark-control-fill: linear-gradient(145deg, rgb(30 30 30 / 94%), rgb(18 18 18 / 94%));
    --glass-dark-input-fill: linear-gradient(145deg, #1c1c1c, #0a0a0a);
    --glass-dark-current-fill: linear-gradient(145deg, #303030, #121212);
    --glass-dark-course-fill: linear-gradient(150deg, #181818, #121212);
    --glass-dark-dialog-fill: linear-gradient(145deg, #1c1c1c, #0a0a0a);
    --glass-dark-selected-fill: linear-gradient(155deg, #383838, #121212);
    --glass-dark-hover-fill: linear-gradient(145deg, #303030, #1c1c1c);
    --glass-dark-light: radial-gradient(ellipse at var(--glass-light-x, 18%) var(--glass-light-y, 0%), rgb(255 255 255 / 4%), transparent 68%);
    --glass-dark-shadow: inset 1px 1px 0 rgb(255 255 255 / 16%), inset -1px -1px 0 rgb(0 0 0 / 36%), 0 12px 32px rgb(0 0 0 / 25%);
    --glass-dark-control-shadow: inset 1px 1px rgb(255 255 255 / 16%), 0 4px 12px rgb(0 0 0 / 22%);
    --glass-dark-scene-background: #000000;
    --glass-dark-scene-lobe-opacity: 0;
    --glass-dark-edge: rgb(255 255 255 / 18%);
    --glass-dark-glint: rgb(255 255 255 / 16%);
    --glass-dark-muted-fill: #303030;
    --glass-dark-inset-fill: #0a0a0a;
    --glass-dark-contrast-line: #aaaaaa;
}

@media (prefers-color-scheme: dark) {
:where(html[data-ui-template="glass"]: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-solid-surface: var(--ui-dark-solid-surface);
    --ui-solid-surface-soft: var(--ui-dark-solid-surface-soft);
    --ui-surface: var(--ui-dark-surface);
    --ui-surface-soft: var(--ui-dark-surface-soft);
    --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-accent: var(--ui-dark-accent);
    --ui-accent-hover: var(--ui-dark-accent-hover);
    --ui-accent-soft: var(--ui-dark-accent-soft);
    --ui-primary-fill: var(--ui-dark-primary-fill);
    --ui-primary-hover-fill: var(--ui-dark-primary-hover-fill);
    --ui-primary-image: var(--ui-dark-primary-image);
    --ui-primary-hover-image: var(--ui-dark-primary-hover-image);
    --glass-fill: var(--glass-dark-fill);
    --glass-control-fill: var(--glass-dark-control-fill);
    --glass-input-fill: var(--glass-dark-input-fill);
    --glass-current-fill: var(--glass-dark-current-fill);
    --glass-course-fill: var(--glass-dark-course-fill);
    --glass-dialog-fill: var(--glass-dark-dialog-fill);
    --glass-selected-fill: var(--glass-dark-selected-fill);
    --glass-hover-fill: var(--glass-dark-hover-fill);
    --glass-light: var(--glass-dark-light);
    --glass-shadow: var(--glass-dark-shadow);
    --glass-control-shadow: var(--glass-dark-control-shadow);
    --glass-scene-background: var(--glass-dark-scene-background);
    --glass-scene-lobe-opacity: var(--glass-dark-scene-lobe-opacity);
    --glass-edge: var(--glass-dark-edge);
    --glass-glint: var(--glass-dark-glint);
    --glass-muted-fill: var(--glass-dark-muted-fill);
    --glass-inset-fill: var(--glass-dark-inset-fill);
    --glass-contrast-line: var(--glass-dark-contrast-line);
}
}

:where(html[data-ui-template="glass"][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-solid-surface: var(--ui-dark-solid-surface);
    --ui-solid-surface-soft: var(--ui-dark-solid-surface-soft);
    --ui-surface: var(--ui-dark-surface);
    --ui-surface-soft: var(--ui-dark-surface-soft);
    --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-accent: var(--ui-dark-accent);
    --ui-accent-hover: var(--ui-dark-accent-hover);
    --ui-accent-soft: var(--ui-dark-accent-soft);
    --ui-primary-fill: var(--ui-dark-primary-fill);
    --ui-primary-hover-fill: var(--ui-dark-primary-hover-fill);
    --ui-primary-image: var(--ui-dark-primary-image);
    --ui-primary-hover-image: var(--ui-dark-primary-hover-image);
    --glass-fill: var(--glass-dark-fill);
    --glass-control-fill: var(--glass-dark-control-fill);
    --glass-input-fill: var(--glass-dark-input-fill);
    --glass-current-fill: var(--glass-dark-current-fill);
    --glass-course-fill: var(--glass-dark-course-fill);
    --glass-dialog-fill: var(--glass-dark-dialog-fill);
    --glass-selected-fill: var(--glass-dark-selected-fill);
    --glass-hover-fill: var(--glass-dark-hover-fill);
    --glass-light: var(--glass-dark-light);
    --glass-shadow: var(--glass-dark-shadow);
    --glass-control-shadow: var(--glass-dark-control-shadow);
    --glass-scene-background: var(--glass-dark-scene-background);
    --glass-scene-lobe-opacity: var(--glass-dark-scene-lobe-opacity);
    --glass-edge: var(--glass-dark-edge);
    --glass-glint: var(--glass-dark-glint);
    --glass-muted-fill: var(--glass-dark-muted-fill);
    --glass-inset-fill: var(--glass-dark-inset-fill);
    --glass-contrast-line: var(--glass-dark-contrast-line);
}

@media (prefers-color-scheme: dark) and (prefers-reduced-transparency: reduce), (prefers-color-scheme: dark) and (prefers-contrast: more) {
:where(html[data-ui-template="glass"]:not([data-color-scheme])) {
--glass-fill: linear-gradient(var(--ui-solid-surface), var(--ui-solid-surface-soft));
            --glass-control-fill: var(--glass-fill);
            --glass-input-fill: var(--glass-fill);
            --glass-current-fill: var(--glass-fill);
            --glass-course-fill: var(--glass-fill);
            --glass-dialog-fill: var(--glass-fill);
            --glass-selected-fill: linear-gradient(var(--ui-surface-quiet), var(--ui-solid-surface-soft));
            --glass-light: linear-gradient(transparent, transparent);
            --glass-blur: none;
}
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
:where(html[data-ui-template="glass"][data-color-scheme="dark"]) {
--glass-fill: linear-gradient(var(--ui-solid-surface), var(--ui-solid-surface-soft));
            --glass-control-fill: var(--glass-fill);
            --glass-input-fill: var(--glass-fill);
            --glass-current-fill: var(--glass-fill);
            --glass-course-fill: var(--glass-fill);
            --glass-dialog-fill: var(--glass-fill);
            --glass-selected-fill: linear-gradient(var(--ui-surface-quiet), var(--ui-solid-surface-soft));
            --glass-light: linear-gradient(transparent, transparent);
            --glass-blur: none;
}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:where(html[data-ui-template="glass"]) {
--glass-fill: linear-gradient(var(--ui-solid-surface), var(--ui-solid-surface-soft));
            --glass-control-fill: var(--glass-fill);
            --glass-input-fill: var(--glass-fill);
            --glass-current-fill: var(--glass-fill);
            --glass-course-fill: var(--glass-fill);
            --glass-dialog-fill: var(--glass-fill);
            --glass-selected-fill: linear-gradient(var(--ui-surface-quiet), var(--ui-solid-surface-soft));
            --glass-light: linear-gradient(transparent, transparent);
            --glass-blur: none;
}
}
}