:root {
  --shell-accent: #0f766e;
  --shell-accent-dark: #0b5e58;
  --shell-soft: #e8f5f3;
  --shell-header-start: #102c3b;
  --shell-header-end: #0f766e;
  --shell-stage: #f4f7fa;
  --shell-ink: #17202e;
  --shell-muted-on-header: #c4d8df;
  --shell-highlight: color-mix(in srgb, var(--shell-accent) 42%, #ffffff);
}

:root[data-theme="sky"] {
  --shell-accent: #2563a6;
  --shell-accent-dark: #174a7c;
  --shell-soft: #e7f1fb;
  --shell-header-start: #173a56;
  --shell-header-end: #2563a6;
  --shell-stage: #f2f7fb;
  --shell-ink: #172a3a;
  --shell-muted-on-header: #d3e2ef;
}

:root[data-theme="marine"] {
  --shell-accent: #2b6f8f;
  --shell-accent-dark: #1e526b;
  --shell-soft: #e5f2f6;
  --shell-header-start: #123846;
  --shell-header-end: #2b6f8f;
  --shell-stage: #f1f7f9;
  --shell-ink: #172a32;
  --shell-muted-on-header: #d0e3e9;
}

:root[data-theme="slate-blue"] {
  --shell-accent: #526f98;
  --shell-accent-dark: #3b5578;
  --shell-soft: #e9eef6;
  --shell-header-start: #273b55;
  --shell-header-end: #526f98;
  --shell-stage: #f4f6f9;
  --shell-ink: #202c3b;
  --shell-muted-on-header: #d8e0ec;
}

:root[data-theme="ocean"] {
  --shell-accent: #527c96;
  --shell-accent-dark: #3e657d;
  --shell-soft: #e8f0f5;
  --shell-header-start: #274a60;
  --shell-header-end: #527c96;
  --shell-stage: #f3f7fa;
  --shell-ink: #24323a;
  --shell-muted-on-header: #d4e1e8;
}

:root[data-theme="sand"] {
  --shell-accent: #987656;
  --shell-accent-dark: #745941;
  --shell-soft: #f3eae0;
  --shell-header-start: #4d3d30;
  --shell-header-end: #8a6a4e;
  --shell-stage: #faf7f2;
  --shell-ink: #392f27;
  --shell-muted-on-header: #eadfd4;
}

:root[data-theme="lavender"] {
  --shell-accent: #7a7096;
  --shell-accent-dark: #5f5678;
  --shell-soft: #efecf5;
  --shell-header-start: #403a53;
  --shell-header-end: #74698f;
  --shell-stage: #f8f6fa;
  --shell-ink: #302d39;
  --shell-muted-on-header: #e1ddea;
}

:root[data-theme="night"] {
  color-scheme: dark;
  --shell-accent: #4f8d7c;
  --shell-accent-dark: #8ac3b3;
  --shell-soft: #263e39;
  --shell-header-start: #111c20;
  --shell-header-end: #263a40;
  --shell-stage: #172125;
  --shell-ink: #edf2f1;
  --shell-muted-on-header: #c6d4d1;
}

body {
  background: var(--shell-stage);
  color: var(--shell-ink);
}

.unified-header {
  background: linear-gradient(120deg, var(--shell-header-start), var(--shell-header-end));
  box-shadow: 0 4px 22px color-mix(in srgb, var(--shell-header-start) 34%, transparent);
}

.brand span,
.save-status {
  color: var(--shell-muted-on-header);
}

.module-tabs {
  background: color-mix(in srgb, var(--shell-header-start) 68%, transparent);
  border-color: rgba(255, 255, 255, 0.16);
}

.module-tab {
  color: var(--shell-muted-on-header);
}

.module-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.module-tab.active {
  background: #ffffff;
  color: var(--shell-accent-dark);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--shell-header-start) 48%, transparent);
}

.module-tab span {
  color: var(--shell-highlight);
}

.module-tab.active span {
  color: var(--shell-accent);
}

.save-status i {
  background: var(--shell-highlight);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-highlight) 20%, transparent);
}

.icon-action {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
}

.icon-action:hover {
  background: rgba(255, 255, 255, 0.14);
}

.module-stage,
.loading {
  background: var(--shell-stage);
}

.loading {
  color: var(--shell-accent-dark);
}

.loading span {
  border-color: color-mix(in srgb, var(--shell-accent) 22%, var(--shell-stage));
  border-top-color: var(--shell-accent);
}

.toast:not(.error) {
  background: var(--shell-accent-dark);
}