:root {
  --bg: #0f1117;
  --text-main: #e4e7ec;
  --text-muted: #a3a8b5;
  --text-faint: #7a7f8a;
  --card-bg: #151925;
  --border-offline: #363b47;
  --btn-bg: #151925;
  --btn-border: #3b82f6;
  --btn-text: #e4e7ec;
  --btn-bg-hover: #1b2030;
  --btn-text-hover: #ffffff;
  --plex-color: #3b82f6;
  --jellyfin-color: #8b5cf6;
  --emby-color: #22c55e;
  --session-direct: #22c55e;
  --session-transcode: #ef4444;
  --progress-fill: #3b82f6;
}

:root[data-theme="minimal"] {
  --bg: #0f1115;
  --text-main: #f5f5f5;
  --text-muted: #b0b3b8;
  --text-faint: #7a7d86;
  --card-bg: #171a22;
  --border-offline: #3a3d45;
  --btn-bg: #171a22;
  --btn-border: #888;
  --btn-text: #f5f5f5;
  --btn-bg-hover: #20232b;
  --btn-text-hover: #ffffff;
  --plex-color: #4caf50;
  --jellyfin-color: #03a9f4;
  --emby-color: #9c27b0;
  --session-direct: #4caf50;
  --session-transcode: #e53935;
  --progress-fill: #4caf50;
}

:root[data-theme="high-contrast"] {
  --bg: #000000;
  --text-main: #ffffff;
  --text-muted: #e0e0e0;
  --text-faint: #bbbbbb;
  --card-bg: #101010;
  --border-offline: #555555;
  --btn-bg: #000000;
  --btn-border: #ffffff;
  --btn-text: #ffffff;
  --btn-bg-hover: #202020;
  --btn-text-hover: #ffffff;
  --plex-color: #00e5ff;
  --jellyfin-color: #76ff03;
  --emby-color: #ff4081;
  --session-direct: #00ff00;
  --session-transcode: #ff1744;
  --progress-fill: #00ff00;
}

/* Purple theme */
:root[data-theme="purple"] {
  --bg: #110018;
  --text-main: #f5e9ff;
  --text-muted: #c6a4ff;
  --text-faint: #8d6bcf;
  --card-bg: #1c0730;
  --border-offline: #4a2f6f;
  --btn-bg: #1c0730;
  --btn-border: #ba68c8;
  --btn-text: #e1bee7;
  --btn-bg-hover: #260a42;
  --btn-text-hover: #ffffff;
  --plex-color: #ce93d8;
  --jellyfin-color: #7e57c2;
  --emby-color: #ab47bc;
  --session-direct: #81c784;
  --session-transcode: #ff5370;
  --progress-fill: #ba68c8;
}

/* Ocean theme */
:root[data-theme="ocean"] {
  --bg: #02131f;
  --text-main: #e3f2fd;
  --text-muted: #90caf9;
  --text-faint: #5f7990;
  --card-bg: #031d2c;
  --border-offline: #345269;
  --btn-bg: #031d2c;
  --btn-border: #4fc3f7;
  --btn-text: #4fc3f7;
  --btn-bg-hover: #042639;
  --btn-text-hover: #ffffff;
  --plex-color: #29b6f6;
  --jellyfin-color: #4dd0e1;
  --emby-color: #26c6da;
  --session-direct: #00e676;
  --session-transcode: #ff5252;
  --progress-fill: #29b6f6;
}

/* Winter theme */
:root[data-theme="winter"] {
  --bg: #0b1620;
  --text-main: #e8f5ff;
  --text-muted: #b3cde8;
  --text-faint: #7f8fa3;
  --card-bg: #122330;
  --border-offline: #3b4c5c;
  --btn-bg: #122330;
  --btn-border: #90caf9;
  --btn-text: #e3f2fd;
  --btn-bg-hover: #183044;
  --btn-text-hover: #ffffff;
  --plex-color: #90caf9;
  --jellyfin-color: #80deea;
  --emby-color: #b3e5fc;
  --session-direct: #a5d6a7;
  --session-transcode: #ef9a9a;
  --progress-fill: #90caf9;
}

/* Yellow theme */
:root[data-theme="yellow"] {
  --bg: #1f1900;
  --text-main: #fff9c4;
  --text-muted: #ffe082;
  --text-faint: #c8a600;
  --card-bg: #302300;
  --border-offline: #5d4a00;
  --btn-bg: #302300;
  --btn-border: #ffd54f;
  --btn-text: #ffe082;
  --btn-bg-hover: #3c2c00;
  --btn-text-hover: #ffffff;
  --plex-color: #ffd54f;
  --jellyfin-color: #ffb74d;
  --emby-color: #ffca28;
  --session-direct: #aeea00;
  --session-transcode: #ff7043;
  --progress-fill: #ffd54f;
}

/* Forest theme */
:root[data-theme="forest"] {
  --bg: #04120a;
  --text-main: #e8f5e9;
  --text-muted: #a5d6a7;
  --text-faint: #78957f;
  --card-bg: #062015;
  --border-offline: #2e4738;
  --btn-bg: #062015;
  --btn-border: #66bb6a;
  --btn-text: #a5d6a7;
  --btn-bg-hover: #08301f;
  --btn-text-hover: #ffffff;
  --plex-color: #66bb6a;
  --jellyfin-color: #8bc34a;
  --emby-color: #43a047;
  --session-direct: #00e676;
  --session-transcode: #ff7043;
  --progress-fill: #66bb6a;
}

/* Orange theme */
:root[data-theme="orange"] {
  --bg: #1a0900;
  --text-main: #fff3e0;
  --text-muted: #ffcc80;
  --text-faint: #ef6c00;
  --card-bg: #2a1200;
  --border-offline: #5d3412;
  --btn-bg: #2a1200;
  --btn-border: #ff9800;
  --btn-text: #ffcc80;
  --btn-bg-hover: #341702;
  --btn-text-hover: #ffffff;
  --plex-color: #ff9800;
  --jellyfin-color: #ffb74d;
  --emby-color: #ff7043;
  --session-direct: #a5d6a7;
  --session-transcode: #ff5722;
  --progress-fill: #ff9800;
}

/* Light theme with subtle borders */
:root[data-theme="light"] {
  --bg: #f4f5f7;
  --text-main: #111111;
  --text-muted: #555555;
  --text-faint: #888888;
  --card-bg: #ffffff;
  --border-offline: #cccccc;
  --btn-bg: #ffffff;
  --btn-border: #cccccc;
  --btn-text: #333333;
  --btn-bg-hover: #f0f0f0;
  --btn-text-hover: #111111;
  --plex-color: #1976d2;
  --jellyfin-color: #7b1fa2;
  --emby-color: #388e3c;
  --session-direct: #2e7d32;
  --session-transcode: #c62828;
  --progress-fill: #1976d2;
}

/* Almost borderless light theme */
:root[data-theme="light-borderless"] {
  --bg: #f8f9fb;
  --text-main: #111111;
  --text-muted: #555555;
  --text-faint: #888888;
  --card-bg: #ffffff;
  --border-offline: #e0e0e0;
  --btn-bg: #ffffff;
  --btn-border: #dddddd;
  --btn-text: #333333;
  --btn-bg-hover: #f2f3f6;
  --btn-text-hover: #111111;
  --plex-color: #1976d2;
  --jellyfin-color: #7b1fa2;
  --emby-color: #388e3c;
  --session-direct: #2e7d32;
  --session-transcode: #c62828;
  --progress-fill: #1976d2;
}