/* Hamkelas 0.15.0 — complete paired theme roles.
   Neutral layers, accent containers and foregrounds are intentionally separate.
   All presets are complete so nested previews never inherit another palette.
   Research and maintenance notes: docs/THEMES_0_15_0.md. */

:root, [data-theme=pearl] {
  --bg: #f6f5f3;
  --surface: #ffffff;
  --surface-soft: #eeedeb;
  --text: #232321;
  --muted: #5d5c59;
  --accent: #5e5acf;
  --accent-fg: #ffffff;
  --accent-soft: #ededfa;
  --accent-text: #49459c;
  --border: #e1e0dd;
  --control-border: #85837f;
  --sidebar-bg: #f0efed;
  --sidebar-fg: #2c2b29;
  --sidebar-muted: #615f5b;
  --nav-active: #e5e3f5;
  --nav-active-fg: #49459c;
  --card-marker: #e5e2fb;
  --card-marker-fg: #49459c;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --field-radius: 7px;
  --focus: #49459c;
  --input-bg: #ffffff;
  --input-fg: #232321;
  --input-placeholder: #5d5c59;
  --surface-raised: #ffffff;
  --topbar-bg: #ffffff;
  --sidebar-border: #e1e0dd;
  --nav-hover-bg: #e5e3f5;
  --nav-hover-fg: #49459c;
  --sidebar-focus: #2c2b29;
  --scroll-track: #eeedeb;
  --scroll-thumb: #85837f;
  --scroll-thumb-hover: #49459c;
  --scroll-corner: #eeedeb;
  --sidebar-scroll-thumb: #615f5b;
  --card-edge: #e1e0dd;
  --card-hover-border: #5e5acf;
  --button-hover: #49459c;
  --button-hover-fg: #ffffff;
  --shadow: 0 1px 3px #26242008;
  --card-hover-shadow: 0 2px 6px #1e1b160a, 0 12px 30px #1e1b1610;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #20212b70;
  --hero-bg: #5e5acf;
  --hero-fg: #ffffff;
  --hero-muted: #ffffff;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #e5e2fb;
  --hero-chip-fg: #49459c;
  --selection-bg: #5e5acf;
  --selection-fg: #ffffff;
  --theme-scheme: light;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: none;
  --danger: #a5233b;
  --danger-bg: #fff0f2;
  --success: #24613d;
  --success-bg: #dff4e8;
  --warning: #76500b;
  --warning-bg: #fff1cf;
}

[data-theme=sand] {
  --bg: #efede7;
  --surface: #fffcf6;
  --surface-soft: #f2eee5;
  --text: #302e29;
  --muted: #625e53;
  --accent: #393830;
  --accent-fg: #fffdf6;
  --accent-soft: #e8e2d5;
  --accent-text: #4e493c;
  --border: #dcd6c9;
  --control-border: #817b6e;
  --sidebar-bg: #e7e1d6;
  --sidebar-fg: #302e29;
  --sidebar-muted: #625e53;
  --nav-active: #d9d1c1;
  --nav-active-fg: #423d32;
  --card-marker: #dddfcb;
  --card-marker-fg: #3b482d;
  --radius: 10px;
  --radius-sm: 5px;
  --radius-lg: 16px;
  --field-radius: 5px;
  --focus: #4e493c;
  --input-bg: #fffcf6;
  --input-fg: #302e29;
  --input-placeholder: #625e53;
  --surface-raised: #fffcf6;
  --topbar-bg: #fffcf6;
  --sidebar-border: #dcd6c9;
  --nav-hover-bg: #d9d1c1;
  --nav-hover-fg: #423d32;
  --sidebar-focus: #302e29;
  --scroll-track: #f2eee5;
  --scroll-thumb: #817b6e;
  --scroll-thumb-hover: #4e493c;
  --scroll-corner: #f2eee5;
  --sidebar-scroll-thumb: #625e53;
  --card-edge: #dcd6c9;
  --card-hover-border: #393830;
  --button-hover: #4e493c;
  --button-hover-fg: #fffdf6;
  --shadow: 0 1px 0 #b4a99124;
  --card-hover-shadow: 0 2px 6px #1e1b160a, 0 12px 30px #1e1b1610;
  --button-shadow: none;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #20212b70;
  --hero-bg: #393830;
  --hero-fg: #fffdf6;
  --hero-muted: #fffdf6;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #dddfcb;
  --hero-chip-fg: #3b482d;
  --selection-bg: #393830;
  --selection-fg: #fffdf6;
  --theme-scheme: light;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: none;
  --danger: #a5233b;
  --danger-bg: #fff0f2;
  --success: #24613d;
  --success-bg: #dff4e8;
  --warning: #76500b;
  --warning-bg: #fff1cf;
}

[data-theme=porcelain] {
  --bg: #f0f5ff;
  --surface: #ffffff;
  --surface-soft: #e4edff;
  --text: #172b4a;
  --muted: #425774;
  --accent: #245ad4;
  --accent-fg: #ffffff;
  --accent-soft: #dce8ff;
  --accent-text: #204caa;
  --border: #d5e0f2;
  --control-border: #73829c;
  --sidebar-bg: #142b52;
  --sidebar-fg: #f0f5ff;
  --sidebar-muted: #b1c4e1;
  --nav-active: #254b80;
  --nav-active-fg: #ffffff;
  --card-marker: #d7e7ff;
  --card-marker-fg: #204caa;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --field-radius: 11px;
  --focus: #204caa;
  --input-bg: #ffffff;
  --input-fg: #172b4a;
  --input-placeholder: #425774;
  --surface-raised: #ffffff;
  --topbar-bg: #ffffff;
  --sidebar-border: #2d4365;
  --nav-hover-bg: #254b80;
  --nav-hover-fg: #ffffff;
  --sidebar-focus: #f0f5ff;
  --scroll-track: #e4edff;
  --scroll-thumb: #73829c;
  --scroll-thumb-hover: #204caa;
  --scroll-corner: #e4edff;
  --sidebar-scroll-thumb: #b1c4e1;
  --card-edge: #245ad4;
  --card-hover-border: #245ad4;
  --button-hover: #204caa;
  --button-hover-fg: #ffffff;
  --shadow: 0 2px 6px #2356aa08, 0 12px 28px #2356aa08;
  --card-hover-shadow: 0 2px 6px #1e1b160a, 0 12px 30px #1e1b1610;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #20212b70;
  --hero-bg: #142b52;
  --hero-fg: #f0f5ff;
  --hero-muted: #b1c4e1;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #d7e7ff;
  --hero-chip-fg: #204caa;
  --selection-bg: #245ad4;
  --selection-fg: #ffffff;
  --theme-scheme: light;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #00000008;
  --danger: #a5233b;
  --danger-bg: #fff0f2;
  --success: #24613d;
  --success-bg: #dff4e8;
  --warning: #76500b;
  --warning-bg: #fff1cf;
}

[data-theme=linen] {
  --bg: #faf2ec;
  --surface: #fffaf6;
  --surface-soft: #f4e6db;
  --text: #392b25;
  --muted: #735344;
  --accent: #ac462b;
  --accent-fg: #fff8f2;
  --accent-soft: #efd9cd;
  --accent-text: #873721;
  --border: #e5d3c5;
  --control-border: #927461;
  --sidebar-bg: #f6e8dc;
  --sidebar-fg: #392b25;
  --sidebar-muted: #735344;
  --nav-active: #ebd1bd;
  --nav-active-fg: #713321;
  --card-marker: #ead8b9;
  --card-marker-fg: #624120;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --field-radius: 9px;
  --focus: #873721;
  --input-bg: #fffaf6;
  --input-fg: #392b25;
  --input-placeholder: #735344;
  --surface-raised: #fffaf6;
  --topbar-bg: #fffaf6;
  --sidebar-border: #e5d3c5;
  --nav-hover-bg: #ebd1bd;
  --nav-hover-fg: #713321;
  --sidebar-focus: #392b25;
  --scroll-track: #f4e6db;
  --scroll-thumb: #927461;
  --scroll-thumb-hover: #873721;
  --scroll-corner: #f4e6db;
  --sidebar-scroll-thumb: #735344;
  --card-edge: #d6b09a;
  --card-hover-border: #ac462b;
  --button-hover: #873721;
  --button-hover-fg: #fff8f2;
  --shadow: 0 2px 4px #82472a0a, 0 12px 30px #82472a0b;
  --card-hover-shadow: 0 2px 6px #1e1b160a, 0 12px 30px #1e1b1610;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #20212b70;
  --hero-bg: #ac462b;
  --hero-fg: #fff8f2;
  --hero-muted: #fff8f2;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #ead8b9;
  --hero-chip-fg: #624120;
  --selection-bg: #ac462b;
  --selection-fg: #fff8f2;
  --theme-scheme: light;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #00000008;
  --danger: #a5233b;
  --danger-bg: #fff0f2;
  --success: #24613d;
  --success-bg: #dff4e8;
  --warning: #76500b;
  --warning-bg: #fff1cf;
}

[data-theme=lilac] {
  --bg: #eff1f5;
  --surface: #fdfaff;
  --surface-soft: #ece6f6;
  --text: #343049;
  --muted: #635773;
  --accent: #7a3cc6;
  --accent-fg: #ffffff;
  --accent-soft: #e8daf6;
  --accent-text: #643199;
  --border: #d9d1e5;
  --control-border: #897a9a;
  --sidebar-bg: #e6e9ef;
  --sidebar-fg: #343049;
  --sidebar-muted: #635773;
  --nav-active: #d9c9ec;
  --nav-active-fg: #563283;
  --card-marker: #f4d8c7;
  --card-marker-fg: #7c4527;
  --radius: 24px;
  --radius-sm: 18px;
  --radius-lg: 30px;
  --field-radius: 17px;
  --focus: #643199;
  --input-bg: #fdfaff;
  --input-fg: #343049;
  --input-placeholder: #635773;
  --surface-raised: #fdfaff;
  --topbar-bg: #fdfaff;
  --sidebar-border: #d9d1e5;
  --nav-hover-bg: #d9c9ec;
  --nav-hover-fg: #563283;
  --sidebar-focus: #343049;
  --scroll-track: #ece6f6;
  --scroll-thumb: #897a9a;
  --scroll-thumb-hover: #643199;
  --scroll-corner: #ece6f6;
  --sidebar-scroll-thumb: #635773;
  --card-edge: #d9d1e5;
  --card-hover-border: #7a3cc6;
  --button-hover: #643199;
  --button-hover-fg: #ffffff;
  --shadow: 0 3px 8px #6c4e9610, 0 14px 32px #6c4e9610;
  --card-hover-shadow: 0 2px 6px #1e1b160a, 0 12px 30px #1e1b1610;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #20212b70;
  --hero-bg: #7a3cc6;
  --hero-fg: #ffffff;
  --hero-muted: #ffffff;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #f4d8c7;
  --hero-chip-fg: #7c4527;
  --selection-bg: #7a3cc6;
  --selection-fg: #ffffff;
  --theme-scheme: light;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #00000008;
  --danger: #a5233b;
  --danger-bg: #fff0f2;
  --success: #24613d;
  --success-bg: #dff4e8;
  --warning: #76500b;
  --warning-bg: #fff1cf;
}

[data-theme=mint] {
  --bg: #edf5ef;
  --surface: #fcfffc;
  --surface-soft: #e3f0e5;
  --text: #203d2b;
  --muted: #4a6753;
  --accent: #216b45;
  --accent-fg: #ffffff;
  --accent-soft: #d5e9d7;
  --accent-text: #245c39;
  --border: #cfdfd2;
  --control-border: #6f8a77;
  --sidebar-bg: #e3eddf;
  --sidebar-fg: #203d2b;
  --sidebar-muted: #48624e;
  --nav-active: #cadfc6;
  --nav-active-fg: #285332;
  --card-marker: #e4edba;
  --card-marker-fg: #48551b;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --field-radius: 13px;
  --focus: #245c39;
  --input-bg: #fcfffc;
  --input-fg: #203d2b;
  --input-placeholder: #4a6753;
  --surface-raised: #fcfffc;
  --topbar-bg: #fcfffc;
  --sidebar-border: #cfdfd2;
  --nav-hover-bg: #cadfc6;
  --nav-hover-fg: #285332;
  --sidebar-focus: #203d2b;
  --scroll-track: #e3f0e5;
  --scroll-thumb: #6f8a77;
  --scroll-thumb-hover: #245c39;
  --scroll-corner: #e3f0e5;
  --sidebar-scroll-thumb: #48624e;
  --card-edge: #9bbe9c;
  --card-hover-border: #216b45;
  --button-hover: #245c39;
  --button-hover-fg: #ffffff;
  --shadow: 0 2px 8px #24573809;
  --card-hover-shadow: 0 2px 6px #1e1b160a, 0 12px 30px #1e1b1610;
  --button-shadow: none;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #20212b70;
  --hero-bg: #216b45;
  --hero-fg: #ffffff;
  --hero-muted: #ffffff;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #e4edba;
  --hero-chip-fg: #48551b;
  --selection-bg: #216b45;
  --selection-fg: #ffffff;
  --theme-scheme: light;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #00000008;
  --danger: #a5233b;
  --danger-bg: #fff0f2;
  --success: #24613d;
  --success-bg: #dff4e8;
  --warning: #76500b;
  --warning-bg: #fff1cf;
}

[data-theme=ink] {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-soft: #f0f0f0;
  --text: #171717;
  --muted: #595959;
  --accent: #171717;
  --accent-fg: #ffffff;
  --accent-soft: #e8e8e8;
  --accent-text: #303030;
  --border: #dedede;
  --control-border: #858585;
  --sidebar-bg: #ffffff;
  --sidebar-fg: #171717;
  --sidebar-muted: #595959;
  --nav-active: #eeeeee;
  --nav-active-fg: #171717;
  --card-marker: #e5e5e5;
  --card-marker-fg: #171717;
  --radius: 6px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --field-radius: 5px;
  --focus: #303030;
  --input-bg: #ffffff;
  --input-fg: #171717;
  --input-placeholder: #595959;
  --surface-raised: #ffffff;
  --topbar-bg: #ffffff;
  --sidebar-border: #dedede;
  --nav-hover-bg: #eeeeee;
  --nav-hover-fg: #171717;
  --sidebar-focus: #171717;
  --scroll-track: #f0f0f0;
  --scroll-thumb: #858585;
  --scroll-thumb-hover: #303030;
  --scroll-corner: #f0f0f0;
  --sidebar-scroll-thumb: #595959;
  --card-edge: #171717;
  --card-hover-border: #171717;
  --button-hover: #303030;
  --button-hover-fg: #ffffff;
  --shadow: none;
  --card-hover-shadow: 0 4px 16px #0000000f;
  --button-shadow: none;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #20212b70;
  --hero-bg: #171717;
  --hero-fg: #ffffff;
  --hero-muted: #ffffff;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #e5e5e5;
  --hero-chip-fg: #171717;
  --selection-bg: #171717;
  --selection-fg: #ffffff;
  --theme-scheme: light;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: none;
  --danger: #a5233b;
  --danger-bg: #fff0f2;
  --success: #24613d;
  --success-bg: #dff4e8;
  --warning: #76500b;
  --warning-bg: #fff1cf;
}

[data-theme=midnight] {
  --bg: #171819;
  --surface: #212223;
  --surface-soft: #292a2d;
  --text: #f2f1ee;
  --muted: #b4b3b0;
  --accent: #9d98f5;
  --accent-fg: #201c45;
  --accent-soft: #333044;
  --accent-text: #d0caff;
  --border: #393a3e;
  --control-border: #767779;
  --sidebar-bg: #141516;
  --sidebar-fg: #edece9;
  --sidebar-muted: #aaa9a5;
  --nav-active: #302c44;
  --nav-active-fg: #ddd6ff;
  --card-marker: #393448;
  --card-marker-fg: #d0caff;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --field-radius: 5px;
  --focus: #d0caff;
  --input-bg: #212223;
  --input-fg: #f2f1ee;
  --input-placeholder: #b4b3b0;
  --surface-raised: #212223;
  --topbar-bg: #212223;
  --sidebar-border: #393a3e;
  --nav-hover-bg: #302c44;
  --nav-hover-fg: #ddd6ff;
  --sidebar-focus: #edece9;
  --scroll-track: #292a2d;
  --scroll-thumb: #767779;
  --scroll-thumb-hover: #d0caff;
  --scroll-corner: #292a2d;
  --sidebar-scroll-thumb: #aaa9a5;
  --card-edge: #393a3e;
  --card-hover-border: #9d98f5;
  --button-hover: #9d98f5;
  --button-hover-fg: #201c45;
  --shadow: 0 1px 4px #00000016;
  --card-hover-shadow: 0 4px 14px #00000018, 0 14px 32px #00000014;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #060910a8;
  --hero-bg: #141516;
  --hero-fg: #edece9;
  --hero-muted: #aaa9a5;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #393448;
  --hero-chip-fg: #d0caff;
  --selection-bg: #9d98f5;
  --selection-fg: #201c45;
  --theme-scheme: dark;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: none;
  --danger: #ffb5c1;
  --danger-bg: #40252d;
  --success: #9fe3b8;
  --success-bg: #20392c;
  --warning: #f3d18d;
  --warning-bg: #41351f;
}

[data-theme=forest] {
  --bg: #101714;
  --surface: #17211c;
  --surface-soft: #1e2c24;
  --text: #e7f3eb;
  --muted: #abc3b3;
  --accent: #63d6a0;
  --accent-fg: #102f20;
  --accent-soft: #1c3a2d;
  --accent-text: #9ce8be;
  --border: #31483a;
  --control-border: #748b7c;
  --sidebar-bg: #0c120f;
  --sidebar-fg: #e7f3eb;
  --sidebar-muted: #a1bda9;
  --nav-active: #1a3225;
  --nav-active-fg: #a6e8bf;
  --card-marker: #304329;
  --card-marker-fg: #c0df9c;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --field-radius: 9px;
  --focus: #9ce8be;
  --input-bg: #17211c;
  --input-fg: #e7f3eb;
  --input-placeholder: #abc3b3;
  --surface-raised: #17211c;
  --topbar-bg: #17211c;
  --sidebar-border: #31483a;
  --nav-hover-bg: #1a3225;
  --nav-hover-fg: #a6e8bf;
  --sidebar-focus: #e7f3eb;
  --scroll-track: #1e2c24;
  --scroll-thumb: #748b7c;
  --scroll-thumb-hover: #9ce8be;
  --scroll-corner: #1e2c24;
  --sidebar-scroll-thumb: #a1bda9;
  --card-edge: #37684c;
  --card-hover-border: #63d6a0;
  --button-hover: #63d6a0;
  --button-hover-fg: #102f20;
  --shadow: 0 3px 12px #0000001f;
  --card-hover-shadow: 0 4px 14px #00000018, 0 14px 32px #00000014;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #060910a8;
  --hero-bg: #0c120f;
  --hero-fg: #e7f3eb;
  --hero-muted: #a1bda9;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #304329;
  --hero-chip-fg: #c0df9c;
  --selection-bg: #63d6a0;
  --selection-fg: #102f20;
  --theme-scheme: dark;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #00000008;
  --danger: #ffb5c1;
  --danger-bg: #40252d;
  --success: #9fe3b8;
  --success-bg: #20392c;
  --warning: #f3d18d;
  --warning-bg: #41351f;
}

[data-theme=aurora] {
  --bg: #1e1e2e;
  --surface: #242437;
  --surface-soft: #313244;
  --text: #cdd6f4;
  --muted: #b0b8d3;
  --accent: #cba6f7;
  --accent-fg: #2d1f42;
  --accent-soft: #39314e;
  --accent-text: #dcc2fc;
  --border: #45475a;
  --control-border: #8288a4;
  --sidebar-bg: #181825;
  --sidebar-fg: #cdd6f4;
  --sidebar-muted: #a6adc8;
  --nav-active: #353044;
  --nav-active-fg: #e0c6ff;
  --card-marker: #4b3745;
  --card-marker-fg: #f5c2e7;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --field-radius: 13px;
  --focus: #dcc2fc;
  --input-bg: #242437;
  --input-fg: #cdd6f4;
  --input-placeholder: #b0b8d3;
  --surface-raised: #242437;
  --topbar-bg: #242437;
  --sidebar-border: #45475a;
  --nav-hover-bg: #353044;
  --nav-hover-fg: #e0c6ff;
  --sidebar-focus: #cdd6f4;
  --scroll-track: #313244;
  --scroll-thumb: #8288a4;
  --scroll-thumb-hover: #dcc2fc;
  --scroll-corner: #313244;
  --sidebar-scroll-thumb: #a6adc8;
  --card-edge: #45475a;
  --card-hover-border: #cba6f7;
  --button-hover: #cba6f7;
  --button-hover-fg: #2d1f42;
  --shadow: 0 4px 18px #11111b38;
  --card-hover-shadow: 0 4px 14px #00000018, 0 14px 32px #00000014;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #060910a8;
  --hero-bg: #181825;
  --hero-fg: #cdd6f4;
  --hero-muted: #a6adc8;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #4b3745;
  --hero-chip-fg: #f5c2e7;
  --selection-bg: #cba6f7;
  --selection-fg: #2d1f42;
  --theme-scheme: dark;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #11111b50;
  --danger: #ffb5c1;
  --danger-bg: #40252d;
  --success: #9fe3b8;
  --success-bg: #20392c;
  --warning: #f3d18d;
  --warning-bg: #41351f;
}

[data-theme=graphite] {
  --bg: #111111;
  --surface: #1c1c1c;
  --surface-soft: #282828;
  --text: #ededed;
  --muted: #b0b0b0;
  --accent: #f0f0f0;
  --accent-fg: #141414;
  --accent-soft: #333333;
  --accent-text: #e5e5e5;
  --border: #383838;
  --control-border: #787878;
  --sidebar-bg: #151515;
  --sidebar-fg: #ededed;
  --sidebar-muted: #b0b0b0;
  --nav-active: #303030;
  --nav-active-fg: #ffffff;
  --card-marker: #363636;
  --card-marker-fg: #ededed;
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 14px;
  --field-radius: 5px;
  --focus: #e5e5e5;
  --input-bg: #1c1c1c;
  --input-fg: #ededed;
  --input-placeholder: #b0b0b0;
  --surface-raised: #1c1c1c;
  --topbar-bg: #1c1c1c;
  --sidebar-border: #383838;
  --nav-hover-bg: #303030;
  --nav-hover-fg: #ffffff;
  --sidebar-focus: #ededed;
  --scroll-track: #282828;
  --scroll-thumb: #787878;
  --scroll-thumb-hover: #e5e5e5;
  --scroll-corner: #282828;
  --sidebar-scroll-thumb: #b0b0b0;
  --card-edge: #383838;
  --card-hover-border: #f0f0f0;
  --button-hover: #f0f0f0;
  --button-hover-fg: #141414;
  --shadow: none;
  --card-hover-shadow: 0 4px 20px #0000002b;
  --button-shadow: none;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #060910a8;
  --hero-bg: #151515;
  --hero-fg: #ededed;
  --hero-muted: #b0b0b0;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #363636;
  --hero-chip-fg: #ededed;
  --selection-bg: #f0f0f0;
  --selection-fg: #141414;
  --theme-scheme: dark;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: none;
  --danger: #ffb5c1;
  --danger-bg: #40252d;
  --success: #9fe3b8;
  --success-bg: #20392c;
  --warning: #f3d18d;
  --warning-bg: #41351f;
}

[data-theme=abyss] {
  --bg: #0d1422;
  --surface: #142035;
  --surface-soft: #1c2c44;
  --text: #edf4ff;
  --muted: #a9bed9;
  --accent: #79b8ff;
  --accent-fg: #102740;
  --accent-soft: #193754;
  --accent-text: #a6d2ff;
  --border: #2c4261;
  --control-border: #7189aa;
  --sidebar-bg: #09111f;
  --sidebar-fg: #edf4ff;
  --sidebar-muted: #a9bed9;
  --nav-active: #1c3557;
  --nav-active-fg: #c4e0ff;
  --card-marker: #1b4052;
  --card-marker-fg: #90dbed;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --field-radius: 7px;
  --focus: #a6d2ff;
  --input-bg: #142035;
  --input-fg: #edf4ff;
  --input-placeholder: #a9bed9;
  --surface-raised: #142035;
  --topbar-bg: #142035;
  --sidebar-border: #2c4261;
  --nav-hover-bg: #1c3557;
  --nav-hover-fg: #c4e0ff;
  --sidebar-focus: #edf4ff;
  --scroll-track: #1c2c44;
  --scroll-thumb: #7189aa;
  --scroll-thumb-hover: #a6d2ff;
  --scroll-corner: #1c2c44;
  --sidebar-scroll-thumb: #a9bed9;
  --card-edge: #3e648e;
  --card-hover-border: #79b8ff;
  --button-hover: #79b8ff;
  --button-hover-fg: #102740;
  --shadow: 0 2px 8px #02081440, 0 12px 28px #02081430;
  --card-hover-shadow: 0 4px 14px #00000018, 0 14px 32px #00000014;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #060910a8;
  --hero-bg: #09111f;
  --hero-fg: #edf4ff;
  --hero-muted: #a9bed9;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #1b4052;
  --hero-chip-fg: #90dbed;
  --selection-bg: #79b8ff;
  --selection-fg: #102740;
  --theme-scheme: dark;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #00000008;
  --danger: #ffb5c1;
  --danger-bg: #40252d;
  --success: #9fe3b8;
  --success-bg: #20392c;
  --warning: #f3d18d;
  --warning-bg: #41351f;
}

[data-theme=ember] {
  --bg: #1e1714;
  --surface: #2b211b;
  --surface-soft: #362820;
  --text: #fff0df;
  --muted: #cfb39c;
  --accent: #f5ad73;
  --accent-fg: #3d2210;
  --accent-soft: #4b3020;
  --accent-text: #ffcca0;
  --border: #523c2d;
  --control-border: #a1846b;
  --sidebar-bg: #18120f;
  --sidebar-fg: #fff0df;
  --sidebar-muted: #cfb39c;
  --nav-active: #402a1c;
  --nav-active-fg: #ffd0a7;
  --card-marker: #504221;
  --card-marker-fg: #eed39a;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --field-radius: 11px;
  --focus: #ffcca0;
  --input-bg: #2b211b;
  --input-fg: #fff0df;
  --input-placeholder: #cfb39c;
  --surface-raised: #2b211b;
  --topbar-bg: #2b211b;
  --sidebar-border: #523c2d;
  --nav-hover-bg: #402a1c;
  --nav-hover-fg: #ffd0a7;
  --sidebar-focus: #fff0df;
  --scroll-track: #362820;
  --scroll-thumb: #a1846b;
  --scroll-thumb-hover: #ffcca0;
  --scroll-corner: #362820;
  --sidebar-scroll-thumb: #cfb39c;
  --card-edge: #765034;
  --card-hover-border: #f5ad73;
  --button-hover: #f5ad73;
  --button-hover-fg: #3d2210;
  --shadow: 0 3px 10px #0f09092b, 0 12px 28px #0f09091f;
  --card-hover-shadow: 0 4px 14px #00000018, 0 14px 32px #00000014;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #060910a8;
  --hero-bg: #18120f;
  --hero-fg: #fff0df;
  --hero-muted: #cfb39c;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #504221;
  --hero-chip-fg: #eed39a;
  --selection-bg: #f5ad73;
  --selection-fg: #3d2210;
  --theme-scheme: dark;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #00000008;
  --danger: #ffb5c1;
  --danger-bg: #40252d;
  --success: #9fe3b8;
  --success-bg: #20392c;
  --warning: #f3d18d;
  --warning-bg: #41351f;
}

[data-theme=obsidian] {
  --bg: #090d0a;
  --surface: #151b16;
  --surface-soft: #212b23;
  --text: #ebf5ec;
  --muted: #b1c3b3;
  --accent: #9ce04a;
  --accent-fg: #1e3109;
  --accent-soft: #2b3c1f;
  --accent-text: #bee787;
  --border: #34432e;
  --control-border: #7b8974;
  --sidebar-bg: #0d120e;
  --sidebar-fg: #ebf5ec;
  --sidebar-muted: #b1c3b3;
  --nav-active: #263a1b;
  --nav-active-fg: #c7ef9b;
  --card-marker: #323d1f;
  --card-marker-fg: #d8ed99;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --field-radius: 5px;
  --focus: #bee787;
  --input-bg: #151b16;
  --input-fg: #ebf5ec;
  --input-placeholder: #b1c3b3;
  --surface-raised: #151b16;
  --topbar-bg: #151b16;
  --sidebar-border: #34432e;
  --nav-hover-bg: #263a1b;
  --nav-hover-fg: #c7ef9b;
  --sidebar-focus: #ebf5ec;
  --scroll-track: #212b23;
  --scroll-thumb: #7b8974;
  --scroll-thumb-hover: #bee787;
  --scroll-corner: #212b23;
  --sidebar-scroll-thumb: #b1c3b3;
  --card-edge: #496930;
  --card-hover-border: #9ce04a;
  --button-hover: #9ce04a;
  --button-hover-fg: #1e3109;
  --shadow: 0 1px 2px #00000014, 0 8px 24px #00000018;
  --card-hover-shadow: 0 4px 14px #00000018, 0 14px 32px #00000014;
  --button-shadow: none;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #060910a8;
  --hero-bg: #0d120e;
  --hero-fg: #ebf5ec;
  --hero-muted: #b1c3b3;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #323d1f;
  --hero-chip-fg: #d8ed99;
  --selection-bg: #9ce04a;
  --selection-fg: #1e3109;
  --theme-scheme: dark;
  --page-pattern: none;
  --page-pattern-size: auto;
  --header-shadow: none;
  --danger: #ffb5c1;
  --danger-bg: #40252d;
  --success: #9fe3b8;
  --success-bg: #20392c;
  --warning: #f3d18d;
  --warning-bg: #41351f;
}

[data-theme=citrus] {
  --bg: #dfa68b;
  --surface: #f6cbb1;
  --surface-soft: #edb89c;
  --text: #392226;
  --muted: #5a3335;
  --accent: #71384c;
  --accent-fg: #fff3e4;
  --accent-soft: #f0bfbc;
  --accent-text: #542638;
  --border: #ce9278;
  --control-border: #795548;
  --sidebar-bg: #e3ab70;
  --sidebar-fg: #392226;
  --sidebar-muted: #5a3335;
  --nav-active: #d09181;
  --nav-active-fg: #462231;
  --card-marker: #bfd191;
  --card-marker-fg: #283a17;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --field-radius: 11px;
  --focus: #542638;
  --input-bg: #f8d9c4;
  --input-fg: #392226;
  --input-placeholder: #5a3335;
  --surface-raised: #f6cbb1;
  --topbar-bg: #f6cbb1;
  --sidebar-border: #ce9278;
  --nav-hover-bg: #d09181;
  --nav-hover-fg: #462231;
  --sidebar-focus: #392226;
  --scroll-track: #edb89c;
  --scroll-thumb: #795548;
  --scroll-thumb-hover: #542638;
  --scroll-corner: #edb89c;
  --sidebar-scroll-thumb: #5a3335;
  --card-edge: #c98079;
  --card-hover-border: #71384c;
  --button-hover: #542638;
  --button-hover-fg: #fff3e4;
  --shadow: 0 3px 8px #71384c12, 0 12px 24px #71384c12;
  --card-hover-shadow: 0 2px 6px #1e1b160a, 0 12px 30px #1e1b1610;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #20212b70;
  --hero-bg: #71384c;
  --hero-fg: #fff3e4;
  --hero-muted: #fff3e4;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #bfd191;
  --hero-chip-fg: #283a17;
  --selection-bg: #71384c;
  --selection-fg: #fff3e4;
  --theme-scheme: light;
  --page-pattern: linear-gradient(145deg, #dfa68b 0%, #e6b59a 100%);
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #00000008;
  --danger: #712633;
  --danger-bg: #f2b4ac;
  --success: #2a461d;
  --success-bg: #c8d7a5;
  --warning: #62410c;
  --warning-bg: #f0d290;
}

[data-theme=carnival] {
  --bg: #9faddc;
  --surface: #c3d0ed;
  --surface-soft: #adbee2;
  --text: #202c50;
  --muted: #303e62;
  --accent: #49377e;
  --accent-fg: #fff8ef;
  --accent-soft: #c6b4e1;
  --accent-text: #3f2a6e;
  --border: #8d9bc3;
  --control-border: #4c587d;
  --sidebar-bg: #394c7a;
  --sidebar-fg: #eef2ff;
  --sidebar-muted: #c5d3f6;
  --nav-active: #536591;
  --nav-active-fg: #ffffff;
  --card-marker: #f2cf82;
  --card-marker-fg: #4c370b;
  --radius: 26px;
  --radius-sm: 20px;
  --radius-lg: 32px;
  --field-radius: 19px;
  --focus: #3f2a6e;
  --input-bg: #d4def3;
  --input-fg: #202c50;
  --input-placeholder: #303e62;
  --surface-raised: #c3d0ed;
  --topbar-bg: #c3d0ed;
  --sidebar-border: #52638b;
  --nav-hover-bg: #536591;
  --nav-hover-fg: #ffffff;
  --sidebar-focus: #eef2ff;
  --scroll-track: #adbee2;
  --scroll-thumb: #4c587d;
  --scroll-thumb-hover: #3f2a6e;
  --scroll-corner: #adbee2;
  --sidebar-scroll-thumb: #c5d3f6;
  --card-edge: #7e75b0;
  --card-hover-border: #49377e;
  --button-hover: #3f2a6e;
  --button-hover-fg: #fff8ef;
  --shadow: 0 3px 8px #394c7a16, 0 14px 28px #394c7a18;
  --card-hover-shadow: 0 2px 6px #1e1b160a, 0 12px 30px #1e1b1610;
  --button-shadow: 0 1px 2px #00000024;
  --modal-shadow: 0 24px 80px #00000050, 0 4px 16px #00000025;
  --backdrop: #20212b70;
  --hero-bg: #394c7a;
  --hero-fg: #eef2ff;
  --hero-muted: #c5d3f6;
  --hero-line: #ffffff24;
  --hero-glow: #ffffff10;
  --hero-chip: #f2cf82;
  --hero-chip-fg: #4c370b;
  --selection-bg: #49377e;
  --selection-fg: #fff8ef;
  --theme-scheme: light;
  --page-pattern: linear-gradient(155deg, #9faddc 0%, #abb8e2 100%);
  --page-pattern-size: auto;
  --header-shadow: 0 1px 0 #00000008;
  --danger: #752e53;
  --danger-bg: #ebbbd2;
  --success: #234c44;
  --success-bg: #b5d8cd;
  --warning: #62410c;
  --warning-bg: #f2cf82;
}

/* Surface styling does not alter the approved responsive page geometry. */
html, [data-theme] { color-scheme: var(--theme-scheme); }
body { background-color: var(--bg); background-image: var(--page-pattern); background-size: var(--page-pattern-size); }
::selection { background: var(--selection-bg); color: var(--selection-fg); }
.topbar { background: var(--topbar-bg); box-shadow: var(--header-shadow); }
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-fg); border-color: var(--sidebar-border); }
.sidebar .brand { color: var(--sidebar-fg); }
.sidebar .brand small, .sidebar .nav-label, .sidebar .quiet-note { color: var(--sidebar-muted); }
.sidebar .quiet-note strong { color: var(--sidebar-fg); }
.sidebar nav a, .sidebar nav button, .sidebar .logout { color: var(--sidebar-muted); }
.sidebar nav a:hover, .sidebar nav button:hover, .sidebar .logout:hover { background: var(--nav-hover-bg); color: var(--nav-hover-fg); }
.sidebar nav a[aria-current=page] { background: var(--nav-active); color: var(--nav-active-fg); font-weight: 700; }
.sidebar :focus-visible { outline-color: var(--sidebar-focus); }
.sidebar .sidebar-close { background: var(--nav-active); color: var(--nav-active-fg); border-color: var(--sidebar-muted); }
.sidebar-bottom { border-color: var(--sidebar-border); }
.topbar .icon-button, .avatar { border-radius: var(--radius-sm); }
.brand-mark { border-radius: var(--field-radius); box-shadow: var(--button-shadow); }
.teacher-course-card { border-block-start-color: var(--card-edge); }
.course-card, .teacher-course-card { transition: border-color var(--duration), box-shadow var(--duration), transform var(--duration); }
@media (hover: hover) {
  .course-card:hover, .teacher-course-card:hover { border-color: var(--card-hover-border); box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }
}
.button.primary, .primary { box-shadow: var(--button-shadow); }
.button:hover { filter: none; }
.button.subtle:hover { background: var(--accent-soft); color: var(--accent-text); }
.button.primary:hover, .primary:hover { background: var(--button-hover); color: var(--button-hover-fg); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea {
  background-color: var(--input-bg); color: var(--input-fg);
}
input::placeholder, textarea::placeholder { color: var(--input-placeholder); opacity: 1; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); }
input::file-selector-button { background: var(--surface-soft); color: var(--text); border: 1px solid var(--control-border); border-radius: var(--field-radius); font: inherit; padding: 6px 10px; margin-inline-end: 10px; }
.modal, .notification-panel { background: var(--surface-raised); color: var(--text); box-shadow: var(--modal-shadow); }
.modal::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }

/* Resolve variables on EVERY element: scrollbar-color inherits computed colors,
   which would otherwise leak the parent theme into a nested preview.
   Standard properties cover current Firefox/Chromium/Safari; the pseudo-elements
   below are a fallback for older WebKit/Blink. Keep native scrolling and sizing. */
:where(html, body, body *) { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: auto; }
:where(.sidebar, .theme-demo-nav, .theme-mini-sidebar) {
  --scroll-track: var(--sidebar-bg);
  --scroll-thumb: var(--sidebar-scroll-thumb);
  --scroll-thumb-hover: var(--sidebar-fg);
  --scroll-corner: var(--sidebar-bg);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background-color: var(--scroll-track); border-radius: 999px; }
::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); border: 3px solid var(--scroll-track); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-button { background-color: var(--scroll-corner); }
@media (prefers-reduced-motion: reduce) {
  .course-card, .teacher-course-card { transition: none; }
  .course-card:hover, .teacher-course-card:hover { transform: none; }
}
@media print { body { background-image: none; } }
@media (forced-colors: active) {
  body, .theme-mini, .theme-sandbox { background-image: none; }
  :where(html, body, body *) { scrollbar-color: auto; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner, ::-webkit-scrollbar-button { background-color: Canvas; }
  ::-webkit-scrollbar-thumb { background-color: ButtonText; border-color: Canvas; }
  ::-webkit-scrollbar-thumb:hover { background-color: Highlight; }
  .sidebar :focus-visible { outline-color: Highlight; }
}