:root {
  --bex-page-bg: #121212;
  --bex-page-bg-welfare: #0e0e0e;
  --bex-text-primary: #ffffff;
  --bex-text-secondary: #888888;
  --bex-text-tertiary: #666666;
  --bex-border: #2c2c2c;
  --bex-border-soft: #1f1f1f;
  --bex-card-bg: #141414;
  --bex-card-bg-soft: rgba(255, 255, 255, 0.03);
  --bex-task-card-bg: rgba(255, 255, 255, 0.03);
  --bex-level-tabs-bg: rgba(255, 255, 255, 0.05);
  --bex-card-bg-strong: #1a1a1a;
  --bex-modal-bg: #1a1a1a;
  --bex-progress-bg: rgba(255, 255, 255, 0.1);
  --bex-reward-bg: #2b2b2b;
  --bex-brand: #fd6f23;
  --bex-brand-start: #f5a623;
  --bex-brand-end: #ff6b35;
  --bex-overlay-bg: rgba(0, 0, 0, 0.7);
  --bex-card-shadow: none;
  --bex-back-icon-color: #ffffff;
  --bex-card-bg-dark: #1F1F1F;
}

html.theme-light,
body.theme-light,
.container.theme-light {
  --bex-page-bg: #ffffff;
  --bex-page-bg-welfare: #ffffff;
  --bex-text-primary: #121212;
  --bex-text-secondary: #888888;
  --bex-text-tertiary: #888888;
  --bex-border: #e8e8e8;
  --bex-border-soft: #efefef;
  --bex-card-bg: #ffffff;
  --bex-card-bg-soft: rgba(255, 255, 255, 0.03);
  --bex-task-card-bg: #ffffff;
  --bex-level-tabs-bg: rgba(18, 18, 18, 0.03);
  --bex-card-bg-strong: #ffffff;
  --bex-modal-bg: #ffffff;
  --bex-progress-bg: #ebebeb;
  --bex-reward-bg: #ebebeb;
  --bex-overlay-bg: rgba(0, 0, 0, 0.7);
  --bex-card-shadow: 2px 2px 14px rgba(0, 0, 0, 0.08);
  --bex-brand-start: #fd6f23;
  --bex-brand-end: #fd6f23;
  --bex-back-icon-color: #121212;
  --bex-card-bg-dark: #F3F3F3;
}

html.theme-light,
html.theme-light body {
  background: var(--bex-page-bg);
  color: var(--bex-text-primary);
}

html.theme-light .loading-overlay,
html.theme-light .error-overlay {
  background: var(--bex-page-bg);
  background-color: var(--bex-page-bg);
}

html.theme-light .loading-content,
html.theme-light .error-content,
html.theme-light .modal-content {
  background: var(--bex-modal-bg);
  border-color: var(--bex-border);
}

html.theme-light .loading-spinner {
  border-top-color: var(--bex-brand);
}

html.theme-light .loading-text,
html.theme-light .error-text {
  color: var(--bex-text-primary);
}