/* ============================================================
   ByteBook2000 – Theme-System (generiert: tools/generate_themes.py)
   20 Themes (19 feste + custom), 32 Akzentfarben, hell/dunkel, OLED
   Nicht direkt editieren – Generator neu ausführen!
   ============================================================ */

:root {
  color-scheme: dark;
  --bb-bg: #0d0f14;
  --bb-bg-alt: #11141a;
  --bb-surface: #161922;
  --bb-surface-2: #1e2330;
  --bb-border: #282f3d;
  --bb-text: #e2e6f0;
  --bb-text-dim: #8e99b0;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #6c8cff;
  --bb-accent-hover: color-mix(in srgb, #6c8cff 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #6c8cff 16%, transparent);
    --color-primary-50: #e6eaf9;
  --color-primary-100: #d5dcf6;
  --color-primary-200: #b0bff2;
  --color-primary-300: #8199ef;
  --color-primary-400: #4a6dee;
  --color-primary-500: #6c8cff;
  --color-primary-600: #0a35cc;
  --color-primary-700: #0a2a9e;
  --color-primary-800: #0b2274;
  --color-primary-900: #0b1a51;
  --color-primary-950: #091234;
}

[data-app-theme="default"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #0d0f14;
  --bb-bg-alt: #11141a;
  --bb-surface: #161922;
  --bb-surface-2: #1e2330;
  --bb-border: #282f3d;
  --bb-text: #e2e6f0;
  --bb-text-dim: #8e99b0;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #6c8cff;
  --bb-accent-hover: color-mix(in srgb, #6c8cff 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #6c8cff 16%, transparent);
    --color-primary-50: #e6eaf9;
  --color-primary-100: #d5dcf6;
  --color-primary-200: #b0bff2;
  --color-primary-300: #8199ef;
  --color-primary-400: #4a6dee;
  --color-primary-500: #6c8cff;
  --color-primary-600: #0a35cc;
  --color-primary-700: #0a2a9e;
  --color-primary-800: #0b2274;
  --color-primary-900: #0b1a51;
  --color-primary-950: #091234;
}

[data-app-theme="default"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #f8fafc;
  --bb-bg-alt: #f1f5f9;
  --bb-surface: #ffffff;
  --bb-surface-2: #f8fafc;
  --bb-border: #e2e8f0;
  --bb-text: #0f172a;
  --bb-text-dim: #64748b;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #6c8cff;
  --bb-accent-hover: color-mix(in srgb, #6c8cff 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #6c8cff 16%, transparent);
    --color-primary-50: #f3f5fc;
  --color-primary-100: #eaedfb;
  --color-primary-200: #d8dff8;
  --color-primary-300: #c0ccf7;
  --color-primary-400: #99adf5;
  --color-primary-500: #6c8cff;
  --color-primary-600: #1646f3;
  --color-primary-700: #0d38d3;
  --color-primary-800: #1031a8;
  --color-primary-900: #10287e;
  --color-primary-950: #0f1e57;
}

[data-app-theme="cobalt"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #061121;
  --bb-bg-alt: #0a182e;
  --bb-surface: #0e203c;
  --bb-surface-2: #162c50;
  --bb-border: #1e3a6a;
  --bb-text: #e0edff;
  --bb-text-dim: #8bb5ea;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #3b82f6;
  --bb-accent-hover: color-mix(in srgb, #3b82f6 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #3b82f6 16%, transparent);
    --color-primary-50: #e7eef9;
  --color-primary-100: #d5e2f6;
  --color-primary-200: #b1c9f1;
  --color-primary-300: #82abed;
  --color-primary-400: #4c88eb;
  --color-primary-500: #3b82f6;
  --color-primary-600: #0d55c9;
  --color-primary-700: #0c439c;
  --color-primary-800: #0d3373;
  --color-primary-900: #0c2650;
  --color-primary-950: #091934;
}

[data-app-theme="cobalt"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #f0f7ff;
  --bb-bg-alt: #e0f0fe;
  --bb-surface: #ffffff;
  --bb-surface-2: #f0f7ff;
  --bb-border: #bae0fd;
  --bb-text: #0c2b4e;
  --bb-text-dim: #3a6998;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #3b82f6;
  --bb-accent-hover: color-mix(in srgb, #3b82f6 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #3b82f6 16%, transparent);
    --color-primary-50: #f3f6fc;
  --color-primary-100: #eaf0fa;
  --color-primary-200: #d8e4f8;
  --color-primary-300: #c1d5f6;
  --color-primary-400: #9abcf4;
  --color-primary-500: #3b82f6;
  --color-primary-600: #196bf0;
  --color-primary-700: #1059d0;
  --color-primary-800: #124aa5;
  --color-primary-900: #123b7d;
  --color-primary-950: #102a56;
}

[data-app-theme="ember"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #180c06;
  --bb-bg-alt: #22120a;
  --bb-surface: #2c180e;
  --bb-surface-2: #3a2216;
  --bb-border: #523120;
  --bb-text: #faede6;
  --bb-text-dim: #c49c86;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #f97316;
  --bb-accent-hover: color-mix(in srgb, #f97316 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #f97316 16%, transparent);
    --color-primary-50: #f9eee7;
  --color-primary-100: #f6e3d5;
  --color-primary-200: #f1cbb1;
  --color-primary-300: #eeae82;
  --color-primary-400: #ec8d4b;
  --color-primary-500: #f97316;
  --color-primary-600: #ca5a0c;
  --color-primary-700: #9d470b;
  --color-primary-800: #74360c;
  --color-primary-900: #51280b;
  --color-primary-950: #341b09;
}

[data-app-theme="ember"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #fff7ed;
  --bb-bg-alt: #ffedd5;
  --bb-surface: #ffffff;
  --bb-surface-2: #fff7ed;
  --bb-border: #fed7aa;
  --bb-text: #431407;
  --bb-text-dim: #9a3412;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #f97316;
  --bb-accent-hover: color-mix(in srgb, #f97316 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #f97316 16%, transparent);
    --color-primary-50: #fcf7f3;
  --color-primary-100: #fbf1ea;
  --color-primary-200: #f8e5d8;
  --color-primary-300: #f6d6c0;
  --color-primary-400: #f4bf99;
  --color-primary-500: #f97316;
  --color-primary-600: #f17118;
  --color-primary-700: #d15f0f;
  --color-primary-800: #a64e11;
  --color-primary-900: #7d3e11;
  --color-primary-950: #572d0f;
}

[data-app-theme="crimson"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #18060a;
  --bb-bg-alt: #220a10;
  --bb-surface: #2e0f17;
  --bb-surface-2: #3d1520;
  --bb-border: #571e2e;
  --bb-text: #fae8eb;
  --bb-text-dim: #c78d99;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #e11d48;
  --bb-accent-hover: color-mix(in srgb, #e11d48 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #e11d48 16%, transparent);
    --color-primary-50: #f8e7eb;
  --color-primary-100: #f5d6dd;
  --color-primary-200: #f0b3c0;
  --color-primary-300: #eb859b;
  --color-primary-400: #e84f71;
  --color-primary-500: #e11d48;
  --color-primary-600: #c51239;
  --color-primary-700: #990f2e;
  --color-primary-800: #710f24;
  --color-primary-900: #4f0d1c;
  --color-primary-950: #330a13;
}

[data-app-theme="crimson"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #fff1f2;
  --bb-bg-alt: #ffe4e6;
  --bb-surface: #ffffff;
  --bb-surface-2: #fff1f2;
  --bb-border: #fecdd3;
  --bb-text: #4c0519;
  --bb-text-dim: #9f1239;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #e11d48;
  --bb-accent-hover: color-mix(in srgb, #e11d48 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #e11d48 16%, transparent);
    --color-primary-50: #fcf3f5;
  --color-primary-100: #faeaee;
  --color-primary-200: #f7d9e0;
  --color-primary-300: #f5c2cd;
  --color-primary-400: #f29caf;
  --color-primary-500: #e11d48;
  --color-primary-600: #eb1e4b;
  --color-primary-700: #cc153d;
  --color-primary-800: #a21634;
  --color-primary-900: #7a142b;
  --color-primary-950: #551120;
}

[data-app-theme="rose"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #170810;
  --bb-bg-alt: #220e19;
  --bb-surface: #2d1422;
  --bb-surface-2: #3c1c30;
  --bb-border: #542844;
  --bb-text: #fae8f3;
  --bb-text-dim: #c88fae;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #f43f5e;
  --bb-accent-hover: color-mix(in srgb, #f43f5e 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #f43f5e 16%, transparent);
    --color-primary-50: #f9e7ea;
  --color-primary-100: #f6d5db;
  --color-primary-200: #f1b1bc;
  --color-primary-300: #ed8395;
  --color-primary-400: #eb4c67;
  --color-primary-500: #f43f5e;
  --color-primary-600: #c80e2e;
  --color-primary-700: #9c0d25;
  --color-primary-800: #730d1e;
  --color-primary-900: #500c17;
  --color-primary-950: #340911;
}

[data-app-theme="rose"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #fdf2f8;
  --bb-bg-alt: #fce7f3;
  --bb-surface: #ffffff;
  --bb-surface-2: #fdf2f8;
  --bb-border: #fbcfe8;
  --bb-text: #500724;
  --bb-text-dim: #9d174d;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #f43f5e;
  --bb-accent-hover: color-mix(in srgb, #f43f5e 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #f43f5e 16%, transparent);
    --color-primary-50: #fcf3f4;
  --color-primary-100: #faeaed;
  --color-primary-200: #f8d8de;
  --color-primary-300: #f6c1ca;
  --color-primary-400: #f49aaa;
  --color-primary-500: #f43f5e;
  --color-primary-600: #ef1a3f;
  --color-primary-700: #d01132;
  --color-primary-800: #a5132c;
  --color-primary-900: #7c1225;
  --color-primary-950: #56101c;
}

[data-app-theme="forest"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #07150c;
  --bb-bg-alt: #0b1f13;
  --bb-surface: #102a1b;
  --bb-surface-2: #173b26;
  --bb-border: #235237;
  --bb-text: #e5f7ec;
  --bb-text-dim: #86ba97;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #22c55e;
  --bb-accent-hover: color-mix(in srgb, #22c55e 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #22c55e 16%, transparent);
    --color-primary-50: #e7f8ed;
  --color-primary-100: #d6f5e1;
  --color-primary-200: #b3efc9;
  --color-primary-300: #86e9aa;
  --color-primary-400: #51e688;
  --color-primary-500: #22c55e;
  --color-primary-600: #14c354;
  --color-primary-700: #119742;
  --color-primary-800: #106f33;
  --color-primary-900: #0e4e25;
  --color-primary-950: #0b3219;
}

[data-app-theme="forest"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #f0fdf4;
  --bb-bg-alt: #dcfce7;
  --bb-surface: #ffffff;
  --bb-surface-2: #f0fdf4;
  --bb-border: #bbf7d0;
  --bb-text: #052e16;
  --bb-text-dim: #166534;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #22c55e;
  --bb-accent-hover: color-mix(in srgb, #22c55e 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #22c55e 16%, transparent);
    --color-primary-50: #f3fcf6;
  --color-primary-100: #ebfaf0;
  --color-primary-200: #d9f7e4;
  --color-primary-300: #c2f4d5;
  --color-primary-400: #9df1bc;
  --color-primary-500: #22c55e;
  --color-primary-600: #21e96a;
  --color-primary-700: #17ca59;
  --color-primary-800: #17a04a;
  --color-primary-900: #16793a;
  --color-primary-950: #12542a;
}

[data-app-theme="meadow"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #0f1606;
  --bb-bg-alt: #16200a;
  --bb-surface: #1e2c0e;
  --bb-surface-2: #2a3c15;
  --bb-border: #3c5420;
  --bb-text: #f1f7e4;
  --bb-text-dim: #9fb584;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #84cc16;
  --bb-accent-hover: color-mix(in srgb, #84cc16 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #84cc16 16%, transparent);
    --color-primary-50: #f2f8e7;
  --color-primary-100: #e9f5d6;
  --color-primary-200: #d8f0b2;
  --color-primary-300: #c2eb84;
  --color-primary-400: #ace94f;
  --color-primary-500: #84cc16;
  --color-primary-600: #7ec610;
  --color-primary-700: #639a0f;
  --color-primary-800: #4a710e;
  --color-primary-900: #354f0d;
  --color-primary-950: #23330a;
}

[data-app-theme="meadow"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #f7fee7;
  --bb-bg-alt: #ecfccb;
  --bb-surface: #ffffff;
  --bb-surface-2: #f7fee7;
  --bb-border: #d9f99d;
  --bb-text: #1a2e05;
  --bb-text-dim: #4d7c0f;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #84cc16;
  --bb-accent-hover: color-mix(in srgb, #84cc16 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #84cc16 16%, transparent);
    --color-primary-50: #f8fcf3;
  --color-primary-100: #f4faea;
  --color-primary-200: #ebf7d9;
  --color-primary-300: #e1f5c2;
  --color-primary-400: #d0f29b;
  --color-primary-500: #84cc16;
  --color-primary-600: #9aec1d;
  --color-primary-700: #84cd14;
  --color-primary-800: #6ba315;
  --color-primary-900: #527b14;
  --color-primary-950: #3a5511;
}

[data-app-theme="teal"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #041414;
  --bb-bg-alt: #081d1d;
  --bb-surface: #0e2828;
  --bb-surface-2: #153737;
  --bb-border: #1f4f4f;
  --bb-text: #e0f8f5;
  --bb-text-dim: #7dbdb5;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #14b8a6;
  --bb-accent-hover: color-mix(in srgb, #14b8a6 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #14b8a6 16%, transparent);
    --color-primary-50: #e7f8f6;
  --color-primary-100: #d6f5f2;
  --color-primary-200: #b2f0e9;
  --color-primary-300: #84ebe0;
  --color-primary-400: #4fe8d8;
  --color-primary-500: #14b8a6;
  --color-primary-600: #11c6b2;
  --color-primary-700: #0f9a8a;
  --color-primary-800: #0e7166;
  --color-primary-900: #0d4f48;
  --color-primary-950: #0a332f;
}

[data-app-theme="teal"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #f0fdfa;
  --bb-bg-alt: #ccfbf1;
  --bb-surface: #ffffff;
  --bb-surface-2: #f0fdfa;
  --bb-border: #99f6e4;
  --bb-text: #042f2e;
  --bb-text-dim: #115e59;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #14b8a6;
  --bb-accent-hover: color-mix(in srgb, #14b8a6 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #14b8a6 16%, transparent);
    --color-primary-50: #f3fcfb;
  --color-primary-100: #eafaf8;
  --color-primary-200: #d9f7f4;
  --color-primary-300: #c2f5ef;
  --color-primary-400: #9cf2e9;
  --color-primary-500: #14b8a6;
  --color-primary-600: #1decd5;
  --color-primary-700: #14cdb8;
  --color-primary-800: #15a393;
  --color-primary-900: #147b70;
  --color-primary-950: #11554e;
}

[data-app-theme="lagoon"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #04141a;
  --bb-bg-alt: #081d25;
  --bb-surface: #0c2732;
  --bb-surface-2: #123746;
  --bb-border: #1c4e62;
  --bb-text: #e0f7fc;
  --bb-text-dim: #79bac9;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #06b6d4;
  --bb-accent-hover: color-mix(in srgb, #06b6d4 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #06b6d4 16%, transparent);
    --color-primary-50: #e7f6f9;
  --color-primary-100: #d5f1f6;
  --color-primary-200: #b1e8f1;
  --color-primary-300: #82deee;
  --color-primary-400: #4bd5ec;
  --color-primary-500: #06b6d4;
  --color-primary-600: #0caeca;
  --color-primary-700: #0b889d;
  --color-primary-800: #0c6473;
  --color-primary-900: #0b4751;
  --color-primary-950: #092e34;
}

[data-app-theme="lagoon"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #ecfeff;
  --bb-bg-alt: #cffafe;
  --bb-surface: #ffffff;
  --bb-surface-2: #ecfeff;
  --bb-border: #a5f3fc;
  --bb-text: #083344;
  --bb-text-dim: #155e75;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #06b6d4;
  --bb-accent-hover: color-mix(in srgb, #06b6d4 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #06b6d4 16%, transparent);
    --color-primary-50: #f3fbfc;
  --color-primary-100: #eaf8fb;
  --color-primary-200: #d8f3f8;
  --color-primary-300: #c0eef6;
  --color-primary-400: #99e7f4;
  --color-primary-500: #06b6d4;
  --color-primary-600: #18d1f1;
  --color-primary-700: #0fb5d1;
  --color-primary-800: #1191a6;
  --color-primary-900: #116e7d;
  --color-primary-950: #0f4c57;
}

[data-app-theme="violet"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #100a1c;
  --bb-bg-alt: #170f28;
  --bb-surface: #201637;
  --bb-surface-2: #2b1f49;
  --bb-border: #3e2d67;
  --bb-text: #ede8f8;
  --bb-text-dim: #a494c9;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #8b5cf6;
  --bb-accent-hover: color-mix(in srgb, #8b5cf6 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #8b5cf6 16%, transparent);
    --color-primary-50: #ece7f9;
  --color-primary-100: #dfd5f6;
  --color-primary-200: #c5b1f1;
  --color-primary-300: #a382ed;
  --color-primary-400: #7d4ceb;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #470ec8;
  --color-primary-700: #380d9c;
  --color-primary-800: #2c0d73;
  --color-primary-900: #210c50;
  --color-primary-950: #160934;
}

[data-app-theme="violet"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #f5f3ff;
  --bb-bg-alt: #ede9fe;
  --bb-surface: #ffffff;
  --bb-surface-2: #f5f3ff;
  --bb-border: #ddd6fe;
  --bb-text: #2e1065;
  --bb-text-dim: #6b21a8;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #8b5cf6;
  --bb-accent-hover: color-mix(in srgb, #8b5cf6 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #8b5cf6 16%, transparent);
    --color-primary-50: #f6f3fc;
  --color-primary-100: #efeafa;
  --color-primary-200: #e2d8f8;
  --color-primary-300: #d1c1f6;
  --color-primary-400: #b59af4;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #5b1aef;
  --color-primary-700: #4b11d0;
  --color-primary-800: #3f13a5;
  --color-primary-900: #33127d;
  --color-primary-950: #251056;
}

[data-app-theme="fuchsia"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #160718;
  --bb-bg-alt: #200c24;
  --bb-surface: #2c1231;
  --bb-surface-2: #3c1943;
  --bb-border: #56255f;
  --bb-text: #f9e7fa;
  --bb-text-dim: #be8ec2;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #d946ef;
  --bb-accent-hover: color-mix(in srgb, #d946ef 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #d946ef 16%, transparent);
    --color-primary-50: #f6e7f8;
  --color-primary-100: #f1d6f5;
  --color-primary-200: #e8b2f0;
  --color-primary-300: #de83ec;
  --color-primary-400: #d54ee9;
  --color-primary-500: #d946ef;
  --color-primary-600: #af0fc7;
  --color-primary-700: #880e9a;
  --color-primary-800: #650e72;
  --color-primary-900: #470c4f;
  --color-primary-950: #2e0a33;
}

[data-app-theme="fuchsia"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #fdf4ff;
  --bb-bg-alt: #fae8ff;
  --bb-surface: #ffffff;
  --bb-surface-2: #fdf4ff;
  --bb-border: #f5d0fe;
  --bb-text: #4a044e;
  --bb-text-dim: #86198f;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #d946ef;
  --bb-accent-hover: color-mix(in srgb, #d946ef 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #d946ef 16%, transparent);
    --color-primary-50: #fbf3fc;
  --color-primary-100: #f8eafa;
  --color-primary-200: #f4d8f8;
  --color-primary-300: #efc1f5;
  --color-primary-400: #e79bf3;
  --color-primary-500: #d946ef;
  --color-primary-600: #d21ced;
  --color-primary-700: #b612ce;
  --color-primary-800: #9114a4;
  --color-primary-900: #6e137c;
  --color-primary-950: #4d1056;
}

[data-app-theme="slate"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #0f172a;
  --bb-bg-alt: #1e293b;
  --bb-surface: #334155;
  --bb-surface-2: #475569;
  --bb-border: #64748b;
  --bb-text: #f1f5f9;
  --bb-text-dim: #94a3b8;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #64748b;
  --bb-accent-hover: color-mix(in srgb, #64748b 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #64748b 16%, transparent);
    --color-primary-50: #e9eef6;
  --color-primary-100: #d9e3f2;
  --color-primary-200: #b9cde9;
  --color-primary-300: #8fb0e0;
  --color-primary-400: #5f91d8;
  --color-primary-500: #64748b;
  --color-primary-600: #245eb2;
  --color-primary-700: #1e4a8a;
  --color-primary-800: #193966;
  --color-primary-900: #142948;
  --color-primary-950: #0f1c2f;
}

[data-app-theme="slate"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #f8fafc;
  --bb-bg-alt: #f1f5f9;
  --bb-surface: #ffffff;
  --bb-surface-2: #f8fafc;
  --bb-border: #cbd5e1;
  --bb-text: #0f172a;
  --bb-text-dim: #475569;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #64748b;
  --bb-accent-hover: color-mix(in srgb, #64748b 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #64748b 16%, transparent);
    --color-primary-50: #f4f7fb;
  --color-primary-100: #ecf1f8;
  --color-primary-200: #dce6f4;
  --color-primary-300: #c7d8ef;
  --color-primary-400: #a5c1e9;
  --color-primary-500: #64748b;
  --color-primary-600: #3476d6;
  --color-primary-700: #2863b9;
  --color-primary-800: #245293;
  --color-primary-900: #1f4070;
  --color-primary-950: #182e4e;
}

[data-app-theme="midnight"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #050d1a;
  --bb-bg-alt: #0a1628;
  --bb-surface: #0f2038;
  --bb-surface-2: #162d4e;
  --bb-border: #213f6b;
  --bb-text: #e0fbf7;
  --bb-text-dim: #74b8ae;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #64ffda;
  --bb-accent-hover: color-mix(in srgb, #64ffda 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #64ffda 16%, transparent);
    --color-primary-50: #e6f9f5;
  --color-primary-100: #d5f6ee;
  --color-primary-200: #b0f2e2;
  --color-primary-300: #81efd4;
  --color-primary-400: #4aeec6;
  --color-primary-500: #64ffda;
  --color-primary-600: #0acc9e;
  --color-primary-700: #0a9e7b;
  --color-primary-800: #0b745b;
  --color-primary-900: #0b5140;
  --color-primary-950: #09342a;
}

[data-app-theme="midnight"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #f0f9ff;
  --bb-bg-alt: #e0f2fe;
  --bb-surface: #ffffff;
  --bb-surface-2: #f0f9ff;
  --bb-border: #bae6fd;
  --bb-text: #082f49;
  --bb-text-dim: #0369a1;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #64ffda;
  --bb-accent-hover: color-mix(in srgb, #64ffda 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #64ffda 16%, transparent);
    --color-primary-50: #f3fcfa;
  --color-primary-100: #eafbf7;
  --color-primary-200: #d8f8f1;
  --color-primary-300: #c0f7ea;
  --color-primary-400: #99f5df;
  --color-primary-500: #64ffda;
  --color-primary-600: #16f3be;
  --color-primary-700: #0dd3a4;
  --color-primary-800: #10a883;
  --color-primary-900: #107e64;
  --color-primary-950: #0f5746;
}

[data-app-theme="sunrise"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #150d04;
  --bb-bg-alt: #1f1408;
  --bb-surface: #2a1c0d;
  --bb-surface-2: #382614;
  --bb-border: #50381e;
  --bb-text: #faf3e4;
  --bb-text-dim: #c4a97f;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #fbbf24;
  --bb-accent-hover: color-mix(in srgb, #fbbf24 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #fbbf24 16%, transparent);
    --color-primary-50: #f9f4e7;
  --color-primary-100: #f6edd5;
  --color-primary-200: #f2dfb1;
  --color-primary-300: #eed081;
  --color-primary-400: #edbf4a;
  --color-primary-500: #fbbf24;
  --color-primary-600: #cb950c;
  --color-primary-700: #9d740b;
  --color-primary-800: #74570c;
  --color-primary-900: #513d0b;
  --color-primary-950: #342809;
}

[data-app-theme="sunrise"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #fefce8;
  --bb-bg-alt: #fef9c3;
  --bb-surface: #ffffff;
  --bb-surface-2: #fefce8;
  --bb-border: #fef08a;
  --bb-text: #422006;
  --bb-text-dim: #854d0e;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #fbbf24;
  --bb-accent-hover: color-mix(in srgb, #fbbf24 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #fbbf24 16%, transparent);
    --color-primary-50: #fcf9f3;
  --color-primary-100: #fbf6ea;
  --color-primary-200: #f8efd8;
  --color-primary-300: #f6e7c0;
  --color-primary-400: #f5db99;
  --color-primary-500: #fbbf24;
  --color-primary-600: #f2b517;
  --color-primary-700: #d29b0f;
  --color-primary-800: #a77d11;
  --color-primary-900: #7e5f11;
  --color-primary-950: #57430f;
}

[data-app-theme="nordic"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #0d1117;
  --bb-bg-alt: #161b22;
  --bb-surface: #21262d;
  --bb-surface-2: #30363d;
  --bb-border: #484f58;
  --bb-text: #e6edf3;
  --bb-text-dim: #8b949e;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #88c0d0;
  --bb-accent-hover: color-mix(in srgb, #88c0d0 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #88c0d0 16%, transparent);
    --color-primary-50: #e8f4f7;
  --color-primary-100: #d8edf3;
  --color-primary-200: #b6e0ec;
  --color-primary-300: #8bd1e5;
  --color-primary-400: #58c1df;
  --color-primary-500: #88c0d0;
  --color-primary-600: #1c97ba;
  --color-primary-700: #177691;
  --color-primary-800: #15586b;
  --color-primary-900: #113e4b;
  --color-primary-950: #0d2931;
}

[data-app-theme="nordic"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #eceff4;
  --bb-bg-alt: #e5e9f0;
  --bb-surface: #ffffff;
  --bb-surface-2: #eceff4;
  --bb-border: #d8dee9;
  --bb-text: #2e3440;
  --bb-text-dim: #4c566a;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #88c0d0;
  --bb-accent-hover: color-mix(in srgb, #88c0d0 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #88c0d0 16%, transparent);
    --color-primary-50: #f4f9fb;
  --color-primary-100: #ebf6f9;
  --color-primary-200: #dbf0f6;
  --color-primary-300: #c5e8f2;
  --color-primary-400: #a1dced;
  --color-primary-500: #88c0d0;
  --color-primary-600: #2ab7df;
  --color-primary-700: #1f9dc1;
  --color-primary-800: #1e7e9a;
  --color-primary-900: #1a6074;
  --color-primary-950: #154451;
}

[data-app-theme="mocha"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #1a1008;
  --bb-bg-alt: #24180e;
  --bb-surface: #302116;
  --bb-surface-2: #402d20;
  --bb-border: #583f2e;
  --bb-text: #f9ede3;
  --bb-text-dim: #c09f89;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #d4a96a;
  --bb-accent-hover: color-mix(in srgb, #d4a96a 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #d4a96a 16%, transparent);
    --color-primary-50: #f8f1e8;
  --color-primary-100: #f4e8d7;
  --color-primary-200: #edd6b5;
  --color-primary-300: #e7c088;
  --color-primary-400: #e2a955;
  --color-primary-500: #d4a96a;
  --color-primary-600: #be7b18;
  --color-primary-700: #946015;
  --color-primary-800: #6d4813;
  --color-primary-900: #4c3410;
  --color-primary-950: #31220c;
}

[data-app-theme="mocha"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #faf6f0;
  --bb-bg-alt: #f3ece1;
  --bb-surface: #ffffff;
  --bb-surface-2: #faf6f0;
  --bb-border: #e6dac8;
  --bb-text: #3d2616;
  --bb-text-dim: #784d2a;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #d4a96a;
  --bb-accent-hover: color-mix(in srgb, #d4a96a 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #d4a96a 16%, transparent);
    --color-primary-50: #fbf8f3;
  --color-primary-100: #f9f4eb;
  --color-primary-200: #f6ebda;
  --color-primary-300: #f3e0c4;
  --color-primary-400: #efce9f;
  --color-primary-500: #d4a96a;
  --color-primary-600: #e39626;
  --color-primary-700: #c5801c;
  --color-primary-800: #9d681b;
  --color-primary-900: #775018;
  --color-primary-950: #523914;
}

[data-app-theme="neon"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #020c02;
  --bb-bg-alt: #051405;
  --bb-surface: #0a1f0a;
  --bb-surface-2: #102e10;
  --bb-border: #1a451a;
  --bb-text: #dcfce7;
  --bb-text-dim: #6ee7b7;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #00ff41;
  --bb-accent-hover: color-mix(in srgb, #00ff41 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #00ff41 16%, transparent);
    --color-primary-50: #e6f9eb;
  --color-primary-100: #d5f6dd;
  --color-primary-200: #b0f2c1;
  --color-primary-300: #81ef9d;
  --color-primary-400: #4aee73;
  --color-primary-500: #00ff41;
  --color-primary-600: #0acc3c;
  --color-primary-700: #0a9e30;
  --color-primary-800: #0b7426;
  --color-primary-900: #0b511d;
  --color-primary-950: #093414;
}

[data-app-theme="neon"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #f0fdf4;
  --bb-bg-alt: #dcfce7;
  --bb-surface: #ffffff;
  --bb-surface-2: #f0fdf4;
  --bb-border: #bbf7d0;
  --bb-text: #052e16;
  --bb-text-dim: #15803d;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #00ff41;
  --bb-accent-hover: color-mix(in srgb, #00ff41 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #00ff41 16%, transparent);
    --color-primary-50: #f3fcf5;
  --color-primary-100: #eafbee;
  --color-primary-200: #d8f8e0;
  --color-primary-300: #c0f7ce;
  --color-primary-400: #99f5b0;
  --color-primary-500: #00ff41;
  --color-primary-600: #16f34e;
  --color-primary-700: #0dd340;
  --color-primary-800: #10a837;
  --color-primary-900: #107e2c;
  --color-primary-950: #0f5721;
}

[data-app-theme="sakura"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #140a10;
  --bb-bg-alt: #1c0e18;
  --bb-surface: #271422;
  --bb-surface-2: #361d30;
  --bb-border: #4e2b46;
  --bb-text: #fae8f0;
  --bb-text-dim: #c88fa5;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #f9a8c9;
  --bb-accent-hover: color-mix(in srgb, #f9a8c9 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #f9a8c9 16%, transparent);
    --color-primary-50: #f9e7ee;
  --color-primary-100: #f6d5e3;
  --color-primary-200: #f1b2cb;
  --color-primary-300: #ec83ae;
  --color-primary-400: #ea4d8d;
  --color-primary-500: #f9a8c9;
  --color-primary-600: #c80e5a;
  --color-primary-700: #9b0d47;
  --color-primary-800: #720d36;
  --color-primary-900: #500c28;
  --color-primary-950: #340a1b;
}

[data-app-theme="sakura"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #fff5f7;
  --bb-bg-alt: #ffe4e9;
  --bb-surface: #ffffff;
  --bb-surface-2: #fff5f7;
  --bb-border: #fecdd6;
  --bb-text: #4c0519;
  --bb-text-dim: #9f1239;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #f9a8c9;
  --bb-accent-hover: color-mix(in srgb, #f9a8c9 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #f9a8c9 16%, transparent);
    --color-primary-50: #fcf3f7;
  --color-primary-100: #faeaf1;
  --color-primary-200: #f8d8e5;
  --color-primary-300: #f6c1d6;
  --color-primary-400: #f39bbf;
  --color-primary-500: #f9a8c9;
  --color-primary-600: #ee1b71;
  --color-primary-700: #cf125f;
  --color-primary-800: #a4134e;
  --color-primary-900: #7c133e;
  --color-primary-950: #56102d;
}

[data-app-theme="warmth"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #140e04;
  --bb-bg-alt: #1c1407;
  --bb-surface: #271d0b;
  --bb-surface-2: #362912;
  --bb-border: #4e3c1d;
  --bb-text: #faede3;
  --bb-text-dim: #c29d7e;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
  --bb-accent: #f59e0b;
  --bb-accent-hover: color-mix(in srgb, #f59e0b 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #f59e0b 16%, transparent);
    --color-primary-50: #f9f2e7;
  --color-primary-100: #f6ead5;
  --color-primary-200: #f1d9b1;
  --color-primary-300: #edc582;
  --color-primary-400: #ecb04c;
  --color-primary-500: #f59e0b;
  --color-primary-600: #c9830d;
  --color-primary-700: #9c670c;
  --color-primary-800: #734d0c;
  --color-primary-900: #50370b;
  --color-primary-950: #342409;
}

[data-app-theme="warmth"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #fffbeb;
  --bb-bg-alt: #fef3c7;
  --bb-surface: #ffffff;
  --bb-surface-2: #fffbeb;
  --bb-border: #fde68a;
  --bb-text: #451a03;
  --bb-text-dim: #92400e;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
  --bb-accent: #f59e0b;
  --bb-accent-hover: color-mix(in srgb, #f59e0b 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #f59e0b 16%, transparent);
    --color-primary-50: #fcf9f3;
  --color-primary-100: #faf4ea;
  --color-primary-200: #f8ecd8;
  --color-primary-300: #f6e2c0;
  --color-primary-400: #f4d29a;
  --color-primary-500: #f59e0b;
  --color-primary-600: #f0a019;
  --color-primary-700: #d08910;
  --color-primary-800: #a66f12;
  --color-primary-900: #7d5512;
  --color-primary-950: #573c0f;
}

[data-app-theme="high-contrast"][data-mode="dark"] {
  color-scheme: dark;
  --bb-bg: #000000;
  --bb-bg-alt: #000000;
  --bb-surface: #000000;
  --bb-surface-2: #0a0a0a;
  --bb-border: #ffffff;
  --bb-text: #ffffff;
  --bb-text-dim: #f0f0f0;
  --bb-shadow-sm: 0 0 0 1px #ffffff;
  --bb-shadow-md: 0 0 0 2px #ffffff;
  --bb-shadow-lg: 0 0 0 3px #ffffff;
  --bb-shadow: 0 0 0 2px #ffffff;
  --bb-scrollbar-thumb: #ffe600;
  --bb-scrollbar-thumb-hover: #ffff55;
  --bb-scrollbar-track: #000000;
  --bb-accent: #ffe600;
  --bb-accent-hover: color-mix(in srgb, #ffe600 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #ffe600 16%, transparent);
    --color-primary-50: #f9f7e6;
  --color-primary-100: #f6f3d5;
  --color-primary-200: #f2ebb0;
  --color-primary-300: #efe481;
  --color-primary-400: #eede4a;
  --color-primary-500: #ffe600;
  --color-primary-600: #ccb90a;
  --color-primary-700: #9e900a;
  --color-primary-800: #746a0b;
  --color-primary-900: #514a0b;
  --color-primary-950: #343009;
}

[data-app-theme="high-contrast"][data-mode="light"] {
  color-scheme: light;
  --bb-bg: #ffffff;
  --bb-bg-alt: #ffffff;
  --bb-surface: #ffffff;
  --bb-surface-2: #f5f5f5;
  --bb-border: #000000;
  --bb-text: #000000;
  --bb-text-dim: #111111;
  --bb-shadow-sm: 0 0 0 1px #000000;
  --bb-shadow-md: 0 0 0 2px #000000;
  --bb-shadow-lg: 0 0 0 3px #000000;
  --bb-shadow: 0 0 0 2px #000000;
  --bb-scrollbar-thumb: #000000;
  --bb-scrollbar-thumb-hover: #333333;
  --bb-scrollbar-track: #ffffff;
  --bb-accent: #ffe600;
  --bb-accent-hover: color-mix(in srgb, #ffe600 86%, #000);
  --bb-accent-soft: color-mix(in srgb, #ffe600 16%, transparent);
    --color-primary-50: #fcfbf3;
  --color-primary-100: #fbf9ea;
  --color-primary-200: #f8f5d8;
  --color-primary-300: #f7f1c0;
  --color-primary-400: #f5ec99;
  --color-primary-500: #ffe600;
  --color-primary-600: #f3dd16;
  --color-primary-700: #d3c00d;
  --color-primary-800: #a89910;
  --color-primary-900: #7e7410;
  --color-primary-950: #57500f;
}

[data-mode="system"] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  [data-app-theme="default"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #0d0f14;
    --bb-bg-alt: #11141a;
    --bb-surface: #161922;
    --bb-surface-2: #1e2330;
    --bb-border: #282f3d;
    --bb-text: #e2e6f0;
    --bb-text-dim: #8e99b0;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #6c8cff;
    --bb-accent-hover: color-mix(in srgb, #6c8cff 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #6c8cff 16%, transparent);
        --color-primary-50: #e6eaf9;
    --color-primary-100: #d5dcf6;
    --color-primary-200: #b0bff2;
    --color-primary-300: #8199ef;
    --color-primary-400: #4a6dee;
    --color-primary-500: #6c8cff;
    --color-primary-600: #0a35cc;
    --color-primary-700: #0a2a9e;
    --color-primary-800: #0b2274;
    --color-primary-900: #0b1a51;
    --color-primary-950: #091234;
  }
  [data-app-theme="cobalt"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #061121;
    --bb-bg-alt: #0a182e;
    --bb-surface: #0e203c;
    --bb-surface-2: #162c50;
    --bb-border: #1e3a6a;
    --bb-text: #e0edff;
    --bb-text-dim: #8bb5ea;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #3b82f6;
    --bb-accent-hover: color-mix(in srgb, #3b82f6 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #3b82f6 16%, transparent);
        --color-primary-50: #e7eef9;
    --color-primary-100: #d5e2f6;
    --color-primary-200: #b1c9f1;
    --color-primary-300: #82abed;
    --color-primary-400: #4c88eb;
    --color-primary-500: #3b82f6;
    --color-primary-600: #0d55c9;
    --color-primary-700: #0c439c;
    --color-primary-800: #0d3373;
    --color-primary-900: #0c2650;
    --color-primary-950: #091934;
  }
  [data-app-theme="ember"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #180c06;
    --bb-bg-alt: #22120a;
    --bb-surface: #2c180e;
    --bb-surface-2: #3a2216;
    --bb-border: #523120;
    --bb-text: #faede6;
    --bb-text-dim: #c49c86;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #f97316;
    --bb-accent-hover: color-mix(in srgb, #f97316 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #f97316 16%, transparent);
        --color-primary-50: #f9eee7;
    --color-primary-100: #f6e3d5;
    --color-primary-200: #f1cbb1;
    --color-primary-300: #eeae82;
    --color-primary-400: #ec8d4b;
    --color-primary-500: #f97316;
    --color-primary-600: #ca5a0c;
    --color-primary-700: #9d470b;
    --color-primary-800: #74360c;
    --color-primary-900: #51280b;
    --color-primary-950: #341b09;
  }
  [data-app-theme="crimson"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #18060a;
    --bb-bg-alt: #220a10;
    --bb-surface: #2e0f17;
    --bb-surface-2: #3d1520;
    --bb-border: #571e2e;
    --bb-text: #fae8eb;
    --bb-text-dim: #c78d99;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #e11d48;
    --bb-accent-hover: color-mix(in srgb, #e11d48 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #e11d48 16%, transparent);
        --color-primary-50: #f8e7eb;
    --color-primary-100: #f5d6dd;
    --color-primary-200: #f0b3c0;
    --color-primary-300: #eb859b;
    --color-primary-400: #e84f71;
    --color-primary-500: #e11d48;
    --color-primary-600: #c51239;
    --color-primary-700: #990f2e;
    --color-primary-800: #710f24;
    --color-primary-900: #4f0d1c;
    --color-primary-950: #330a13;
  }
  [data-app-theme="rose"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #170810;
    --bb-bg-alt: #220e19;
    --bb-surface: #2d1422;
    --bb-surface-2: #3c1c30;
    --bb-border: #542844;
    --bb-text: #fae8f3;
    --bb-text-dim: #c88fae;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #f43f5e;
    --bb-accent-hover: color-mix(in srgb, #f43f5e 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #f43f5e 16%, transparent);
        --color-primary-50: #f9e7ea;
    --color-primary-100: #f6d5db;
    --color-primary-200: #f1b1bc;
    --color-primary-300: #ed8395;
    --color-primary-400: #eb4c67;
    --color-primary-500: #f43f5e;
    --color-primary-600: #c80e2e;
    --color-primary-700: #9c0d25;
    --color-primary-800: #730d1e;
    --color-primary-900: #500c17;
    --color-primary-950: #340911;
  }
  [data-app-theme="forest"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #07150c;
    --bb-bg-alt: #0b1f13;
    --bb-surface: #102a1b;
    --bb-surface-2: #173b26;
    --bb-border: #235237;
    --bb-text: #e5f7ec;
    --bb-text-dim: #86ba97;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #22c55e;
    --bb-accent-hover: color-mix(in srgb, #22c55e 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #22c55e 16%, transparent);
        --color-primary-50: #e7f8ed;
    --color-primary-100: #d6f5e1;
    --color-primary-200: #b3efc9;
    --color-primary-300: #86e9aa;
    --color-primary-400: #51e688;
    --color-primary-500: #22c55e;
    --color-primary-600: #14c354;
    --color-primary-700: #119742;
    --color-primary-800: #106f33;
    --color-primary-900: #0e4e25;
    --color-primary-950: #0b3219;
  }
  [data-app-theme="meadow"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #0f1606;
    --bb-bg-alt: #16200a;
    --bb-surface: #1e2c0e;
    --bb-surface-2: #2a3c15;
    --bb-border: #3c5420;
    --bb-text: #f1f7e4;
    --bb-text-dim: #9fb584;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #84cc16;
    --bb-accent-hover: color-mix(in srgb, #84cc16 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #84cc16 16%, transparent);
        --color-primary-50: #f2f8e7;
    --color-primary-100: #e9f5d6;
    --color-primary-200: #d8f0b2;
    --color-primary-300: #c2eb84;
    --color-primary-400: #ace94f;
    --color-primary-500: #84cc16;
    --color-primary-600: #7ec610;
    --color-primary-700: #639a0f;
    --color-primary-800: #4a710e;
    --color-primary-900: #354f0d;
    --color-primary-950: #23330a;
  }
  [data-app-theme="teal"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #041414;
    --bb-bg-alt: #081d1d;
    --bb-surface: #0e2828;
    --bb-surface-2: #153737;
    --bb-border: #1f4f4f;
    --bb-text: #e0f8f5;
    --bb-text-dim: #7dbdb5;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #14b8a6;
    --bb-accent-hover: color-mix(in srgb, #14b8a6 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #14b8a6 16%, transparent);
        --color-primary-50: #e7f8f6;
    --color-primary-100: #d6f5f2;
    --color-primary-200: #b2f0e9;
    --color-primary-300: #84ebe0;
    --color-primary-400: #4fe8d8;
    --color-primary-500: #14b8a6;
    --color-primary-600: #11c6b2;
    --color-primary-700: #0f9a8a;
    --color-primary-800: #0e7166;
    --color-primary-900: #0d4f48;
    --color-primary-950: #0a332f;
  }
  [data-app-theme="lagoon"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #04141a;
    --bb-bg-alt: #081d25;
    --bb-surface: #0c2732;
    --bb-surface-2: #123746;
    --bb-border: #1c4e62;
    --bb-text: #e0f7fc;
    --bb-text-dim: #79bac9;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #06b6d4;
    --bb-accent-hover: color-mix(in srgb, #06b6d4 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #06b6d4 16%, transparent);
        --color-primary-50: #e7f6f9;
    --color-primary-100: #d5f1f6;
    --color-primary-200: #b1e8f1;
    --color-primary-300: #82deee;
    --color-primary-400: #4bd5ec;
    --color-primary-500: #06b6d4;
    --color-primary-600: #0caeca;
    --color-primary-700: #0b889d;
    --color-primary-800: #0c6473;
    --color-primary-900: #0b4751;
    --color-primary-950: #092e34;
  }
  [data-app-theme="violet"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #100a1c;
    --bb-bg-alt: #170f28;
    --bb-surface: #201637;
    --bb-surface-2: #2b1f49;
    --bb-border: #3e2d67;
    --bb-text: #ede8f8;
    --bb-text-dim: #a494c9;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #8b5cf6;
    --bb-accent-hover: color-mix(in srgb, #8b5cf6 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #8b5cf6 16%, transparent);
        --color-primary-50: #ece7f9;
    --color-primary-100: #dfd5f6;
    --color-primary-200: #c5b1f1;
    --color-primary-300: #a382ed;
    --color-primary-400: #7d4ceb;
    --color-primary-500: #8b5cf6;
    --color-primary-600: #470ec8;
    --color-primary-700: #380d9c;
    --color-primary-800: #2c0d73;
    --color-primary-900: #210c50;
    --color-primary-950: #160934;
  }
  [data-app-theme="fuchsia"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #160718;
    --bb-bg-alt: #200c24;
    --bb-surface: #2c1231;
    --bb-surface-2: #3c1943;
    --bb-border: #56255f;
    --bb-text: #f9e7fa;
    --bb-text-dim: #be8ec2;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #d946ef;
    --bb-accent-hover: color-mix(in srgb, #d946ef 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #d946ef 16%, transparent);
        --color-primary-50: #f6e7f8;
    --color-primary-100: #f1d6f5;
    --color-primary-200: #e8b2f0;
    --color-primary-300: #de83ec;
    --color-primary-400: #d54ee9;
    --color-primary-500: #d946ef;
    --color-primary-600: #af0fc7;
    --color-primary-700: #880e9a;
    --color-primary-800: #650e72;
    --color-primary-900: #470c4f;
    --color-primary-950: #2e0a33;
  }
  [data-app-theme="slate"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #0f172a;
    --bb-bg-alt: #1e293b;
    --bb-surface: #334155;
    --bb-surface-2: #475569;
    --bb-border: #64748b;
    --bb-text: #f1f5f9;
    --bb-text-dim: #94a3b8;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #64748b;
    --bb-accent-hover: color-mix(in srgb, #64748b 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #64748b 16%, transparent);
        --color-primary-50: #e9eef6;
    --color-primary-100: #d9e3f2;
    --color-primary-200: #b9cde9;
    --color-primary-300: #8fb0e0;
    --color-primary-400: #5f91d8;
    --color-primary-500: #64748b;
    --color-primary-600: #245eb2;
    --color-primary-700: #1e4a8a;
    --color-primary-800: #193966;
    --color-primary-900: #142948;
    --color-primary-950: #0f1c2f;
  }
  [data-app-theme="midnight"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #050d1a;
    --bb-bg-alt: #0a1628;
    --bb-surface: #0f2038;
    --bb-surface-2: #162d4e;
    --bb-border: #213f6b;
    --bb-text: #e0fbf7;
    --bb-text-dim: #74b8ae;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #64ffda;
    --bb-accent-hover: color-mix(in srgb, #64ffda 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #64ffda 16%, transparent);
        --color-primary-50: #e6f9f5;
    --color-primary-100: #d5f6ee;
    --color-primary-200: #b0f2e2;
    --color-primary-300: #81efd4;
    --color-primary-400: #4aeec6;
    --color-primary-500: #64ffda;
    --color-primary-600: #0acc9e;
    --color-primary-700: #0a9e7b;
    --color-primary-800: #0b745b;
    --color-primary-900: #0b5140;
    --color-primary-950: #09342a;
  }
  [data-app-theme="sunrise"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #150d04;
    --bb-bg-alt: #1f1408;
    --bb-surface: #2a1c0d;
    --bb-surface-2: #382614;
    --bb-border: #50381e;
    --bb-text: #faf3e4;
    --bb-text-dim: #c4a97f;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #fbbf24;
    --bb-accent-hover: color-mix(in srgb, #fbbf24 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #fbbf24 16%, transparent);
        --color-primary-50: #f9f4e7;
    --color-primary-100: #f6edd5;
    --color-primary-200: #f2dfb1;
    --color-primary-300: #eed081;
    --color-primary-400: #edbf4a;
    --color-primary-500: #fbbf24;
    --color-primary-600: #cb950c;
    --color-primary-700: #9d740b;
    --color-primary-800: #74570c;
    --color-primary-900: #513d0b;
    --color-primary-950: #342809;
  }
  [data-app-theme="nordic"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #0d1117;
    --bb-bg-alt: #161b22;
    --bb-surface: #21262d;
    --bb-surface-2: #30363d;
    --bb-border: #484f58;
    --bb-text: #e6edf3;
    --bb-text-dim: #8b949e;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #88c0d0;
    --bb-accent-hover: color-mix(in srgb, #88c0d0 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #88c0d0 16%, transparent);
        --color-primary-50: #e8f4f7;
    --color-primary-100: #d8edf3;
    --color-primary-200: #b6e0ec;
    --color-primary-300: #8bd1e5;
    --color-primary-400: #58c1df;
    --color-primary-500: #88c0d0;
    --color-primary-600: #1c97ba;
    --color-primary-700: #177691;
    --color-primary-800: #15586b;
    --color-primary-900: #113e4b;
    --color-primary-950: #0d2931;
  }
  [data-app-theme="mocha"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #1a1008;
    --bb-bg-alt: #24180e;
    --bb-surface: #302116;
    --bb-surface-2: #402d20;
    --bb-border: #583f2e;
    --bb-text: #f9ede3;
    --bb-text-dim: #c09f89;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #d4a96a;
    --bb-accent-hover: color-mix(in srgb, #d4a96a 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #d4a96a 16%, transparent);
        --color-primary-50: #f8f1e8;
    --color-primary-100: #f4e8d7;
    --color-primary-200: #edd6b5;
    --color-primary-300: #e7c088;
    --color-primary-400: #e2a955;
    --color-primary-500: #d4a96a;
    --color-primary-600: #be7b18;
    --color-primary-700: #946015;
    --color-primary-800: #6d4813;
    --color-primary-900: #4c3410;
    --color-primary-950: #31220c;
  }
  [data-app-theme="neon"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #020c02;
    --bb-bg-alt: #051405;
    --bb-surface: #0a1f0a;
    --bb-surface-2: #102e10;
    --bb-border: #1a451a;
    --bb-text: #dcfce7;
    --bb-text-dim: #6ee7b7;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #00ff41;
    --bb-accent-hover: color-mix(in srgb, #00ff41 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #00ff41 16%, transparent);
        --color-primary-50: #e6f9eb;
    --color-primary-100: #d5f6dd;
    --color-primary-200: #b0f2c1;
    --color-primary-300: #81ef9d;
    --color-primary-400: #4aee73;
    --color-primary-500: #00ff41;
    --color-primary-600: #0acc3c;
    --color-primary-700: #0a9e30;
    --color-primary-800: #0b7426;
    --color-primary-900: #0b511d;
    --color-primary-950: #093414;
  }
  [data-app-theme="sakura"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #140a10;
    --bb-bg-alt: #1c0e18;
    --bb-surface: #271422;
    --bb-surface-2: #361d30;
    --bb-border: #4e2b46;
    --bb-text: #fae8f0;
    --bb-text-dim: #c88fa5;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #f9a8c9;
    --bb-accent-hover: color-mix(in srgb, #f9a8c9 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #f9a8c9 16%, transparent);
        --color-primary-50: #f9e7ee;
    --color-primary-100: #f6d5e3;
    --color-primary-200: #f1b2cb;
    --color-primary-300: #ec83ae;
    --color-primary-400: #ea4d8d;
    --color-primary-500: #f9a8c9;
    --color-primary-600: #c80e5a;
    --color-primary-700: #9b0d47;
    --color-primary-800: #720d36;
    --color-primary-900: #500c28;
    --color-primary-950: #340a1b;
  }
  [data-app-theme="warmth"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #140e04;
    --bb-bg-alt: #1c1407;
    --bb-surface: #271d0b;
    --bb-surface-2: #362912;
    --bb-border: #4e3c1d;
    --bb-text: #faede3;
    --bb-text-dim: #c29d7e;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
    --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
    --bb-accent: #f59e0b;
    --bb-accent-hover: color-mix(in srgb, #f59e0b 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #f59e0b 16%, transparent);
        --color-primary-50: #f9f2e7;
    --color-primary-100: #f6ead5;
    --color-primary-200: #f1d9b1;
    --color-primary-300: #edc582;
    --color-primary-400: #ecb04c;
    --color-primary-500: #f59e0b;
    --color-primary-600: #c9830d;
    --color-primary-700: #9c670c;
    --color-primary-800: #734d0c;
    --color-primary-900: #50370b;
    --color-primary-950: #342409;
  }
  [data-app-theme="high-contrast"][data-mode="system"] {
    color-scheme: dark;
    --bb-bg: #000000;
    --bb-bg-alt: #000000;
    --bb-surface: #000000;
    --bb-surface-2: #0a0a0a;
    --bb-border: #ffffff;
    --bb-text: #ffffff;
    --bb-text-dim: #f0f0f0;
    --bb-shadow-sm: 0 0 0 1px #ffffff;
    --bb-shadow-md: 0 0 0 2px #ffffff;
    --bb-shadow-lg: 0 0 0 3px #ffffff;
    --bb-shadow: 0 0 0 2px #ffffff;
    --bb-scrollbar-thumb: #ffe600;
    --bb-scrollbar-thumb-hover: #ffff55;
    --bb-scrollbar-track: #000000;
    --bb-accent: #ffe600;
    --bb-accent-hover: color-mix(in srgb, #ffe600 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #ffe600 16%, transparent);
        --color-primary-50: #f9f7e6;
    --color-primary-100: #f6f3d5;
    --color-primary-200: #f2ebb0;
    --color-primary-300: #efe481;
    --color-primary-400: #eede4a;
    --color-primary-500: #ffe600;
    --color-primary-600: #ccb90a;
    --color-primary-700: #9e900a;
    --color-primary-800: #746a0b;
    --color-primary-900: #514a0b;
    --color-primary-950: #343009;
  }
}

@media (prefers-color-scheme: light) {
  [data-app-theme="default"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #f8fafc;
    --bb-bg-alt: #f1f5f9;
    --bb-surface: #ffffff;
    --bb-surface-2: #f8fafc;
    --bb-border: #e2e8f0;
    --bb-text: #0f172a;
    --bb-text-dim: #64748b;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #6c8cff;
    --bb-accent-hover: color-mix(in srgb, #6c8cff 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #6c8cff 16%, transparent);
        --color-primary-50: #f3f5fc;
    --color-primary-100: #eaedfb;
    --color-primary-200: #d8dff8;
    --color-primary-300: #c0ccf7;
    --color-primary-400: #99adf5;
    --color-primary-500: #6c8cff;
    --color-primary-600: #1646f3;
    --color-primary-700: #0d38d3;
    --color-primary-800: #1031a8;
    --color-primary-900: #10287e;
    --color-primary-950: #0f1e57;
  }
  [data-app-theme="cobalt"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #f0f7ff;
    --bb-bg-alt: #e0f0fe;
    --bb-surface: #ffffff;
    --bb-surface-2: #f0f7ff;
    --bb-border: #bae0fd;
    --bb-text: #0c2b4e;
    --bb-text-dim: #3a6998;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #3b82f6;
    --bb-accent-hover: color-mix(in srgb, #3b82f6 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #3b82f6 16%, transparent);
        --color-primary-50: #f3f6fc;
    --color-primary-100: #eaf0fa;
    --color-primary-200: #d8e4f8;
    --color-primary-300: #c1d5f6;
    --color-primary-400: #9abcf4;
    --color-primary-500: #3b82f6;
    --color-primary-600: #196bf0;
    --color-primary-700: #1059d0;
    --color-primary-800: #124aa5;
    --color-primary-900: #123b7d;
    --color-primary-950: #102a56;
  }
  [data-app-theme="ember"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #fff7ed;
    --bb-bg-alt: #ffedd5;
    --bb-surface: #ffffff;
    --bb-surface-2: #fff7ed;
    --bb-border: #fed7aa;
    --bb-text: #431407;
    --bb-text-dim: #9a3412;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #f97316;
    --bb-accent-hover: color-mix(in srgb, #f97316 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #f97316 16%, transparent);
        --color-primary-50: #fcf7f3;
    --color-primary-100: #fbf1ea;
    --color-primary-200: #f8e5d8;
    --color-primary-300: #f6d6c0;
    --color-primary-400: #f4bf99;
    --color-primary-500: #f97316;
    --color-primary-600: #f17118;
    --color-primary-700: #d15f0f;
    --color-primary-800: #a64e11;
    --color-primary-900: #7d3e11;
    --color-primary-950: #572d0f;
  }
  [data-app-theme="crimson"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #fff1f2;
    --bb-bg-alt: #ffe4e6;
    --bb-surface: #ffffff;
    --bb-surface-2: #fff1f2;
    --bb-border: #fecdd3;
    --bb-text: #4c0519;
    --bb-text-dim: #9f1239;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #e11d48;
    --bb-accent-hover: color-mix(in srgb, #e11d48 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #e11d48 16%, transparent);
        --color-primary-50: #fcf3f5;
    --color-primary-100: #faeaee;
    --color-primary-200: #f7d9e0;
    --color-primary-300: #f5c2cd;
    --color-primary-400: #f29caf;
    --color-primary-500: #e11d48;
    --color-primary-600: #eb1e4b;
    --color-primary-700: #cc153d;
    --color-primary-800: #a21634;
    --color-primary-900: #7a142b;
    --color-primary-950: #551120;
  }
  [data-app-theme="rose"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #fdf2f8;
    --bb-bg-alt: #fce7f3;
    --bb-surface: #ffffff;
    --bb-surface-2: #fdf2f8;
    --bb-border: #fbcfe8;
    --bb-text: #500724;
    --bb-text-dim: #9d174d;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #f43f5e;
    --bb-accent-hover: color-mix(in srgb, #f43f5e 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #f43f5e 16%, transparent);
        --color-primary-50: #fcf3f4;
    --color-primary-100: #faeaed;
    --color-primary-200: #f8d8de;
    --color-primary-300: #f6c1ca;
    --color-primary-400: #f49aaa;
    --color-primary-500: #f43f5e;
    --color-primary-600: #ef1a3f;
    --color-primary-700: #d01132;
    --color-primary-800: #a5132c;
    --color-primary-900: #7c1225;
    --color-primary-950: #56101c;
  }
  [data-app-theme="forest"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #f0fdf4;
    --bb-bg-alt: #dcfce7;
    --bb-surface: #ffffff;
    --bb-surface-2: #f0fdf4;
    --bb-border: #bbf7d0;
    --bb-text: #052e16;
    --bb-text-dim: #166534;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #22c55e;
    --bb-accent-hover: color-mix(in srgb, #22c55e 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #22c55e 16%, transparent);
        --color-primary-50: #f3fcf6;
    --color-primary-100: #ebfaf0;
    --color-primary-200: #d9f7e4;
    --color-primary-300: #c2f4d5;
    --color-primary-400: #9df1bc;
    --color-primary-500: #22c55e;
    --color-primary-600: #21e96a;
    --color-primary-700: #17ca59;
    --color-primary-800: #17a04a;
    --color-primary-900: #16793a;
    --color-primary-950: #12542a;
  }
  [data-app-theme="meadow"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #f7fee7;
    --bb-bg-alt: #ecfccb;
    --bb-surface: #ffffff;
    --bb-surface-2: #f7fee7;
    --bb-border: #d9f99d;
    --bb-text: #1a2e05;
    --bb-text-dim: #4d7c0f;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #84cc16;
    --bb-accent-hover: color-mix(in srgb, #84cc16 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #84cc16 16%, transparent);
        --color-primary-50: #f8fcf3;
    --color-primary-100: #f4faea;
    --color-primary-200: #ebf7d9;
    --color-primary-300: #e1f5c2;
    --color-primary-400: #d0f29b;
    --color-primary-500: #84cc16;
    --color-primary-600: #9aec1d;
    --color-primary-700: #84cd14;
    --color-primary-800: #6ba315;
    --color-primary-900: #527b14;
    --color-primary-950: #3a5511;
  }
  [data-app-theme="teal"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #f0fdfa;
    --bb-bg-alt: #ccfbf1;
    --bb-surface: #ffffff;
    --bb-surface-2: #f0fdfa;
    --bb-border: #99f6e4;
    --bb-text: #042f2e;
    --bb-text-dim: #115e59;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #14b8a6;
    --bb-accent-hover: color-mix(in srgb, #14b8a6 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #14b8a6 16%, transparent);
        --color-primary-50: #f3fcfb;
    --color-primary-100: #eafaf8;
    --color-primary-200: #d9f7f4;
    --color-primary-300: #c2f5ef;
    --color-primary-400: #9cf2e9;
    --color-primary-500: #14b8a6;
    --color-primary-600: #1decd5;
    --color-primary-700: #14cdb8;
    --color-primary-800: #15a393;
    --color-primary-900: #147b70;
    --color-primary-950: #11554e;
  }
  [data-app-theme="lagoon"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #ecfeff;
    --bb-bg-alt: #cffafe;
    --bb-surface: #ffffff;
    --bb-surface-2: #ecfeff;
    --bb-border: #a5f3fc;
    --bb-text: #083344;
    --bb-text-dim: #155e75;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #06b6d4;
    --bb-accent-hover: color-mix(in srgb, #06b6d4 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #06b6d4 16%, transparent);
        --color-primary-50: #f3fbfc;
    --color-primary-100: #eaf8fb;
    --color-primary-200: #d8f3f8;
    --color-primary-300: #c0eef6;
    --color-primary-400: #99e7f4;
    --color-primary-500: #06b6d4;
    --color-primary-600: #18d1f1;
    --color-primary-700: #0fb5d1;
    --color-primary-800: #1191a6;
    --color-primary-900: #116e7d;
    --color-primary-950: #0f4c57;
  }
  [data-app-theme="violet"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #f5f3ff;
    --bb-bg-alt: #ede9fe;
    --bb-surface: #ffffff;
    --bb-surface-2: #f5f3ff;
    --bb-border: #ddd6fe;
    --bb-text: #2e1065;
    --bb-text-dim: #6b21a8;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #8b5cf6;
    --bb-accent-hover: color-mix(in srgb, #8b5cf6 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #8b5cf6 16%, transparent);
        --color-primary-50: #f6f3fc;
    --color-primary-100: #efeafa;
    --color-primary-200: #e2d8f8;
    --color-primary-300: #d1c1f6;
    --color-primary-400: #b59af4;
    --color-primary-500: #8b5cf6;
    --color-primary-600: #5b1aef;
    --color-primary-700: #4b11d0;
    --color-primary-800: #3f13a5;
    --color-primary-900: #33127d;
    --color-primary-950: #251056;
  }
  [data-app-theme="fuchsia"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #fdf4ff;
    --bb-bg-alt: #fae8ff;
    --bb-surface: #ffffff;
    --bb-surface-2: #fdf4ff;
    --bb-border: #f5d0fe;
    --bb-text: #4a044e;
    --bb-text-dim: #86198f;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #d946ef;
    --bb-accent-hover: color-mix(in srgb, #d946ef 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #d946ef 16%, transparent);
        --color-primary-50: #fbf3fc;
    --color-primary-100: #f8eafa;
    --color-primary-200: #f4d8f8;
    --color-primary-300: #efc1f5;
    --color-primary-400: #e79bf3;
    --color-primary-500: #d946ef;
    --color-primary-600: #d21ced;
    --color-primary-700: #b612ce;
    --color-primary-800: #9114a4;
    --color-primary-900: #6e137c;
    --color-primary-950: #4d1056;
  }
  [data-app-theme="slate"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #f8fafc;
    --bb-bg-alt: #f1f5f9;
    --bb-surface: #ffffff;
    --bb-surface-2: #f8fafc;
    --bb-border: #cbd5e1;
    --bb-text: #0f172a;
    --bb-text-dim: #475569;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #64748b;
    --bb-accent-hover: color-mix(in srgb, #64748b 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #64748b 16%, transparent);
        --color-primary-50: #f4f7fb;
    --color-primary-100: #ecf1f8;
    --color-primary-200: #dce6f4;
    --color-primary-300: #c7d8ef;
    --color-primary-400: #a5c1e9;
    --color-primary-500: #64748b;
    --color-primary-600: #3476d6;
    --color-primary-700: #2863b9;
    --color-primary-800: #245293;
    --color-primary-900: #1f4070;
    --color-primary-950: #182e4e;
  }
  [data-app-theme="midnight"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #f0f9ff;
    --bb-bg-alt: #e0f2fe;
    --bb-surface: #ffffff;
    --bb-surface-2: #f0f9ff;
    --bb-border: #bae6fd;
    --bb-text: #082f49;
    --bb-text-dim: #0369a1;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #64ffda;
    --bb-accent-hover: color-mix(in srgb, #64ffda 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #64ffda 16%, transparent);
        --color-primary-50: #f3fcfa;
    --color-primary-100: #eafbf7;
    --color-primary-200: #d8f8f1;
    --color-primary-300: #c0f7ea;
    --color-primary-400: #99f5df;
    --color-primary-500: #64ffda;
    --color-primary-600: #16f3be;
    --color-primary-700: #0dd3a4;
    --color-primary-800: #10a883;
    --color-primary-900: #107e64;
    --color-primary-950: #0f5746;
  }
  [data-app-theme="sunrise"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #fefce8;
    --bb-bg-alt: #fef9c3;
    --bb-surface: #ffffff;
    --bb-surface-2: #fefce8;
    --bb-border: #fef08a;
    --bb-text: #422006;
    --bb-text-dim: #854d0e;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #fbbf24;
    --bb-accent-hover: color-mix(in srgb, #fbbf24 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #fbbf24 16%, transparent);
        --color-primary-50: #fcf9f3;
    --color-primary-100: #fbf6ea;
    --color-primary-200: #f8efd8;
    --color-primary-300: #f6e7c0;
    --color-primary-400: #f5db99;
    --color-primary-500: #fbbf24;
    --color-primary-600: #f2b517;
    --color-primary-700: #d29b0f;
    --color-primary-800: #a77d11;
    --color-primary-900: #7e5f11;
    --color-primary-950: #57430f;
  }
  [data-app-theme="nordic"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #eceff4;
    --bb-bg-alt: #e5e9f0;
    --bb-surface: #ffffff;
    --bb-surface-2: #eceff4;
    --bb-border: #d8dee9;
    --bb-text: #2e3440;
    --bb-text-dim: #4c566a;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #88c0d0;
    --bb-accent-hover: color-mix(in srgb, #88c0d0 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #88c0d0 16%, transparent);
        --color-primary-50: #f4f9fb;
    --color-primary-100: #ebf6f9;
    --color-primary-200: #dbf0f6;
    --color-primary-300: #c5e8f2;
    --color-primary-400: #a1dced;
    --color-primary-500: #88c0d0;
    --color-primary-600: #2ab7df;
    --color-primary-700: #1f9dc1;
    --color-primary-800: #1e7e9a;
    --color-primary-900: #1a6074;
    --color-primary-950: #154451;
  }
  [data-app-theme="mocha"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #faf6f0;
    --bb-bg-alt: #f3ece1;
    --bb-surface: #ffffff;
    --bb-surface-2: #faf6f0;
    --bb-border: #e6dac8;
    --bb-text: #3d2616;
    --bb-text-dim: #784d2a;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #d4a96a;
    --bb-accent-hover: color-mix(in srgb, #d4a96a 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #d4a96a 16%, transparent);
        --color-primary-50: #fbf8f3;
    --color-primary-100: #f9f4eb;
    --color-primary-200: #f6ebda;
    --color-primary-300: #f3e0c4;
    --color-primary-400: #efce9f;
    --color-primary-500: #d4a96a;
    --color-primary-600: #e39626;
    --color-primary-700: #c5801c;
    --color-primary-800: #9d681b;
    --color-primary-900: #775018;
    --color-primary-950: #523914;
  }
  [data-app-theme="neon"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #f0fdf4;
    --bb-bg-alt: #dcfce7;
    --bb-surface: #ffffff;
    --bb-surface-2: #f0fdf4;
    --bb-border: #bbf7d0;
    --bb-text: #052e16;
    --bb-text-dim: #15803d;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #00ff41;
    --bb-accent-hover: color-mix(in srgb, #00ff41 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #00ff41 16%, transparent);
        --color-primary-50: #f3fcf5;
    --color-primary-100: #eafbee;
    --color-primary-200: #d8f8e0;
    --color-primary-300: #c0f7ce;
    --color-primary-400: #99f5b0;
    --color-primary-500: #00ff41;
    --color-primary-600: #16f34e;
    --color-primary-700: #0dd340;
    --color-primary-800: #10a837;
    --color-primary-900: #107e2c;
    --color-primary-950: #0f5721;
  }
  [data-app-theme="sakura"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #fff5f7;
    --bb-bg-alt: #ffe4e9;
    --bb-surface: #ffffff;
    --bb-surface-2: #fff5f7;
    --bb-border: #fecdd6;
    --bb-text: #4c0519;
    --bb-text-dim: #9f1239;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #f9a8c9;
    --bb-accent-hover: color-mix(in srgb, #f9a8c9 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #f9a8c9 16%, transparent);
        --color-primary-50: #fcf3f7;
    --color-primary-100: #faeaf1;
    --color-primary-200: #f8d8e5;
    --color-primary-300: #f6c1d6;
    --color-primary-400: #f39bbf;
    --color-primary-500: #f9a8c9;
    --color-primary-600: #ee1b71;
    --color-primary-700: #cf125f;
    --color-primary-800: #a4134e;
    --color-primary-900: #7c133e;
    --color-primary-950: #56102d;
  }
  [data-app-theme="warmth"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #fffbeb;
    --bb-bg-alt: #fef3c7;
    --bb-surface: #ffffff;
    --bb-surface-2: #fffbeb;
    --bb-border: #fde68a;
    --bb-text: #451a03;
    --bb-text-dim: #92400e;
    --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
    --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
    --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
    --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
    --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
    --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
    --bb-accent: #f59e0b;
    --bb-accent-hover: color-mix(in srgb, #f59e0b 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #f59e0b 16%, transparent);
        --color-primary-50: #fcf9f3;
    --color-primary-100: #faf4ea;
    --color-primary-200: #f8ecd8;
    --color-primary-300: #f6e2c0;
    --color-primary-400: #f4d29a;
    --color-primary-500: #f59e0b;
    --color-primary-600: #f0a019;
    --color-primary-700: #d08910;
    --color-primary-800: #a66f12;
    --color-primary-900: #7d5512;
    --color-primary-950: #573c0f;
  }
  [data-app-theme="high-contrast"][data-mode="system"] {
    color-scheme: light;
    --bb-bg: #ffffff;
    --bb-bg-alt: #ffffff;
    --bb-surface: #ffffff;
    --bb-surface-2: #f5f5f5;
    --bb-border: #000000;
    --bb-text: #000000;
    --bb-text-dim: #111111;
    --bb-shadow-sm: 0 0 0 1px #000000;
    --bb-shadow-md: 0 0 0 2px #000000;
    --bb-shadow-lg: 0 0 0 3px #000000;
    --bb-shadow: 0 0 0 2px #000000;
    --bb-scrollbar-thumb: #000000;
    --bb-scrollbar-thumb-hover: #333333;
    --bb-scrollbar-track: #ffffff;
    --bb-accent: #ffe600;
    --bb-accent-hover: color-mix(in srgb, #ffe600 86%, #000);
    --bb-accent-soft: color-mix(in srgb, #ffe600 16%, transparent);
        --color-primary-50: #fcfbf3;
    --color-primary-100: #fbf9ea;
    --color-primary-200: #f8f5d8;
    --color-primary-300: #f7f1c0;
    --color-primary-400: #f5ec99;
    --color-primary-500: #ffe600;
    --color-primary-600: #f3dd16;
    --color-primary-700: #d3c00d;
    --color-primary-800: #a89910;
    --color-primary-900: #7e7410;
    --color-primary-950: #57500f;
  }
}

html[data-oled-dark-mode="true"][data-mode="dark"],
html[data-oled-dark-mode="true"][data-mode="system"] {
  --bb-bg: #000;
  --bb-bg-alt: #000;
  --bb-surface: #000;
  --bb-surface-2: #0a0a0a;
  --bb-border: #1a1a1a;
  --bb-text: #e8ebf2;
  --bb-text-dim: #9aa4b8;
}

@media (prefers-color-scheme: dark) {
  html[data-oled-dark-mode="true"][data-mode="system"] {
    --bb-bg: #000;
    --bb-bg-alt: #000;
    --bb-surface: #000;
    --bb-surface-2: #0a0a0a;
    --bb-border: #1a1a1a;
  }
}

[data-app-theme="custom"] {
  color-scheme: dark;
}
[data-app-theme="custom"][data-mode="dark"] {
  --bb-bg: #0d0f14;
  --bb-bg-alt: #11141a;
  --bb-surface: #161922;
  --bb-surface-2: #1e2330;
  --bb-border: #282f3d;
  --bb-text: #e2e6f0;
  --bb-text-dim: #8e99b0;
  --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #fff);
  --bb-scrollbar-track: rgba(255, 255, 255, 0.04);
}
[data-app-theme="custom"][data-mode="light"] {
  --bb-bg: #f8fafc;
  --bb-bg-alt: #f1f5f9;
  --bb-surface: #ffffff;
  --bb-surface-2: #f8fafc;
  --bb-border: #e2e8f0;
  --bb-text: #0f172a;
  --bb-text-dim: #64748b;
  --bb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.025);
  --bb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.025);
  --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  --bb-scrollbar-thumb: var(--bb-accent, #6c8cff);
  --bb-scrollbar-thumb-hover: color-mix(in srgb, var(--bb-accent, #6c8cff) 80%, #000);
  --bb-scrollbar-track: rgba(0, 0, 0, 0.04);
}
[data-app-theme="custom"] {
  --bb-accent: var(--color-primary-500, #6c8cff);
  --bb-accent-hover: var(--color-primary-600, #5b78e8);
  --bb-accent-soft: color-mix(in srgb, var(--bb-accent) 16%, transparent);
}

@media (prefers-contrast: more) {
  :root,
  [data-app-theme="high-contrast"] {
    --bb-bg: #000000;
    --bb-bg-alt: #000000;
    --bb-surface: #000000;
    --bb-surface-2: #0a0a0a;
    --bb-border: #ffffff;
    --bb-text: #ffffff;
    --bb-text-dim: #f0f0f0;
    --bb-accent: #ffe600;
    --bb-accent-hover: #ffff55;
    --bb-accent-soft: rgba(255, 230, 0, 0.25);
    --bb-shadow-sm: 0 0 0 1px #ffffff;
    --bb-shadow-md: 0 0 0 2px #ffffff;
    --bb-shadow-lg: 0 0 0 3px #ffffff;
  }
}

/* 32 Akzentfarben (Custom-Primary-Auswahl) – Referenz fürs UI:
   amber: #f59e0b
   orange: #f97316
   yellow: #eab308
   gold: #d97706
   bronze: #b45309
   copper: #c2410c
   caramel: #c05621
   brown: #a16207
   coral: #ff6b6b
   red: #ef4444
   ruby: #e11d48
   crimson: #be123c
   rose: #f43f5e
   pink: #ec4899
   fuchsia: #d946ef
   plum: #9333ea
   purple: #a855f7
   violet: #8b5cf6
   lavender: #a78bfa
   indigo: #6366f1
   blue: #3b82f6
   sky: #0ea5e9
   cyan: #06b6d4
   teal: #14b8a6
   mint: #2dd4bf
   emerald: #10b981
   green: #22c55e
   lime: #84cc16
   olive: #65a30d
   slate: #64748b
   zinc: #71717a
   gray: #6b7280
*/