/*
 DragonStar Design System V3
 Canonical visual-theme selectors generated from V2 token coverage.
 Legacy IDs remain normalized in application code for stored preference compatibility.
*/

/* DragonStar Signature */

:root[data-visual-theme="dragonstar-signature"][data-theme="light"] {
  --ui-bg: #f4f7fb;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #edf2f7;
  --ui-surface-subtle: #f8fafc;
  --ui-border: #d6e0ea;
  --ui-border-strong: #b9c7d5;
  --ui-text: #1b2738;
  --ui-text-muted: #667588;
  --ui-heading: #0d1b2c;
  --ui-primary: #2b6f9e;
  --ui-primary-strong: #1b547d;
  --ui-primary-soft: #e6f1f9;
  --ui-accent: #e5b744;
  --ui-sidebar-bg: #0f2038;
  --ui-sidebar-text: #f1f6fc;
  --ui-sidebar-muted: rgba(241,246,252,.66);
  --ui-sidebar-hover: rgba(255,255,255,.08);
  --ui-sidebar-active: rgba(86,164,219,.20);
  --ui-backdrop: rgba(4,10,20,.68);
  --ui-backdrop-blur: 3px;
  --ui-radius-lg: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 12px 34px rgba(22,42,65,.09);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="dragonstar-signature"][data-theme="dark"] {
  --ui-bg: #0d1624;
  --ui-surface: #182436;
  --ui-surface-elevated: #1b2a3e;
  --ui-surface-muted: #132033;
  --ui-surface-subtle: #101b2a;
  --ui-border: #34465c;
  --ui-border-strong: #4b6078;
  --ui-text: #eef5ff;
  --ui-text-muted: #aebdce;
  --ui-heading: #ffffff;
  --ui-primary: #7fc3f0;
  --ui-primary-strong: #b8ddf7;
  --ui-primary-soft: #173b55;
  --ui-accent: #f0c85e;
  --ui-sidebar-bg: #0d192a;
  --ui-sidebar-text: #f2f7ff;
  --ui-sidebar-muted: rgba(242,247,255,.64);
  --ui-sidebar-hover: rgba(255,255,255,.09);
  --ui-sidebar-active: rgba(127,195,240,.22);
  --ui-backdrop: rgba(2,7,15,.74);
  --ui-backdrop-blur: 4px;
  --ui-radius-lg: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 14px 38px rgba(0,0,0,.22);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Atlas Professional */

:root[data-visual-theme="neo-shell"][data-theme="light"] {
  --ui-bg: #f3f6fb;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #edf2f8;
  --ui-surface-subtle: #f9fbfd;
  --ui-border: #d4dce7;
  --ui-border-strong: #b8c5d5;
  --ui-text: #17253a;
  --ui-text-muted: #607084;
  --ui-heading: #0d1d32;
  --ui-primary: #2563eb;
  --ui-primary-strong: #1d4ed8;
  --ui-primary-soft: #eaf0ff;
  --ui-accent: #f0a927;
  --ui-sidebar-bg: #ffffff;
  --ui-sidebar-text: #17253a;
  --ui-sidebar-muted: rgba(23,37,58,.63);
  --ui-sidebar-hover: rgba(37,99,235,.07);
  --ui-sidebar-active: rgba(37,99,235,.15);
  --ui-backdrop: rgba(8,18,35,.66);
  --ui-backdrop-blur: 2px;
  --ui-radius-lg: 16px;
  --ui-radius-sm: 10px;
  --ui-shadow-card: 0 10px 28px rgba(25,56,103,.08);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="neo-shell"][data-theme="dark"] {
  --ui-bg: #0d1420;
  --ui-surface: #172437;
  --ui-surface-elevated: #1c2b40;
  --ui-surface-muted: #121d2c;
  --ui-surface-subtle: #0f1825;
  --ui-border: #344862;
  --ui-border-strong: #4d6480;
  --ui-text: #eff6ff;
  --ui-text-muted: #b7c6d8;
  --ui-heading: #ffffff;
  --ui-primary: #93c5fd;
  --ui-primary-strong: #c4dcfb;
  --ui-primary-soft: #1b3651;
  --ui-accent: #fbbf24;
  --ui-sidebar-bg: #0a1728;
  --ui-sidebar-text: #eff6ff;
  --ui-sidebar-muted: rgba(239,246,255,.63);
  --ui-sidebar-hover: rgba(147,197,253,.09);
  --ui-sidebar-active: rgba(147,197,253,.22);
  --ui-backdrop: rgba(3,8,18,.75);
  --ui-backdrop-blur: 3px;
  --ui-radius-lg: 16px;
  --ui-radius-sm: 10px;
  --ui-shadow-card: 0 12px 34px rgba(0,0,0,.22);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Emerald Business */

:root[data-visual-theme="emerald-ops"][data-theme="light"] {
  --ui-bg: #f2f8f5;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #eaf4ef;
  --ui-surface-subtle: #f8fbf9;
  --ui-border: #d2e1d9;
  --ui-border-strong: #b6cec2;
  --ui-text: #173127;
  --ui-text-muted: #5c7469;
  --ui-heading: #0d251b;
  --ui-primary: #0f766e;
  --ui-primary-strong: #0b5f59;
  --ui-primary-soft: #e4f4ef;
  --ui-accent: #d89a20;
  --ui-sidebar-bg: #f8fbf9;
  --ui-sidebar-text: #153128;
  --ui-sidebar-muted: rgba(21,49,40,.63);
  --ui-sidebar-hover: rgba(15,118,110,.07);
  --ui-sidebar-active: rgba(15,118,110,.15);
  --ui-backdrop: rgba(5,18,14,.66);
  --ui-backdrop-blur: 2px;
  --ui-radius-lg: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 11px 30px rgba(20,79,61,.08);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="emerald-ops"][data-theme="dark"] {
  --ui-bg: #0c1815;
  --ui-surface: #172a25;
  --ui-surface-elevated: #1c322c;
  --ui-surface-muted: #11231f;
  --ui-surface-subtle: #0e1c19;
  --ui-border: #315347;
  --ui-border-strong: #476d5f;
  --ui-text: #ecfdf5;
  --ui-text-muted: #b4c8bf;
  --ui-heading: #ffffff;
  --ui-primary: #5eead4;
  --ui-primary-strong: #99f6e4;
  --ui-primary-soft: #173f38;
  --ui-accent: #f0b84a;
  --ui-sidebar-bg: #0b211d;
  --ui-sidebar-text: #ecfdf5;
  --ui-sidebar-muted: rgba(236,253,245,.63);
  --ui-sidebar-hover: rgba(94,234,212,.09);
  --ui-sidebar-active: rgba(94,234,212,.22);
  --ui-backdrop: rgba(2,11,9,.76);
  --ui-backdrop-blur: 3px;
  --ui-radius-lg: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 13px 36px rgba(0,0,0,.23);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Graphite Executive */

:root[data-visual-theme="executive-rail"][data-theme="light"] {
  --ui-bg: #f5f6f7;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #eff1f3;
  --ui-surface-subtle: #fafafa;
  --ui-border: #d9dee5;
  --ui-border-strong: #bdc5cf;
  --ui-text: #222d38;
  --ui-text-muted: #66717e;
  --ui-heading: #151d26;
  --ui-primary: #475569;
  --ui-primary-strong: #334155;
  --ui-primary-soft: #edf0f3;
  --ui-accent: #df6b2c;
  --ui-sidebar-bg: #ffffff;
  --ui-sidebar-text: #222d38;
  --ui-sidebar-muted: rgba(34,45,56,.62);
  --ui-sidebar-hover: rgba(71,85,105,.07);
  --ui-sidebar-active: rgba(71,85,105,.15);
  --ui-backdrop: rgba(8,11,15,.67);
  --ui-backdrop-blur: 1px;
  --ui-radius-lg: 14px;
  --ui-radius-sm: 9px;
  --ui-shadow-card: 0 8px 24px rgba(22,28,36,.07);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="executive-rail"][data-theme="dark"] {
  --ui-bg: #10141a;
  --ui-surface: #1f2937;
  --ui-surface-elevated: #252f3e;
  --ui-surface-muted: #171e28;
  --ui-surface-subtle: #131923;
  --ui-border: #3d4858;
  --ui-border-strong: #566375;
  --ui-text: #f4f7fb;
  --ui-text-muted: #bdc7d4;
  --ui-heading: #ffffff;
  --ui-primary: #cbd5e1;
  --ui-primary-strong: #f1f5f9;
  --ui-primary-soft: #303b4a;
  --ui-accent: #fb923c;
  --ui-sidebar-bg: #111827;
  --ui-sidebar-text: #f4f7fb;
  --ui-sidebar-muted: rgba(244,247,251,.63);
  --ui-sidebar-hover: rgba(203,213,225,.08);
  --ui-sidebar-active: rgba(203,213,225,.20);
  --ui-backdrop: rgba(0,0,0,.76);
  --ui-backdrop-blur: 2px;
  --ui-radius-lg: 14px;
  --ui-radius-sm: 9px;
  --ui-shadow-card: 0 10px 30px rgba(0,0,0,.24);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Harbor Azure */

:root[data-visual-theme="harbor-azure"][data-theme="light"] {
  --ui-bg: #f1f7f9;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #eaf3f6;
  --ui-surface-subtle: #f8fbfc;
  --ui-border: #d3e1e6;
  --ui-border-strong: #b5cbd2;
  --ui-text: #162b34;
  --ui-text-muted: #617780;
  --ui-heading: #10262e;
  --ui-primary: #0e7490;
  --ui-primary-strong: #155e75;
  --ui-primary-soft: #e3f3f7;
  --ui-accent: #ec8b38;
  --ui-sidebar-bg: #ffffff;
  --ui-sidebar-text: #162b34;
  --ui-sidebar-muted: rgba(22,43,52,.63);
  --ui-sidebar-hover: rgba(14,116,144,.07);
  --ui-sidebar-active: rgba(14,116,144,.15);
  --ui-backdrop: rgba(4,16,22,.68);
  --ui-backdrop-blur: 2px;
  --ui-radius-lg: 17px;
  --ui-radius-sm: 11px;
  --ui-shadow-card: 0 10px 29px rgba(18,75,91,.08);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="harbor-azure"][data-theme="dark"] {
  --ui-bg: #0c181d;
  --ui-surface: #18313a;
  --ui-surface-elevated: #1d3943;
  --ui-surface-muted: #12262d;
  --ui-surface-subtle: #0f2026;
  --ui-border: #31515c;
  --ui-border-strong: #476b77;
  --ui-text: #ecfeff;
  --ui-text-muted: #b4c9d0;
  --ui-heading: #ffffff;
  --ui-primary: #67e8f9;
  --ui-primary-strong: #a5f3fc;
  --ui-primary-soft: #173e49;
  --ui-accent: #fdba74;
  --ui-sidebar-bg: #0b2028;
  --ui-sidebar-text: #ecfeff;
  --ui-sidebar-muted: rgba(236,254,255,.63);
  --ui-sidebar-hover: rgba(103,232,249,.09);
  --ui-sidebar-active: rgba(103,232,249,.22);
  --ui-backdrop: rgba(2,10,13,.76);
  --ui-backdrop-blur: 3px;
  --ui-radius-lg: 17px;
  --ui-radius-sm: 11px;
  --ui-shadow-card: 0 13px 36px rgba(0,0,0,.23);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Copper Ledger */

:root[data-visual-theme="copper-ledger"][data-theme="light"] {
  --ui-bg: #f8f5f1;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #f3ede7;
  --ui-surface-subtle: #fcfaf8;
  --ui-border: #e1d9d1;
  --ui-border-strong: #cbbdb0;
  --ui-text: #33261d;
  --ui-text-muted: #74675d;
  --ui-heading: #251a13;
  --ui-primary: #9a3412;
  --ui-primary-strong: #7c2d12;
  --ui-primary-soft: #f8e9df;
  --ui-accent: #2563eb;
  --ui-sidebar-bg: #fffdfb;
  --ui-sidebar-text: #33261d;
  --ui-sidebar-muted: rgba(51,38,29,.61);
  --ui-sidebar-hover: rgba(154,52,18,.07);
  --ui-sidebar-active: rgba(154,52,18,.15);
  --ui-backdrop: rgba(18,10,5,.66);
  --ui-backdrop-blur: 2px;
  --ui-radius-lg: 16px;
  --ui-radius-sm: 10px;
  --ui-shadow-card: 0 10px 28px rgba(82,49,27,.08);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="copper-ledger"][data-theme="dark"] {
  --ui-bg: #17110e;
  --ui-surface: #2b211b;
  --ui-surface-elevated: #32261f;
  --ui-surface-muted: #201713;
  --ui-surface-subtle: #1a120f;
  --ui-border: #574337;
  --ui-border-strong: #70574a;
  --ui-text: #fff7ed;
  --ui-text-muted: #d5c7b8;
  --ui-heading: #ffffff;
  --ui-primary: #fdba74;
  --ui-primary-strong: #fed7aa;
  --ui-primary-soft: #4c2d1d;
  --ui-accent: #93c5fd;
  --ui-sidebar-bg: #1f1712;
  --ui-sidebar-text: #fff7ed;
  --ui-sidebar-muted: rgba(255,247,237,.62);
  --ui-sidebar-hover: rgba(251,146,60,.09);
  --ui-sidebar-active: rgba(251,146,60,.22);
  --ui-backdrop: rgba(8,4,2,.76);
  --ui-backdrop-blur: 3px;
  --ui-radius-lg: 16px;
  --ui-radius-sm: 10px;
  --ui-shadow-card: 0 12px 34px rgba(0,0,0,.24);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Royal Indigo */

:root[data-visual-theme="royal-luxe"][data-theme="light"] {
  --ui-bg: #f5f4fa;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #efedf8;
  --ui-surface-subtle: #faf9fd;
  --ui-border: #dcd9ea;
  --ui-border-strong: #c4bfdc;
  --ui-text: #292642;
  --ui-text-muted: #6b687f;
  --ui-heading: #1d1a35;
  --ui-primary: #4f46e5;
  --ui-primary-strong: #3730a3;
  --ui-primary-soft: #eeedff;
  --ui-accent: #d4a817;
  --ui-sidebar-bg: #ffffff;
  --ui-sidebar-text: #292642;
  --ui-sidebar-muted: rgba(41,38,66,.62);
  --ui-sidebar-hover: rgba(79,70,229,.07);
  --ui-sidebar-active: rgba(79,70,229,.15);
  --ui-backdrop: rgba(8,6,20,.68);
  --ui-backdrop-blur: 3px;
  --ui-radius-lg: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 12px 32px rgba(55,48,163,.08);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="royal-luxe"][data-theme="dark"] {
  --ui-bg: #11101e;
  --ui-surface: #25233d;
  --ui-surface-elevated: #2c2947;
  --ui-surface-muted: #1a182d;
  --ui-surface-subtle: #151426;
  --ui-border: #4b4868;
  --ui-border-strong: #656180;
  --ui-text: #f5f3ff;
  --ui-text-muted: #c7c3dc;
  --ui-heading: #ffffff;
  --ui-primary: #a5b4fc;
  --ui-primary-strong: #c4b5fd;
  --ui-primary-soft: #312e5f;
  --ui-accent: #fde047;
  --ui-sidebar-bg: #17162d;
  --ui-sidebar-text: #f5f3ff;
  --ui-sidebar-muted: rgba(245,243,255,.62);
  --ui-sidebar-hover: rgba(165,180,252,.09);
  --ui-sidebar-active: rgba(165,180,252,.22);
  --ui-backdrop: rgba(3,2,10,.77);
  --ui-backdrop-blur: 4px;
  --ui-radius-lg: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 14px 38px rgba(0,0,0,.25);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Glass Studio Premium */

:root[data-visual-theme="glass-studio-premium"][data-theme="light"] {
  --ui-bg: #edf4f8;
  --ui-surface: rgba(255,255,255,.82);
  --ui-surface-elevated: rgba(255,255,255,.93);
  --ui-surface-muted: rgba(238,246,250,.78);
  --ui-surface-subtle: rgba(250,253,255,.76);
  --ui-border: rgba(172,194,208,.60);
  --ui-border-strong: rgba(136,166,184,.72);
  --ui-text: #183044;
  --ui-text-muted: #65798a;
  --ui-heading: #0d2132;
  --ui-primary: #3e7fa7;
  --ui-primary-strong: #235f88;
  --ui-primary-soft: #e4f2f8;
  --ui-accent: #b986e7;
  --ui-sidebar-bg: rgba(248,252,255,.72);
  --ui-sidebar-text: #17304a;
  --ui-sidebar-muted: rgba(23,48,74,.62);
  --ui-sidebar-hover: rgba(255,255,255,.14);
  --ui-sidebar-active: rgba(82,164,213,.22);
  --ui-backdrop: rgba(6,14,27,.62);
  --ui-backdrop-blur: 8px;
  --ui-radius-lg: 22px;
  --ui-radius-sm: 14px;
  --ui-shadow-card: 0 18px 48px rgba(24,57,82,.12);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="glass-studio-premium"][data-theme="dark"] {
  --ui-bg: #0a1320;
  --ui-surface: rgba(20,35,52,.80);
  --ui-surface-elevated: rgba(24,42,62,.92);
  --ui-surface-muted: rgba(18,31,47,.78);
  --ui-surface-subtle: rgba(13,25,39,.75);
  --ui-border: rgba(86,112,135,.52);
  --ui-border-strong: rgba(113,144,170,.68);
  --ui-text: #eef7ff;
  --ui-text-muted: #abc1d2;
  --ui-heading: #ffffff;
  --ui-primary: #83c9f4;
  --ui-primary-strong: #b7e0fa;
  --ui-primary-soft: #153b55;
  --ui-accent: #dca4ff;
  --ui-sidebar-bg: rgba(10,23,38,.72);
  --ui-sidebar-text: #eef7ff;
  --ui-sidebar-muted: rgba(238,247,255,.62);
  --ui-sidebar-hover: rgba(255,255,255,.08);
  --ui-sidebar-active: rgba(131,201,244,.22);
  --ui-backdrop: rgba(1,5,12,.72);
  --ui-backdrop-blur: 10px;
  --ui-radius-lg: 22px;
  --ui-radius-sm: 14px;
  --ui-shadow-card: 0 22px 60px rgba(0,0,0,.32);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Nordic Air */

:root[data-visual-theme="nordic-air"][data-theme="light"] {
  --ui-bg: #f7f9fb;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #f1f5f7;
  --ui-surface-subtle: #fbfcfd;
  --ui-border: #dbe3e8;
  --ui-border-strong: #c1ced6;
  --ui-text: #20313c;
  --ui-text-muted: #6a7a84;
  --ui-heading: #12232e;
  --ui-primary: #4b7f9b;
  --ui-primary-strong: #326780;
  --ui-primary-soft: #edf5f8;
  --ui-accent: #d6a63b;
  --ui-sidebar-bg: #ffffff;
  --ui-sidebar-text: #20313c;
  --ui-sidebar-muted: rgba(32,49,60,.60);
  --ui-sidebar-hover: rgba(75,127,155,.06);
  --ui-sidebar-active: rgba(75,127,155,.13);
  --ui-backdrop: rgba(10,20,28,.62);
  --ui-backdrop-blur: 1px;
  --ui-radius-lg: 20px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 9px 26px rgba(26,55,70,.06);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="nordic-air"][data-theme="dark"] {
  --ui-bg: #11191e;
  --ui-surface: #1c282e;
  --ui-surface-elevated: #223037;
  --ui-surface-muted: #172126;
  --ui-surface-subtle: #141d22;
  --ui-border: #3a4c55;
  --ui-border-strong: #536873;
  --ui-text: #edf7fa;
  --ui-text-muted: #b8c7ce;
  --ui-heading: #ffffff;
  --ui-primary: #8bc2d7;
  --ui-primary-strong: #b8dfec;
  --ui-primary-soft: #203a46;
  --ui-accent: #f1c76a;
  --ui-sidebar-bg: #111f26;
  --ui-sidebar-text: #edf7fa;
  --ui-sidebar-muted: rgba(237,247,250,.61);
  --ui-sidebar-hover: rgba(139,194,215,.08);
  --ui-sidebar-active: rgba(139,194,215,.19);
  --ui-backdrop: rgba(2,8,11,.74);
  --ui-backdrop-blur: 2px;
  --ui-radius-lg: 20px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 11px 32px rgba(0,0,0,.20);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Arctic Frost */

:root[data-visual-theme="arctic-frost"][data-theme="light"] {
  --ui-bg: #f8fafc;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #f1f5f9;
  --ui-surface-subtle: #ffffff;
  --ui-border: #dbe3ec;
  --ui-border-strong: #c4d0dc;
  --ui-text: #1e293b;
  --ui-text-muted: #64748b;
  --ui-heading: #0f172a;
  --ui-primary: #3977a8;
  --ui-primary-strong: #245a83;
  --ui-primary-soft: #e9f3fb;
  --ui-accent: #7c9cb7;
  --ui-sidebar-bg: #ffffff;
  --ui-sidebar-text: #1e293b;
  --ui-sidebar-muted: rgba(30,41,59,.59);
  --ui-sidebar-hover: rgba(57,119,168,.055);
  --ui-sidebar-active: rgba(57,119,168,.12);
  --ui-backdrop: rgba(9,15,24,.60);
  --ui-backdrop-blur: 1px;
  --ui-radius-lg: 14px;
  --ui-radius-sm: 8px;
  --ui-shadow-card: 0 7px 22px rgba(15,23,42,.055);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="arctic-frost"][data-theme="dark"] {
  --ui-bg: #0f1722;
  --ui-surface: #1a2532;
  --ui-surface-elevated: #202d3c;
  --ui-surface-muted: #151f2a;
  --ui-surface-subtle: #121a24;
  --ui-border: #344355;
  --ui-border-strong: #4c5e73;
  --ui-text: #f1f5f9;
  --ui-text-muted: #bac5d1;
  --ui-heading: #ffffff;
  --ui-primary: #8fc5ef;
  --ui-primary-strong: #c1ddf5;
  --ui-primary-soft: #213a50;
  --ui-accent: #a7c7df;
  --ui-sidebar-bg: #101b2a;
  --ui-sidebar-text: #f1f5f9;
  --ui-sidebar-muted: rgba(241,245,249,.61);
  --ui-sidebar-hover: rgba(143,197,239,.075);
  --ui-sidebar-active: rgba(143,197,239,.18);
  --ui-backdrop: rgba(2,6,12,.75);
  --ui-backdrop-blur: 2px;
  --ui-radius-lg: 14px;
  --ui-radius-sm: 8px;
  --ui-shadow-card: 0 10px 28px rgba(0,0,0,.21);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Slate Modern */

:root[data-visual-theme="slate-modern"][data-theme="light"] {
  --ui-bg: #f4f6f8;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #eef1f4;
  --ui-surface-subtle: #fafbfc;
  --ui-border: #d8dee6;
  --ui-border-strong: #bec8d3;
  --ui-text: #24303d;
  --ui-text-muted: #687482;
  --ui-heading: #141f2b;
  --ui-primary: #52677d;
  --ui-primary-strong: #394d61;
  --ui-primary-soft: #ebeff3;
  --ui-accent: #0ea5a8;
  --ui-sidebar-bg: #ffffff;
  --ui-sidebar-text: #24303d;
  --ui-sidebar-muted: rgba(36,48,61,.61);
  --ui-sidebar-hover: rgba(82,103,125,.065);
  --ui-sidebar-active: rgba(82,103,125,.14);
  --ui-backdrop: rgba(7,12,18,.65);
  --ui-backdrop-blur: 2px;
  --ui-radius-lg: 15px;
  --ui-radius-sm: 10px;
  --ui-shadow-card: 0 9px 26px rgba(31,43,57,.07);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="slate-modern"][data-theme="dark"] {
  --ui-bg: #10161d;
  --ui-surface: #1b2530;
  --ui-surface-elevated: #212d39;
  --ui-surface-muted: #161f28;
  --ui-surface-subtle: #121922;
  --ui-border: #3b4858;
  --ui-border-strong: #536275;
  --ui-text: #f3f6f9;
  --ui-text-muted: #bdc7d2;
  --ui-heading: #ffffff;
  --ui-primary: #a8b7c7;
  --ui-primary-strong: #d1dae3;
  --ui-primary-soft: #2c3947;
  --ui-accent: #2dd4bf;
  --ui-sidebar-bg: #111923;
  --ui-sidebar-text: #f3f6f9;
  --ui-sidebar-muted: rgba(243,246,249,.61);
  --ui-sidebar-hover: rgba(168,183,199,.08);
  --ui-sidebar-active: rgba(168,183,199,.19);
  --ui-backdrop: rgba(2,5,9,.76);
  --ui-backdrop-blur: 3px;
  --ui-radius-lg: 15px;
  --ui-radius-sm: 10px;
  --ui-shadow-card: 0 11px 32px rgba(0,0,0,.23);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Aurora */

:root[data-visual-theme="aurora"][data-theme="light"] {
  --ui-bg: #f6f5fb;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #f0eff8;
  --ui-surface-subtle: #fbfaff;
  --ui-border: #ddd9ec;
  --ui-border-strong: #c4bddd;
  --ui-text: #25233b;
  --ui-text-muted: #6c6880;
  --ui-heading: #17152c;
  --ui-primary: #5468d4;
  --ui-primary-strong: #3f4fb5;
  --ui-primary-soft: #edefff;
  --ui-accent: #16a3a6;
  --ui-sidebar-bg: #ffffff;
  --ui-sidebar-text: #25233b;
  --ui-sidebar-muted: rgba(37,35,59,.61);
  --ui-sidebar-hover: rgba(84,104,212,.07);
  --ui-sidebar-active: rgba(84,104,212,.15);
  --ui-backdrop: rgba(7,5,19,.66);
  --ui-backdrop-blur: 3px;
  --ui-radius-lg: 20px;
  --ui-radius-sm: 13px;
  --ui-shadow-card: 0 14px 36px rgba(73,65,149,.09);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="aurora"][data-theme="dark"] {
  --ui-bg: #10101c;
  --ui-surface: #23233a;
  --ui-surface-elevated: #2a2944;
  --ui-surface-muted: #1a192d;
  --ui-surface-subtle: #151425;
  --ui-border: #4a4968;
  --ui-border-strong: #636284;
  --ui-text: #f7f5ff;
  --ui-text-muted: #c9c5dc;
  --ui-heading: #ffffff;
  --ui-primary: #a9b6ff;
  --ui-primary-strong: #d0d7ff;
  --ui-primary-soft: #31345f;
  --ui-accent: #5eead4;
  --ui-sidebar-bg: #17162b;
  --ui-sidebar-text: #f7f5ff;
  --ui-sidebar-muted: rgba(247,245,255,.62);
  --ui-sidebar-hover: rgba(169,182,255,.09);
  --ui-sidebar-active: rgba(169,182,255,.22);
  --ui-backdrop: rgba(2,2,9,.77);
  --ui-backdrop-blur: 5px;
  --ui-radius-lg: 20px;
  --ui-radius-sm: 13px;
  --ui-shadow-card: 0 16px 42px rgba(0,0,0,.26);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Sandstone */

:root[data-visual-theme="sandstone"][data-theme="light"] {
  --ui-bg: #faf7f2;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #fffefa;
  --ui-surface-muted: #f4eee6;
  --ui-surface-subtle: #fcfaf7;
  --ui-border: #e5ddd1;
  --ui-border-strong: #cec0ae;
  --ui-text: #332c24;
  --ui-text-muted: #776d62;
  --ui-heading: #251f19;
  --ui-primary: #8a6946;
  --ui-primary-strong: #6f5237;
  --ui-primary-soft: #f6ebdf;
  --ui-accent: #507b91;
  --ui-sidebar-bg: #fffefa;
  --ui-sidebar-text: #332c24;
  --ui-sidebar-muted: rgba(51,44,36,.60);
  --ui-sidebar-hover: rgba(138,105,70,.065);
  --ui-sidebar-active: rgba(138,105,70,.14);
  --ui-backdrop: rgba(15,10,6,.64);
  --ui-backdrop-blur: 1px;
  --ui-radius-lg: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 9px 26px rgba(70,52,34,.07);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="sandstone"][data-theme="dark"] {
  --ui-bg: #171411;
  --ui-surface: #2b251f;
  --ui-surface-elevated: #332c25;
  --ui-surface-muted: #211d19;
  --ui-surface-subtle: #1b1815;
  --ui-border: #574c41;
  --ui-border-strong: #706357;
  --ui-text: #fbf6ef;
  --ui-text-muted: #d3c9bd;
  --ui-heading: #ffffff;
  --ui-primary: #d1aa7f;
  --ui-primary-strong: #edd2b3;
  --ui-primary-soft: #493a2d;
  --ui-accent: #83bfd8;
  --ui-sidebar-bg: #1f1a16;
  --ui-sidebar-text: #fbf6ef;
  --ui-sidebar-muted: rgba(251,246,239,.61);
  --ui-sidebar-hover: rgba(209,170,127,.08);
  --ui-sidebar-active: rgba(209,170,127,.20);
  --ui-backdrop: rgba(6,4,2,.75);
  --ui-backdrop-blur: 2px;
  --ui-radius-lg: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow-card: 0 12px 34px rgba(0,0,0,.23);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}


/* Midnight */

:root[data-visual-theme="midnight"][data-theme="light"] {
  --ui-bg: #f3f5fa;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #edf0f6;
  --ui-surface-subtle: #f9fafc;
  --ui-border: #d7dce7;
  --ui-border-strong: #bcc4d3;
  --ui-text: #20283a;
  --ui-text-muted: #677085;
  --ui-heading: #131a2d;
  --ui-primary: #3f58a8;
  --ui-primary-strong: #2d4288;
  --ui-primary-soft: #e9edfb;
  --ui-accent: #d69a3b;
  --ui-sidebar-bg: #fbfcff;
  --ui-sidebar-text: #20283a;
  --ui-sidebar-muted: rgba(32,40,58,.61);
  --ui-sidebar-hover: rgba(63,88,168,.07);
  --ui-sidebar-active: rgba(63,88,168,.15);
  --ui-backdrop: rgba(5,8,18,.68);
  --ui-backdrop-blur: 3px;
  --ui-radius-lg: 16px;
  --ui-radius-sm: 11px;
  --ui-shadow-card: 0 10px 30px rgba(34,43,82,.08);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}

:root[data-visual-theme="midnight"][data-theme="dark"] {
  --ui-bg: #090d18;
  --ui-surface: #141a2a;
  --ui-surface-elevated: #192135;
  --ui-surface-muted: #101627;
  --ui-surface-subtle: #0d1220;
  --ui-border: #303a53;
  --ui-border-strong: #485675;
  --ui-text: #f4f6ff;
  --ui-text-muted: #aeb8cf;
  --ui-heading: #ffffff;
  --ui-primary: #8da2ff;
  --ui-primary-strong: #c4ceff;
  --ui-primary-soft: #202d5b;
  --ui-accent: #f3bd5d;
  --ui-sidebar-bg: #0b1120;
  --ui-sidebar-text: #f4f6ff;
  --ui-sidebar-muted: rgba(244,246,255,.62);
  --ui-sidebar-hover: rgba(141,162,255,.09);
  --ui-sidebar-active: rgba(141,162,255,.22);
  --ui-backdrop: rgba(0,2,8,.80);
  --ui-backdrop-blur: 5px;
  --ui-radius-lg: 16px;
  --ui-radius-sm: 11px;
  --ui-shadow-card: 0 16px 46px rgba(0,0,0,.31);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-page-glow-a: color-mix(in srgb, var(--ui-primary) 9%, transparent);
  --ui-page-glow-b: color-mix(in srgb, var(--ui-accent) 5%, transparent);
  --ui-shadow-xs: 0 1px 2px color-mix(in srgb, var(--ui-heading) 5%, transparent);
  --ui-shadow-sm: 0 5px 16px color-mix(in srgb, var(--ui-heading) 8%, transparent);
}