:root,
[data-mode="dark"] {
  --bg-deep: #08080d;
  --bg-gradient-1: rgba(173, 255, 47, 0.04);
  --bg-gradient-2: rgba(100, 181, 246, 0.03);
  --card-bg: #1c1c22;
  --card-border: rgba(255, 255, 255, 0.06);
  --card-shadow-dark: rgb(8, 8, 12);
  --card-shadow-light: rgb(45, 45, 55);
  --text-primary: #f2f2f7;
  --text-secondary: rgba(242, 242, 247, 0.5);
  --display-bg: rgba(0, 0, 0, 0.35);
  --display-glow: rgba(173, 255, 47, 0.08);
  --btn-bg: #25252d;
  --btn-shadow-dark: rgb(12, 12, 16);
  --btn-shadow-light: rgb(50, 50, 60);
  --btn-text: #ececf0;
  --overlay: rgba(0, 0, 0, 0.65);
  --panel-border: rgba(255, 255, 255, 0.08);
  --glass: rgba(28, 28, 34, 0.85);
}

[data-mode="light"] {
  --bg-deep: #e4e8ee;
  --bg-gradient-1: rgba(100, 181, 246, 0.12);
  --bg-gradient-2: rgba(173, 255, 47, 0.08);
  --card-bg: #f4f5f8;
  --card-border: rgba(255, 255, 255, 0.9);
  --card-shadow-dark: rgb(190, 194, 202);
  --card-shadow-light: rgb(255, 255, 255);
  --text-primary: #14141a;
  --text-secondary: rgba(20, 20, 26, 0.45);
  --display-bg: rgba(255, 255, 255, 0.75);
  --display-glow: rgba(100, 181, 246, 0.1);
  --btn-bg: #f0f1f5;
  --btn-shadow-dark: rgb(200, 204, 212);
  --btn-shadow-light: rgb(255, 255, 255);
  --btn-text: #2a2a32;
  --overlay: rgba(10, 10, 20, 0.4);
  --panel-border: rgba(0, 0, 0, 0.07);
  --glass: rgba(244, 245, 248, 0.92);
}

[data-color="green"] {
  --accent: #b8ff3c;
  --accent-soft: rgba(184, 255, 60, 0.2);
  --accent-dim: rgba(184, 255, 60, 0.12);
  --accent-glow: rgba(184, 255, 60, 0.5);
  --accent-text: #121408;
  --magic-bg: linear-gradient(135deg, #d4f56e 0%, #a8e020 100%);
  --magic-border: #b8ff3c;
}

[data-color="blue"] {
  --accent: #5eb3ff;
  --accent-soft: rgba(94, 179, 255, 0.2);
  --accent-dim: rgba(94, 179, 255, 0.12);
  --accent-glow: rgba(94, 179, 255, 0.5);
  --accent-text: #081220;
  --magic-bg: linear-gradient(135deg, #8ec8ff 0%, #4a9ee8 100%);
  --magic-border: #5eb3ff;
}

[data-color="purple"] {
  --accent: #d49ef0;
  --accent-soft: rgba(212, 158, 240, 0.2);
  --accent-dim: rgba(212, 158, 240, 0.12);
  --accent-glow: rgba(212, 158, 240, 0.5);
  --accent-text: #180a20;
  --magic-bg: linear-gradient(135deg, #e8c0f8 0%, #c080e0 100%);
  --magic-border: #d49ef0;
}

[data-color="orange"] {
  --accent: #ffb04a;
  --accent-soft: rgba(255, 176, 74, 0.2);
  --accent-dim: rgba(255, 176, 74, 0.12);
  --accent-glow: rgba(255, 176, 74, 0.5);
  --accent-text: #1a1006;
  --magic-bg: linear-gradient(135deg, #ffd080 0%, #f0a030 100%);
  --magic-border: #ffb04a;
}

[data-color="pink"] {
  --accent: #ff8cb8;
  --accent-soft: rgba(255, 140, 184, 0.2);
  --accent-dim: rgba(255, 140, 184, 0.12);
  --accent-glow: rgba(255, 140, 184, 0.5);
  --accent-text: #1a0812;
  --magic-bg: linear-gradient(135deg, #ffb8d4 0%, #f070a8 100%);
  --magic-border: #ff8cb8;
}

[data-color="teal"] {
  --accent: #3ecfb8;
  --accent-soft: rgba(62, 207, 184, 0.2);
  --accent-dim: rgba(62, 207, 184, 0.12);
  --accent-glow: rgba(62, 207, 184, 0.5);
  --accent-text: #061816;
  --magic-bg: linear-gradient(135deg, #70e0cc 0%, #30b8a0 100%);
  --magic-border: #3ecfb8;
}

[data-color="green"] { --theme-color: #1c1c22; }
[data-color="blue"] { --theme-color: #1a2430; }
[data-color="purple"] { --theme-color: #221828; }
[data-color="orange"] { --theme-color: #282018; }
[data-color="pink"] { --theme-color: #281820; }
[data-color="teal"] { --theme-color: #142824; }

[data-mode="light"][data-color="green"] { --theme-color: #f4f5f8; }
[data-mode="light"][data-color="blue"] { --theme-color: #eef4fa; }
[data-mode="light"][data-color="purple"] { --theme-color: #f4eef8; }
[data-mode="light"][data-color="orange"] { --theme-color: #faf4ee; }
[data-mode="light"][data-color="pink"] { --theme-color: #faf0f4; }
[data-mode="light"][data-color="teal"] { --theme-color: #eef8f6; }