/* Each palette also supplies the colors in its settings preview. */
[data-palette="maxbow"] {
  --theme-side: #151b2e;
  --theme-card: #171f33;
  --theme-border: #39455f;
  --theme-accent: #54e0d6;
  --theme-alt: #a884ff;
  --theme-third: #6beaab;
}

:root[data-theme="midnight"], [data-palette="midnight"] {
  --theme-bg: #181a30;
  --theme-glow: #333963;
  --theme-side: #22243c;
  --theme-card: #272a47;
  --theme-raised: #303455;
  --theme-field: #20233c;
  --theme-border: #414770;
  --theme-text: #f4f1ff;
  --theme-muted: #b9bfdf;
  --theme-accent: #acb4ff;
  --theme-alt: #dfa2ff;
  --theme-third: #80d7ed;
  --theme-fourth: #f5bead;
  --theme-primary: #a3adff;
  --theme-primary-text: #171931;
  --theme-radius: 19px;
  --theme-shadow: 0 12px 26px #09091955, inset 0 1px #ffffff0b;
}

:root[data-theme="violet"], [data-palette="violet"] {
  --theme-bg: #101015;
  --theme-glow: #301d50;
  --theme-side: #16161e;
  --theme-card: #1b1a24;
  --theme-raised: #242032;
  --theme-field: #15141e;
  --theme-border: #372d4b;
  --theme-text: #f5f0ff;
  --theme-muted: #c3b9d4;
  --theme-accent: #be9cff;
  --theme-alt: #a9a0ff;
  --theme-third: #6addd3;
  --theme-fourth: #f092d7;
  --theme-primary: #8054e6;
  --theme-primary-text: #fff;
  --theme-radius: 10px;
  --theme-shadow: 0 6px 15px #05030960;
}

:root[data-theme="lavender"], [data-palette="lavender"] {
  --theme-bg: #edf0f8;
  --theme-glow: #d9d0ff;
  --theme-side: #5830c9;
  --theme-side-end: #4520ab;
  --theme-side-text: #fff;
  --theme-side-muted: #ece4ff;
  --theme-side-selected: #37198b;
  --theme-card: #f5f6fc;
  --theme-raised: #e6e9f7;
  --theme-field: #f9f9fe;
  --theme-border: #c9cce2;
  --theme-text: #26233e;
  --theme-muted: #595772;
  --theme-accent: #5e35c3;
  --theme-alt: #18785b;
  --theme-third: #aa6e00;
  --theme-fourth: #ae3675;
  --theme-primary: #6534d0;
  --theme-primary-text: #fff;
  --theme-radius: 17px;
  --theme-shadow: 5px 6px 15px #a9afce55, -4px -4px 12px #ffffff9c;
}

:root[data-theme="spectrum"], [data-palette="spectrum"] {
  --theme-bg: #edf0f7;
  --theme-glow: #e9e4fd;
  --theme-side: #fff;
  --theme-side-selected: #5240cd;
  --theme-selected-text: #fff;
  --theme-card: #fff;
  --theme-raised: #f0eefb;
  --theme-field: #fbfbfe;
  --theme-border: #d8dcec;
  --theme-text: #202438;
  --theme-muted: #535a72;
  --theme-accent: #5140ca;
  --theme-alt: #007788;
  --theme-third: #a32263;
  --theme-fourth: #9c4d13;
  --theme-primary: #5140ca;
  --theme-primary-text: #fff;
  --theme-radius: 13px;
  --theme-shadow: 0 5px 18px #2c376612;
}

:root[data-theme="glacier"], [data-palette="glacier"] {
  --theme-bg: #121826;
  --theme-glow: #192334;
  --theme-side: #1d2937;
  --theme-card: #151d2b;
  --theme-raised: #222e3e;
  --theme-field: #131b28;
  --theme-border: #354456;
  --theme-text: #f1f6ff;
  --theme-muted: #bbc7d7;
  --theme-accent: #c3e7f3;
  --theme-alt: #ffcc99;
  --theme-third: #d5e7ae;
  --theme-fourth: #aebbd4;
  --theme-primary: #bfdfed;
  --theme-primary-text: #152633;
  --theme-radius: 11px;
  --theme-shadow: none;
}

:root[data-theme="graphite"], [data-palette="graphite"] {
  --theme-bg: #1b1c23;
  --theme-glow: #23252e;
  --theme-side: #17181f;
  --theme-card: #23242d;
  --theme-raised: #2a2c36;
  --theme-field: #1c1d25;
  --theme-border: #3d404d;
  --theme-text: #f3f4f8;
  --theme-muted: #c1c3cf;
  --theme-accent: #a8ded8;
  --theme-alt: #cfb4d9;
  --theme-third: #e1c59d;
  --theme-fourth: #a5c3e1;
  --theme-primary: #a8ded8;
  --theme-primary-text: #152625;
  --theme-side-selected: #a8ded8;
  --theme-selected-text: #152625;
  --theme-radius: 8px;
  --theme-shadow: 0 4px 9px #0c0d1433;
}

:root[data-theme="aurora"], [data-palette="aurora"] {
  --theme-bg: #101b26;
  --theme-glow: #183e49;
  --theme-side: #142d36;
  --theme-card: #192a37;
  --theme-raised: #203a45;
  --theme-field: #142431;
  --theme-border: #315060;
  --theme-text: #eef9fc;
  --theme-muted: #a8c6d1;
  --theme-accent: #83e5c1;
  --theme-alt: #98b9ff;
  --theme-third: #78d5eb;
  --theme-fourth: #dfbaf8;
  --theme-primary: #83e5c1;
  --theme-primary-text: #12302b;
  --theme-radius: 17px;
  --theme-shadow: 0 8px 24px #050d193d;
}

:root[data-theme="ember"], [data-palette="ember"] {
  --theme-bg: #1b1716;
  --theme-glow: #472b23;
  --theme-side: #2c201b;
  --theme-card: #2a2220;
  --theme-raised: #3c2b24;
  --theme-field: #221b19;
  --theme-border: #62453a;
  --theme-text: #fff1e8;
  --theme-muted: #dbc0b2;
  --theme-accent: #ffbd83;
  --theme-alt: #f39c98;
  --theme-third: #f1cf9d;
  --theme-fourth: #a8d9bd;
  --theme-primary: #ffb278;
  --theme-primary-text: #351e13;
  --theme-radius: 16px;
  --theme-shadow: 0 8px 22px #10070544;
}

:root[data-theme="porcelain"], [data-palette="porcelain"] {
  --theme-bg: #f2f2ec;
  --theme-glow: #e4e9e2;
  --theme-side: #fafaf5;
  --theme-card: #fffefa;
  --theme-raised: #ecefe8;
  --theme-field: #f8f8f3;
  --theme-border: #d6ded5;
  --theme-text: #182d37;
  --theme-muted: #4f6064;
  --theme-accent: #14557c;
  --theme-alt: #087267;
  --theme-third: #81522a;
  --theme-fourth: #895374;
  --theme-primary: #174e72;
  --theme-primary-text: #fff;
  --theme-radius: 15px;
  --theme-shadow: 0 7px 22px #24423b16;
}

:root[data-theme="turquoise"], [data-palette="turquoise"] {
  --theme-bg: #e5f6f5;
  --theme-glow: #aee7e4;
  --theme-side: #07545b;
  --theme-side-end: #07363d;
  --theme-side-text: #f0ffff;
  --theme-side-muted: #c1e8e7;
  --theme-side-selected: #086970;
  --theme-card: #f7fffe;
  --theme-raised: #dff3f2;
  --theme-field: #f5fdfc;
  --theme-border: #b6d9d9;
  --theme-text: #123139;
  --theme-muted: #426369;
  --theme-accent: #086b73;
  --theme-alt: #5b419b;
  --theme-third: #21754d;
  --theme-fourth: #974e36;
  --theme-primary: #086b73;
  --theme-primary-text: #fff;
  --theme-radius: 17px;
  --theme-shadow: 0 7px 22px #0b58561c;
}

:root[data-theme="emerald"], [data-palette="emerald"] {
  --theme-bg: #0d1b15;
  --theme-glow: #214f36;
  --theme-side: #11271e;
  --theme-card: #172d23;
  --theme-raised: #203c2f;
  --theme-field: #11251d;
  --theme-border: #365847;
  --theme-text: #effbf2;
  --theme-muted: #b2d1be;
  --theme-accent: #75e9ad;
  --theme-alt: #e9cf83;
  --theme-third: #86d6ea;
  --theme-fourth: #eab2c5;
  --theme-primary: #75e9ad;
  --theme-primary-text: #11291c;
  --theme-radius: 14px;
  --theme-shadow: 0 9px 24px #050e0960;
}

:root[data-theme="indigo-ink"], [data-palette="indigo-ink"] {
  --theme-bg: #10132d;
  --theme-glow: #292e79;
  --theme-side: #14193c;
  --theme-side-end: #0e122b;
  --theme-card: #1a2046;
  --theme-raised: #252d5c;
  --theme-field: #161a3b;
  --theme-border: #414d82;
  --theme-text: #f3f5ff;
  --theme-muted: #b8c2ef;
  --theme-accent: #aab7ff;
  --theme-alt: #7be2ed;
  --theme-third: #f9a9d2;
  --theme-fourth: #f4d686;
  --theme-primary: #aab7ff;
  --theme-primary-text: #171d4c;
  --theme-radius: 12px;
  --theme-shadow: 0 8px 24px #08092170;
}

:root[data-theme="coral"], [data-palette="coral"] {
  --theme-bg: #fff3ed;
  --theme-glow: #ffd7c5;
  --theme-side: #fff9f4;
  --theme-card: #fffbf8;
  --theme-raised: #fae7de;
  --theme-field: #fffaf7;
  --theme-border: #e8c9ba;
  --theme-text: #3e2827;
  --theme-muted: #745450;
  --theme-accent: #a2393e;
  --theme-alt: #0d6c65;
  --theme-third: #6950a3;
  --theme-fourth: #885919;
  --theme-primary: #a2393e;
  --theme-primary-text: #fff;
  --theme-radius: 18px;
  --theme-shadow: 0 7px 22px #9c47221c;
}

:root[data-theme="berry"], [data-palette="berry"] {
  --theme-bg: #21131e;
  --theme-glow: #592748;
  --theme-side: #2d192a;
  --theme-card: #331e30;
  --theme-raised: #45273d;
  --theme-field: #291827;
  --theme-border: #63405a;
  --theme-text: #fff1f8;
  --theme-muted: #e0bbd3;
  --theme-accent: #ffacd0;
  --theme-alt: #c8b5ff;
  --theme-third: #8be2cc;
  --theme-fourth: #ffc28e;
  --theme-primary: #ffacd0;
  --theme-primary-text: #3d1b30;
  --theme-radius: 15px;
  --theme-shadow: 0 10px 24px #16071065;
}

:root:is([data-theme="lavender"], [data-theme="spectrum"], [data-theme="porcelain"], [data-theme="turquoise"], [data-theme="coral"]) {
  color-scheme: light;
  --green: #166849;
  --red: #9b2949;
  --theme-warning: #81480d;
}

:root[data-theme]:not(:where([data-theme="maxbow"])) {
  --bg: var(--theme-bg);
  --side: var(--theme-side);
  --surface: var(--theme-card);
  --surface2: var(--theme-raised);
  --line: var(--theme-border);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --purple: var(--theme-alt);
  --cyan: var(--theme-accent);
  --radius: var(--theme-radius);
  accent-color: var(--cyan);

  & body {
    background: radial-gradient(ellipse at 75% 0, var(--theme-glow), transparent 58%), var(--bg);
  }

  & .sidebar {
    color: var(--theme-side-text, var(--text));
    background: linear-gradient(155deg, var(--side), var(--theme-side-end, var(--side)));
  }

  & .sidebar :is(small, .side-caption, nav a) {
    color: var(--theme-side-muted, var(--muted));
  }

  & .sidebar nav .icon {
    color: currentColor;
  }

  & .sidebar nav :is(a:hover, .selected) {
    background: var(--theme-side-selected, var(--surface2));
    border-color: var(--theme-side-selected, var(--line));
    color: var(--theme-selected-text, var(--theme-side-text, var(--text)));
  }

  & .brand {
    color: inherit;
  }

  & :is(.topbar, .mobile-nav) {
    background: var(--surface);
  }

  & :is(.square, .quick-search, input, select, textarea) {
    background: var(--theme-field);
    border-color: var(--line);
  }

  & .quick-search input {
    background: transparent;
  }

  & :is(input, textarea)::placeholder {
    color: var(--muted);
    opacity: 1;
  }

  & :is(label:not(.theme-option), th) {
    color: var(--muted);
  }

  & :is(.avatar, .mini-avatar, .metric-icon, .panel-letter) {
    background: color-mix(in srgb, var(--icon-color, var(--cyan)) 15%, var(--surface));
    border-color: var(--line);
    color: var(--icon-color, var(--cyan));
  }

  & :is(.metric-icon.c2, .panel-letter) { --icon-color: var(--purple); }
  & .metric-icon.c3 { --icon-color: var(--theme-third); }
  & .metric-icon.c4 { --icon-color: var(--theme-fourth); }

  & .card {
    background: var(--theme-card-fill, var(--surface));
    box-shadow: var(--theme-shadow);
  }

  & :is(th, .btn, .tag) { background: var(--surface2); }
  & :is(th, td, .tag) { border-color: var(--line); }
  & .tag { color: var(--muted); }
  & .ring svg { stroke: var(--line); }
  & summary { color: var(--cyan); }
  & .check input { accent-color: var(--cyan); }

  & .btn:hover {
    background: color-mix(in srgb, var(--cyan) 12%, var(--surface2));
  }

  & .btn.primary {
    color: var(--theme-primary-text);
    border-color: var(--theme-primary);
    background: var(--theme-primary);
  }

  & .btn.primary:hover {
    background: color-mix(in srgb, var(--theme-primary), var(--theme-primary-text) 9%);
  }

  & :is(.tag.active, .tag.online, .flash) { --signal: var(--green); }
  & :is(.tag.expired, .tag.offline, .tag.missing, .flash.error, .btn.danger) { --signal: var(--red); }
  & :is(.tag.limited, .tag.pending, .tag.disabled, .stale) { --signal: var(--theme-warning, #ffd18d); }
  & :is(.tag.active, .tag.online, .tag.expired, .tag.offline, .tag.missing,
       .tag.limited, .tag.pending, .tag.disabled, .flash, .btn.danger) {
    color: var(--signal);
    background: color-mix(in srgb, var(--signal) 11%, var(--surface));
    border-color: color-mix(in srgb, var(--signal) 30%, var(--line));
  }

  & .stale { color: var(--signal); }

  & progress { background: var(--line); }
  & progress::-webkit-progress-bar { background: var(--line); }
  & progress::-webkit-progress-value { background: linear-gradient(90deg, var(--purple), var(--cyan)); }
  & progress::-moz-progress-bar { background: linear-gradient(90deg, var(--purple), var(--cyan)); }

  & .chart { --chart-color: var(--cyan); }
  & .chart:nth-child(2) { --chart-color: var(--purple); }
  & meter { accent-color: var(--chart-color); }
  & meter::-webkit-meter-bar { background: var(--theme-field); border-color: var(--line); }
  & meter::-webkit-meter-optimum-value { background: var(--chart-color); }
  & meter::-moz-meter-bar { background: var(--chart-color); }
}

:root[data-theme="midnight"] {
  --theme-card-fill: linear-gradient(145deg, var(--surface2), var(--surface) 72%);

  & .metric {
    border-block-start-color: color-mix(in srgb, var(--cyan) 48%, var(--line));
  }

  & .metric:nth-child(2n) {
    border-block-start-color: color-mix(in srgb, var(--purple) 45%, var(--line));
  }

  & .chart-bars {
    background: repeating-linear-gradient(to top, transparent 0 15px, #b6bdff12 15px 16px);
  }
}

:root[data-theme="violet"] {
  & .heading {
    border-block-end: 1px solid var(--line);
    padding-block-end: 12px;
  }

  & .metric, & .chart {
    background-image: radial-gradient(ellipse at top right, #6745a934, transparent 75%);
  }

  & .sidebar nav .selected {
    box-shadow: inset -3px 0 var(--cyan);
  }
}

:root[data-theme="lavender"] {
  & :is(.square, .btn, input, select, textarea) {
    border-radius: 11px;
  }

  & :is(.chart, .metric) {
    background-image: linear-gradient(160deg, #fff8, transparent 75%);
  }

  & .sidebar .avatar {
    color: #fff;
    background: #37198b;
    border-color: #936ff4;
  }
}

:root[data-theme="spectrum"] {
  & .sidebar nav a { border-radius: 99px; }

  & .metric {
    --metric-tint: #a6e3f4;
    background: linear-gradient(145deg, var(--metric-tint), color-mix(in srgb, var(--metric-tint) 24%, #fff));
    border-color: color-mix(in srgb, var(--metric-tint) 67%, var(--line));
  }

  & .metric:nth-child(2) { --metric-tint: #d4b9ff; }
  & .metric:nth-child(3) { --metric-tint: #ffb7ce; }
  & .metric:nth-child(4) { --metric-tint: #ffd09b; }

  & .chart-bars .bar-col:nth-child(2n) meter {
    --chart-color: var(--theme-third);
  }
}

:root[data-theme="glacier"] {
  & .chart-bars {
    background: repeating-linear-gradient(to top, transparent 0 15px, #bddeec17 15px 16px);
  }
}

:root[data-theme="graphite"] {
  & .metric-grid, & .panel-grid, & .chart-grid {
    gap: 9px;
  }

  & .sidebar nav a {
    border-radius: 6px;
    padding-block: 8px;
  }

  & .sidebar nav .selected {
    font-weight: 700;
  }
}

.theme-picker {
  min-inline-size: 0;
  padding: 0;
  margin: 10px 0 13px;
  border: 0;
}

.theme-picker-legend {
  padding: 0;
  margin-block-end: 7px;
  font-size: .84rem;
  font-weight: 700;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 9px;
}

.theme-option {
  display: grid;
  grid-template-columns: auto 56px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.theme-option:has(:checked) {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 1px var(--cyan);
}

.theme-option:has(:focus-visible) {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.theme-option input {
  inline-size: 16px;
  block-size: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--cyan);
}

.theme-option input:focus-visible { outline: none; }

.theme-copy small { display: block; line-height: 1.45; }

.theme-sample {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 3px;
  inline-size: 56px;
  block-size: 40px;
  padding: 5px 16px 5px 5px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: linear-gradient(to left, var(--theme-side) 20%, var(--theme-card) 20%);
}

.theme-sample i { block-size: 58%; border-radius: 2px; background: var(--theme-accent); }
.theme-sample i:nth-child(2) { block-size: 100%; background: var(--theme-alt); }
.theme-sample i:nth-child(3) { block-size: 74%; background: var(--theme-third); }