:root {
  --app-bg: #f5f7fb;
  --app-surface: var(--background-color-solid, #fff);
  --app-border: color-mix(in srgb, var(--text-color-muted, #748194) 18%, transparent);
  --app-sidebar-fg: rgb(255 255 255 / 72%);
  --app-sidebar-fg-strong: #fff;
  --app-sidebar-muted: rgb(255 255 255 / 45%);
  --app-sidebar-hover: rgb(255 255 255 / 8%);
  --app-sidebar-active-bg: rgb(255 255 255 / 14%);
  --app-sidebar-active-fg: #fff;
  --app-sidebar-border: rgb(255 255 255 / 8%);
}

:root[data-hb-theme="dark"] {
  --app-bg: color-mix(in srgb, var(--color-gray-950, #0b1727), black 25%);
  --app-border: rgb(255 255 255 / 8%);
}

:root[data-palette="sphere"] {
  --color-primary-lighter: #bfdbfe;
  --color-primary-light: #93c5fd;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-darker: #1e3a8a;
  --app-sidebar-bg: linear-gradient(180deg, #0b1f4b 0%, #10296a 100%);
  --app-brand-from: #60a5fa;
  --app-brand-to: #2563eb;
}

:root[data-palette="indigo"] {
  --color-primary-lighter: #c7d2fe;
  --color-primary-light: #a5b4fc;
  --color-primary: #5b5bd6;
  --color-primary-dark: #4b45c4;
  --color-primary-darker: #312e81;
  --app-sidebar-bg: linear-gradient(180deg, #17153b 0%, #262264 100%);
  --app-brand-from: #a78bfa;
  --app-brand-to: #5b5bd6;
}

:root[data-palette="teal"] {
  --color-primary-lighter: #99f6e4;
  --color-primary-light: #5eead4;
  --color-primary: #0d9488;
  --color-primary-dark: #0f766e;
  --color-primary-darker: #134e4a;
  --app-sidebar-bg: linear-gradient(180deg, #042f2e 0%, #0b4a46 100%);
  --app-brand-from: #2dd4bf;
  --app-brand-to: #0d9488;
}

:root[data-palette="ember"] {
  --color-primary-lighter: #fed7aa;
  --color-primary-light: #fdba74;
  --color-primary: #ea580c;
  --color-primary-dark: #c2410c;
  --color-primary-darker: #7c2d12;
  --app-sidebar-bg: linear-gradient(180deg, #1c1917 0%, #292524 100%);
  --app-sidebar-active-bg: rgb(234 88 12 / 22%);
  --app-brand-from: #fb923c;
  --app-brand-to: #ea580c;
}

:root[data-palette="daylight"] {
  --color-primary-lighter: #ddd6fe;
  --color-primary-light: #c4b5fd;
  --color-primary: #7c3aed;
  --color-primary-dark: #6d28d9;
  --color-primary-darker: #4c1d95;
  --app-bg: #fafafa;
  --app-sidebar-bg: #fff;
  --app-sidebar-fg: #52525b;
  --app-sidebar-fg-strong: #18181b;
  --app-sidebar-muted: #a1a1aa;
  --app-sidebar-hover: #f4f4f5;
  --app-sidebar-active-bg: #f3f0ff;
  --app-sidebar-active-fg: #6d28d9;
  --app-sidebar-border: #e4e4e7;
  --app-brand-from: #a78bfa;
  --app-brand-to: #7c3aed;
}

:root[data-palette="daylight"][data-hb-theme="dark"] {
  --app-bg: #0c0c0f;
  --app-sidebar-bg: #121216;
  --app-sidebar-fg: #a1a1aa;
  --app-sidebar-fg-strong: #fafafa;
  --app-sidebar-muted: #71717a;
  --app-sidebar-hover: rgb(255 255 255 / 5%);
  --app-sidebar-active-bg: rgb(124 58 237 / 22%);
  --app-sidebar-active-fg: #c4b5fd;
  --app-sidebar-border: rgb(255 255 255 / 8%);
}

.palette-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: none;
  border-radius: 0.35rem;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
}

.palette-swatch--sphere {
  background: linear-gradient(135deg, #0b1f4b 50%, #2563eb 50%);
}

.palette-swatch--indigo {
  background: linear-gradient(135deg, #17153b 50%, #5b5bd6 50%);
}

.palette-swatch--teal {
  background: linear-gradient(135deg, #042f2e 50%, #0d9488 50%);
}

.palette-swatch--ember {
  background: linear-gradient(135deg, #1c1917 50%, #ea580c 50%);
}

.palette-swatch--daylight {
  background: linear-gradient(135deg, #fff 50%, #7c3aed 50%);
}