:root {
  --bg-color: var(--bg);
  --bgt-color: var(--card-bg);
  --bgi-color: #f0f0f0;
  --bgf-color: var(--card-bg);
  --color: var(--text);
  --incolor: #2c2c2c;
  --ttcolor: #6e6d6d;
  --wpa-color: #ffffff;
  --wpa-border: #d5dbe3;
  --wpa-border-hover: #c3ccd8;
  --wpa-hover: #f2f5f9;
  --wpa-text: #1f2937;
  --wpa-muted: #64748b;
}

[data-theme="light"] {
  --bg-color: #e7ebee;
  --bgt-color: var(--card-bg);
  --bgi-color: #f0f0f0;
  --bgf-color: var(--card-bg);
  --color: var(--text);
  --incolor: #2c2c2c;
  --ttcolor: #6e6d6d;
  --wpa-color: #ffffff;
  --wpa-border: #d5dbe3;
  --wpa-border-hover: #c3ccd8;
  --wpa-hover: #f2f5f9;
  --wpa-text: #1f2937;
  --wpa-muted: #64748b;
}

[data-theme="dark"] {
  --bg-color: #212121;
  --bgt-color: #313131;
  --bgi-color: #414141;
  --bgf-color: #303030;
  --color: var(--text);
  --incolor: #cccccc;
  --ttcolor: #dbdbdb;
  --wpa-color: #010409;
  --wpa-border: #3d444d;
  --wpa-border-hover: #6e7681;
  --wpa-hover: #141b23;
  --wpa-text: #d1d5db;
  --wpa-muted: #9ca3af;
}