/* Color Variables - Light Theme */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg2: #f5f4ff;
  --bg-secondary: #eeeeff;

  --txt: #0d1117;
  --txt2: #1e1b3a;
  --txt3: #4a4870;
  --txt4: #7b79a0;

  --panel: #f0efff;
  --panel2: #e5e3ff;
  --glass: rgba(255, 255, 255, 0.98);
  --border: #d0ceee;
  --border2: #b8b5e8;

  --v1: #7c6cff;
  --v2: #9b8fff;
  --v3: #b5adff;
  --v4: #d5d0ff;
  --v5: rgba(124, 108, 255, 0.12);

  --b1: #5c4cff;
  --b2: #7c6cff;
  --b3: #9b8fff;

  --grad: linear-gradient(135deg, #7c6cff 0%, #5c4cff 100%);
  --grad2: linear-gradient(135deg, #9b8fff 0%, #7c6cff 100%);
  --grad-shine: linear-gradient(105deg, #7c6cff, #5c4cff, #9b8fff, #7c6cff);

  --shadow-card: 0 2px 8px rgba(124, 108, 255, 0.08);
  --shadow-glow: 0 0 20px rgba(124, 108, 255, 0.12);
  --shadow-btn: 0 4px 16px rgba(124, 108, 255, 0.2);

  --r1: 14px;
  --r2: 20px;
  --r3: 28px;
  --r4: 40px;
}

/* Color Variables - Dark Theme */
:root[data-theme="dark"] {
  --bg: #0d0b1a;
  --bg2: #120f24;
  --bg-secondary: #1a1630;
  
  --txt: #f0eeff;
  --txt2: #c8bfff;
  --txt3: #8b7fc4;
  --txt4: #564f7a;
  
  --panel: rgba(255, 255, 255, 0.04);
  --panel2: rgba(255, 255, 255, 0.07);
  --glass: rgba(255, 255, 255, 0.06);
  --border: rgba(124, 108, 255, 0.18);
  --border2: rgba(124, 108, 255, 0.32);
  
  --v1: #9b8fff;
  --v2: #b5adff;
  --v3: #c8c3ff;
  --v4: #d9d5ff;
  --v5: rgba(155, 143, 255, 0.12);

  --b1: #7c6cff;
  --b2: #9b8fff;
  --b3: #b5adff;

  --grad: linear-gradient(135deg, #9b8fff 0%, #7c6cff 100%);
  --grad2: linear-gradient(135deg, #b5adff 0%, #9b8fff 100%);
  --grad-shine: linear-gradient(105deg, #9b8fff, #7c6cff, #b5adff, #9b8fff);

  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --shadow-glow: 0 0 40px rgba(124, 108, 255, 0.35);
  --shadow-btn: 0 8px 32px rgba(124, 108, 255, 0.5);
  
  --r1: 14px;
  --r2: 20px;
  --r3: 28px;
  --r4: 40px;
}

:root[data-theme="dark"][data-theme-variant="ocean"] {
  --bg: #071521;
  --bg2: #0b1d2d;
  --bg-secondary: #0f2740;
  --txt: #eef8ff;
  --txt2: #c8e6ff;
  --txt3: #85b6d8;
  --txt4: #527796;
  --panel: rgba(8, 28, 44, 0.8);
  --panel2: rgba(14, 40, 62, 0.88);
  --glass: rgba(10, 31, 49, 0.72);
  --border: rgba(54, 162, 235, 0.2);
  --border2: rgba(54, 162, 235, 0.38);
  --v1: #38bdf8;
  --v2: #0ea5e9;
  --v3: #7dd3fc;
  --v4: #bae6fd;
  --v5: rgba(14, 165, 233, 0.16);
  --b1: #0284c7;
  --b2: #0ea5e9;
  --b3: #67e8f9;
  --grad: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  --grad2: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
  --grad-shine: linear-gradient(105deg, #38bdf8, #0ea5e9, #67e8f9, #38bdf8);
}

:root[data-theme="dark"][data-theme-variant="sunset"] {
  --bg: #1a0f14;
  --bg2: #24131a;
  --bg-secondary: #321723;
  --txt: #fff4ef;
  --txt2: #ffd8cc;
  --txt3: #d7a28d;
  --txt4: #966555;
  --panel: rgba(42, 18, 26, 0.82);
  --panel2: rgba(55, 23, 31, 0.9);
  --glass: rgba(54, 22, 30, 0.7);
  --border: rgba(249, 115, 22, 0.22);
  --border2: rgba(251, 146, 60, 0.38);
  --v1: #fb923c;
  --v2: #f97316;
  --v3: #fdba74;
  --v4: #fed7aa;
  --v5: rgba(249, 115, 22, 0.16);
  --b1: #ea580c;
  --b2: #f97316;
  --b3: #fb7185;
  --grad: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --grad2: linear-gradient(135deg, #fb923c 0%, #f43f5e 100%);
  --grad-shine: linear-gradient(105deg, #fb923c, #f97316, #fb7185, #fb923c);
}

:root[data-theme="dark"][data-theme-variant="emerald"] {
  --bg: #081711;
  --bg2: #0c1f18;
  --bg-secondary: #102a20;
  --txt: #effdf6;
  --txt2: #c6f6df;
  --txt3: #81c9a6;
  --txt4: #4a8063;
  --panel: rgba(10, 30, 22, 0.8);
  --panel2: rgba(14, 40, 29, 0.88);
  --glass: rgba(12, 38, 28, 0.72);
  --border: rgba(16, 185, 129, 0.2);
  --border2: rgba(52, 211, 153, 0.36);
  --v1: #34d399;
  --v2: #10b981;
  --v3: #6ee7b7;
  --v4: #a7f3d0;
  --v5: rgba(16, 185, 129, 0.16);
  --b1: #059669;
  --b2: #10b981;
  --b3: #34d399;
  --grad: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad2: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --grad-shine: linear-gradient(105deg, #34d399, #10b981, #6ee7b7, #34d399);
}

/* Global easing and misc */
:root {
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Default theme is light */
:root {
  --bg: #ffffff;
  --bg2: #f5f6f8;
  --bg-secondary: #eff0f4;

  --txt: #0d1117;
  --txt2: #24292f;
  --txt3: #57606a;
  --txt4: #848d97;

  --panel: #f0f1f6;
  --panel2: #e8e9f1;
  --glass: rgba(255, 255, 255, 0.98);
  --border: #d5d6e8;
  --border2: #c9cadd;

  --v1: #5c3fb8;
  --v2: #6b3fd8;
  --v3: #8b5dd8;
  --v4: #c8b8ff;
  --v5: rgba(107, 63, 216, 0.12);

  --b1: #1f5ce0;
  --b2: #3561ff;
  --b3: #6a8aff;

  --grad: linear-gradient(135deg, #5c3fb8 0%, #1f5ce0 100%);
  --grad2: linear-gradient(135deg, #6b3fd8 0%, #3561ff 100%);
  --grad-shine: linear-gradient(105deg, #5c3fb8, #1f5ce0, #6b3fd8, #5c3fb8);

  --shadow-card: 0 2px 8px rgba(107, 63, 216, 0.08);
  --shadow-glow: 0 0 20px rgba(107, 63, 216, 0.1);
  --shadow-btn: 0 4px 16px rgba(107, 63, 216, 0.15);

  --r1: 14px;
  --r2: 20px;
  --r3: 28px;
  --r4: 40px;
}