:root {
  --bg: #0a0f1c;
  --bg-elevated: #111a2e;
  --surface: #16213a;
  --surface-hover: #1c2942;
  --border: #24314f;
  --card-border: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent: #5eead4;
  --accent-secondary: #93c5fd;
  --accent-dim: #2dd4bf33;
  --warn: #fb7185;
  --warn-dim: #fb718533;
  --success: #4ade80;
  --success-dim: color-mix(in srgb, var(--success) 10%, transparent);
  --success-border: color-mix(in srgb, var(--success) 28%, transparent);
  --text: #e6ecf5;
  --text-muted: #7c8aab;
  --text-faint: #4b587a;
  --radius: 18px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --glow-left: #14213d;
  --glow-right: #0f2e2b;
  --topbar-start: #14213d;
  --topbar-center: #0e1c2c;
  --topbar-end: #0f2e2b;
  --topbar-solid: rgba(10, 15, 28, 0.95);
  --card-gradient: linear-gradient(145deg, var(--surface), var(--bg-elevated));
  --card-gradient-soft: linear-gradient(145deg, var(--bg-elevated), var(--surface));
  --control-bg: color-mix(in srgb, var(--bg-elevated) 74%, var(--surface) 26%);
  --control-hover: color-mix(in srgb, var(--surface-hover) 82%, var(--bg-elevated) 18%);
  --control-border: color-mix(in srgb, var(--accent) 22%, var(--border));
  --overlay-backdrop: color-mix(in srgb, var(--bg) 84%, transparent);
}



:root[data-dashboard-theme="ozean"] {
  --bg: #07111d;
  --bg-elevated: #0e2034;
  --surface: #142c45;
  --surface-hover: #1a3855;
  --border: #234869;
  --card-border: rgba(103, 232, 249, 0.2);
  --accent: #67e8f9;
  --accent-secondary: #60a5fa;
  --accent-dim: #22d3ee2e;
  --text: #edf8ff;
  --text-muted: #83a9c7;
  --text-faint: #507698;
  --glow-left: #102b4c;
  --glow-right: #073747;
  --topbar-start: #102b4c;
  --topbar-center: #0a263d;
  --topbar-end: #073747;
  --topbar-solid: rgba(7, 17, 29, 0.96);
}

:root[data-dashboard-theme="graphit"] {
  --bg: #0d1117;
  --bg-elevated: #161b22;
  --surface: #202832;
  --surface-hover: #2a3440;
  --border: #354252;
  --card-border: rgba(203, 213, 225, 0.17);
  --accent: #cbd5e1;
  --accent-secondary: #94a3b8;
  --accent-dim: #94a3b826;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --glow-left: #1b2635;
  --glow-right: #1c2d31;
  --topbar-start: #1b2635;
  --topbar-center: #161d26;
  --topbar-end: #1c2d31;
  --topbar-solid: rgba(13, 17, 23, 0.96);
}

:root[data-dashboard-theme="tannengruen"] {
  --bg: #07130f;
  --bg-elevated: #0f211b;
  --surface: #173129;
  --surface-hover: #1d3c32;
  --border: #295044;
  --card-border: rgba(110, 231, 183, 0.2);
  --accent: #6ee7b7;
  --accent-secondary: #a7f3d0;
  --accent-dim: #34d3992b;
  --text: #ecfdf5;
  --text-muted: #8bb3a5;
  --text-faint: #557a6e;
  --glow-left: #133026;
  --glow-right: #15382b;
  --topbar-start: #133026;
  --topbar-center: #0e251c;
  --topbar-end: #15382b;
  --topbar-solid: rgba(7, 19, 15, 0.96);
}

:root[data-dashboard-theme="rubinrot"] {
  --bg: #16090d;
  --bg-elevated: #261016;
  --surface: #35151e;
  --surface-hover: #47202a;
  --border: #65303b;
  --card-border: rgba(251, 113, 133, 0.2);
  --accent: #fb7185;
  --accent-secondary: #fca5a5;
  --accent-dim: #e11d4830;
  --text: #fff1f2;
  --text-muted: #c68c98;
  --text-faint: #885965;
  --glow-left: #3a121b;
  --glow-right: #281018;
  --topbar-start: #3a121b;
  --topbar-center: #271016;
  --topbar-end: #281018;
  --topbar-solid: rgba(22, 9, 13, 0.96);
}

:root[data-dashboard-theme="bernstein"] {
  --bg: #160d05;
  --bg-elevated: #251507;
  --surface: #35200d;
  --surface-hover: #482c12;
  --border: #65411f;
  --card-border: rgba(251, 191, 36, 0.21);
  --accent: #fbbf24;
  --accent-secondary: #fb923c;
  --accent-dim: #f59e0b2d;
  --text: #fff7ed;
  --text-muted: #c6a477;
  --text-faint: #8b6a44;
  --glow-left: #3b2208;
  --glow-right: #2d1708;
  --topbar-start: #3b2208;
  --topbar-center: #291706;
  --topbar-end: #2d1708;
  --topbar-solid: rgba(22, 13, 5, 0.96);
}

:root[data-dashboard-theme="sandstein"] {
  --bg: #12100c;
  --bg-elevated: #211d16;
  --surface: #302a20;
  --surface-hover: #40382b;
  --border: #5a4f3d;
  --card-border: rgba(231, 201, 142, 0.2);
  --accent: #e7c98e;
  --accent-secondary: #a3b18a;
  --accent-dim: #d6b8752b;
  --text: #faf7f0;
  --text-muted: #b4a88f;
  --text-faint: #7b715f;
  --glow-left: #342c20;
  --glow-right: #253025;
  --topbar-start: #342c20;
  --topbar-center: #252119;
  --topbar-end: #253025;
  --topbar-solid: rgba(18, 16, 12, 0.96);
}

:root[data-dashboard-theme="magnolie"] {
  --bg: #150a14;
  --bg-elevated: #241020;
  --surface: #34172f;
  --surface-hover: #47203e;
  --border: #67305b;
  --card-border: rgba(240, 171, 252, 0.2);
  --accent: #f0abfc;
  --accent-secondary: #f9a8d4;
  --accent-dim: #d946ef29;
  --text: #fdf4ff;
  --text-muted: #c794bd;
  --text-faint: #8b5a81;
  --glow-left: #381331;
  --glow-right: #2b1328;
  --topbar-start: #381331;
  --topbar-center: #281021;
  --topbar-end: #2b1328;
  --topbar-solid: rgba(21, 10, 20, 0.96);
}

/* -- by Larsiopuw */