/* =========================
   THEME UTILITIES
========================= */

.bg-theme {
  background: var(--bg-primary);
  transition: background 0.2s;
}

.bg-theme-secondary {
  background: var(--bg-secondary);
  transition: background 0.2s;
}

.card-theme {
  background: var(--bg-card-primary);
  transition: background 0.2s;
}

.card-theme-secondary {
  background: var(--bg-card-secondary);
  transition: background 0.2s;
}

.text-theme {
  color: var(--text-primary);
  transition: color 0.2s;
}

.text-theme-secondary {
  color: var(--text-secondary);
  transition: color 0.2s;
}

.text-theme-muted {
  color: var(--text-primary-secondary);
  transition: color 0.2s;
}

.border-theme {
  border-color: var(--border-color);
}


html.card-bg-off,
html.theme-light.card-bg-off {
  --bg-card-primary: transparent;
  --bg-card-secondary: transparent;
}


/* =========================
   DECK THEME COLORS
========================= */

.theme-slate {
  --bg-card-primary: #e2e8f0;
  --bg-card-secondary: #f1f5f9;
}

.theme-zinc {
  --bg-card-primary: #e4e4e7;
  --bg-card-secondary: #f4f4f5;
}

.theme-rose {
  --bg-card-primary: #fecdd3;
  --bg-card-secondary: #ffe4e6;
}

.theme-orange {
  --bg-card-primary: #fed7aa;
  --bg-card-secondary: #ffedd5;
}

.theme-amber {
  --bg-card-primary: #fde68a;
  --bg-card-secondary: #fef3c7;
}

.theme-lime {
  --bg-card-primary: #d9f99d;
  --bg-card-secondary: #ecfccb;
}

.theme-emerald {
  --bg-card-primary: #a7f3d0;
  --bg-card-secondary: #d1fae5;
}

.theme-teal {
  --bg-card-primary: #99f6e4;
  --bg-card-secondary: #ccfbf1;
}

.theme-sky {
  --bg-card-primary: #bae6fd;
  --bg-card-secondary: #e0f2fe;
}

.theme-violet {
  --bg-card-primary: #ddd6fe;
  --bg-card-secondary: #ede9fe;
}

.theme-pink {
  --bg-card-primary: #fbcfe8;
  --bg-card-secondary: #fce7f3;
}

.theme-fuchsia {
  --bg-card-primary: #f0abfc;
  --bg-card-secondary: #fae8ff;
}

.theme-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.theme-swatch:hover {
  transform: scale(1.2);
}

.theme-swatch--active {
  border-color: white;
  transform: scale(1.15);
}

.theme-slate, .theme-zinc, .theme-rose, .theme-orange, .theme-amber,
.theme-lime, .theme-emerald, .theme-teal, .theme-sky, .theme-violet,
.theme-pink, .theme-fuchsia {
  --text-primary: #000000;
  --text-secondary: rgba(0, 0, 0, 0.6);
}

html.theme-dark .theme-slate { --bg-card-primary: #c7cdd4; --bg-card-secondary: #d5d9dc; }
html.theme-dark .theme-zinc { --bg-card-primary: #c9c9cc; --bg-card-secondary: #d7d6d8; }
html.theme-dark .theme-rose { --bg-card-primary: #e0b4b9; --bg-card-secondary: #e1c8c8; }
html.theme-dark .theme-orange { --bg-card-primary: #e0bd95; --bg-card-secondary: #e1d0bb; }
html.theme-dark .theme-amber { --bg-card-primary: #dfca79; --bg-card-secondary: #e0d5b0; }
html.theme-dark .theme-lime { --bg-card-primary: #bfd88a; --bg-card-secondary: #d0dab3; }
html.theme-dark .theme-emerald { --bg-card-primary: #93d6b7; --bg-card-secondary: #b8e0ca; }
html.theme-dark .theme-teal { --bg-card-primary: #86d8c9; --bg-card-secondary: #b4dad5; }
html.theme-dark .theme-sky { --bg-card-primary: #a4cadf; --bg-card-secondary: #c5d4df; }
html.theme-dark .theme-violet { --bg-card-primary: #c3bbe0; --bg-card-secondary: #d1cce0; }
html.theme-dark .theme-pink { --bg-card-primary: #ddb6cc; --bg-card-secondary: #decbd5; }
html.theme-dark .theme-fuchsia { --bg-card-primary: #d396de; --bg-card-secondary: #dccbe0; }