/* GET4CARD — color theme identities (compose with data-theme light/dark) */
/* Default get4card tokens live in store.css. Only non-default themes override here. */

html {
  transition:
    background-color 0.28s ease,
    color 0.28s ease;
}

html[data-color-theme],
html[data-color-theme] body {
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

/* ========== VIOLET + Night ========== */
html[data-color-theme="violet"]:not([data-theme="light"]) {
  --accent-rgb: 139, 92, 246;
  --secondary-rgb: 167, 139, 250;
  --bg: #09060f;
  --bg-elevated: #120c1c;
  --bg-card: #171022;
  --bg-card-hover: #1e1530;
  --bg-soft: #0d0916;
  --pink: #8b5cf6;
  --pink-hot: #c4b5fd;
  --pink-deep: #6d28d9;
  --purple: #a78bfa;
  --blue: #818cf8;
  --cyan: #c4b5fd;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  --glow-pink: 0 10px 34px rgba(var(--accent-rgb), 0.38);
  --glow-purple: 0 0 60px rgba(var(--secondary-rgb), 0.32);
  --dropdown-bg: #140e20;
  --sidebar-bg: #0c0814;
  --input-bg: #130e1d;
  --badge-bg: rgba(var(--accent-rgb), 0.18);
  --badge-text: #ddd6fe;
  --ring: rgba(var(--accent-rgb), 0.48);
  --hero-spot:
    radial-gradient(circle at 72% 38%, rgba(var(--accent-rgb), 0.32), transparent 44%),
    radial-gradient(circle at 18% 8%, rgba(192, 132, 252, 0.14), transparent 36%);
  --surface-1: #171022;
  --code: #c4b5fd;
  --primary: var(--pink);
  --primary-hover: var(--pink-hot);
  --primary-soft: rgba(var(--accent-rgb), 0.16);
  --secondary: var(--purple);
  --gradient-primary: linear-gradient(135deg, #7c3aed, #c084fc);
  --glow: var(--glow-pink);
  --chrome-bg: #09060f;
  --badge-fee-text: #ddd6fe;
  --badge-fee-border: rgba(var(--accent-rgb), 0.35);
  --info-accent-bg: rgba(var(--accent-rgb), 0.12);
  --info-accent-border: rgba(var(--accent-rgb), 0.3);
}

/* ========== VIOLET + Light ========== */
html[data-color-theme="violet"][data-theme="light"] {
  --accent-rgb: 109, 40, 217;
  --secondary-rgb: 124, 58, 237;
  --bg: #f4f1f8;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f4fb;
  --bg-soft: #ebe4f4;
  --pink: #7c3aed;
  --pink-hot: #6d28d9;
  --pink-deep: #5b21b6;
  --purple: #7c3aed;
  --blue: #4f46e5;
  --cyan: #6d28d9;
  --shadow: 0 12px 30px rgba(49, 20, 90, 0.1);
  --glow-pink: 0 10px 24px rgba(var(--accent-rgb), 0.18);
  --glow-purple: 0 0 36px rgba(var(--secondary-rgb), 0.12);
  --header-bg: rgba(244, 241, 248, 0.94);
  --dropdown-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --input-bg: #ffffff;
  --badge-bg: rgba(var(--accent-rgb), 0.12);
  --badge-text: #5b21b6;
  --ring: rgba(var(--accent-rgb), 0.34);
  --hero-spot:
    radial-gradient(circle at 78% 18%, rgba(var(--accent-rgb), 0.08), transparent 38%),
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.05), transparent 32%);
  --surface-1: #ffffff;
  --code: #6d28d9;
  --primary: var(--pink);
  --primary-hover: var(--pink-hot);
  --primary-soft: rgba(var(--accent-rgb), 0.1);
  --secondary: var(--purple);
  --gradient-primary: linear-gradient(135deg, #7c3aed, #a78bfa);
  --glow: var(--glow-pink);
  --chrome-bg: #f4f1f8;
  --badge-fee-text: #5b21b6;
  --badge-fee-border: rgba(var(--accent-rgb), 0.3);
  --info-accent-bg: rgba(var(--accent-rgb), 0.1);
  --info-accent-border: rgba(var(--accent-rgb), 0.28);
}

/* ========== OCEAN + Night ========== */
html[data-color-theme="ocean"]:not([data-theme="light"]) {
  --accent-rgb: 14, 165, 233;
  --secondary-rgb: 56, 189, 248;
  --bg: #040910;
  --bg-elevated: #0a1420;
  --bg-card: #0e1a28;
  --bg-card-hover: #132434;
  --bg-soft: #071018;
  --pink: #0ea5e9;
  --pink-hot: #7dd3fc;
  --pink-deep: #0369a1;
  --purple: #38bdf8;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  --glow-pink: 0 10px 34px rgba(var(--accent-rgb), 0.36);
  --glow-purple: 0 0 60px rgba(var(--secondary-rgb), 0.28);
  --dropdown-bg: #0c1724;
  --sidebar-bg: #061018;
  --input-bg: #0c1722;
  --badge-bg: rgba(var(--accent-rgb), 0.16);
  --badge-text: #bae6fd;
  --ring: rgba(var(--accent-rgb), 0.48);
  --hero-spot:
    radial-gradient(circle at 72% 38%, rgba(var(--accent-rgb), 0.3), transparent 44%),
    radial-gradient(circle at 18% 8%, rgba(34, 211, 238, 0.12), transparent 36%);
  --surface-1: #0e1a28;
  --code: #7dd3fc;
  --primary: var(--pink);
  --primary-hover: var(--pink-hot);
  --primary-soft: rgba(var(--accent-rgb), 0.16);
  --secondary: var(--purple);
  --gradient-primary: linear-gradient(135deg, #0369a1, #38bdf8);
  --glow: var(--glow-pink);
  --chrome-bg: #040910;
  --badge-fee-text: #bae6fd;
  --badge-fee-border: rgba(var(--accent-rgb), 0.35);
  --info-accent-bg: rgba(var(--accent-rgb), 0.12);
  --info-accent-border: rgba(var(--accent-rgb), 0.3);
}

/* ========== OCEAN + Light ========== */
html[data-color-theme="ocean"][data-theme="light"] {
  --accent-rgb: 2, 132, 199;
  --secondary-rgb: 3, 105, 161;
  --bg: #eef5fa;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f8fc;
  --bg-soft: #e2edf5;
  --pink: #0284c7;
  --pink-hot: #0369a1;
  --pink-deep: #075985;
  --purple: #0ea5e9;
  --blue: #1d4ed8;
  --cyan: #0e7490;
  --shadow: 0 12px 30px rgba(8, 47, 73, 0.1);
  --glow-pink: 0 10px 24px rgba(var(--accent-rgb), 0.16);
  --glow-purple: 0 0 36px rgba(var(--secondary-rgb), 0.1);
  --header-bg: rgba(238, 245, 250, 0.94);
  --dropdown-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --input-bg: #ffffff;
  --badge-bg: rgba(var(--accent-rgb), 0.12);
  --badge-text: #075985;
  --ring: rgba(var(--accent-rgb), 0.34);
  --hero-spot:
    radial-gradient(circle at 78% 18%, rgba(var(--accent-rgb), 0.08), transparent 38%),
    radial-gradient(circle at 12% 0%, rgba(14, 165, 233, 0.05), transparent 32%);
  --surface-1: #ffffff;
  --code: #0369a1;
  --primary: var(--pink);
  --primary-hover: var(--pink-hot);
  --primary-soft: rgba(var(--accent-rgb), 0.1);
  --secondary: var(--purple);
  --gradient-primary: linear-gradient(135deg, #0284c7, #38bdf8);
  --glow: var(--glow-pink);
  --chrome-bg: #eef5fa;
  --badge-fee-text: #075985;
  --badge-fee-border: rgba(var(--accent-rgb), 0.3);
  --info-accent-bg: rgba(var(--accent-rgb), 0.1);
  --info-accent-border: rgba(var(--accent-rgb), 0.28);
}

/* ========== EMERALD + Night ========== */
html[data-color-theme="emerald"]:not([data-theme="light"]) {
  --accent-rgb: 16, 185, 129;
  --secondary-rgb: 52, 211, 153;
  --bg: #050a08;
  --bg-elevated: #0a1410;
  --bg-card: #0f1c16;
  --bg-card-hover: #14261d;
  --bg-soft: #08110d;
  --pink: #10b981;
  --pink-hot: #6ee7b7;
  --pink-deep: #047857;
  --purple: #34d399;
  --blue: #2dd4bf;
  --cyan: #5eead4;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  --glow-pink: 0 10px 34px rgba(var(--accent-rgb), 0.34);
  --glow-purple: 0 0 60px rgba(var(--secondary-rgb), 0.26);
  --dropdown-bg: #0c1812;
  --sidebar-bg: #07110c;
  --input-bg: #0c1712;
  --badge-bg: rgba(var(--accent-rgb), 0.16);
  --badge-text: #a7f3d0;
  --ring: rgba(var(--accent-rgb), 0.48);
  --hero-spot:
    radial-gradient(circle at 72% 38%, rgba(var(--accent-rgb), 0.28), transparent 44%),
    radial-gradient(circle at 18% 8%, rgba(52, 211, 153, 0.12), transparent 36%);
  --surface-1: #0f1c16;
  --code: #6ee7b7;
  --primary: var(--pink);
  --primary-hover: var(--pink-hot);
  --primary-soft: rgba(var(--accent-rgb), 0.16);
  --secondary: var(--purple);
  --gradient-primary: linear-gradient(135deg, #047857, #34d399);
  --glow: var(--glow-pink);
  --chrome-bg: #050a08;
  --badge-fee-text: #a7f3d0;
  --badge-fee-border: rgba(var(--accent-rgb), 0.35);
  --info-accent-bg: rgba(var(--accent-rgb), 0.12);
  --info-accent-border: rgba(var(--accent-rgb), 0.3);
}

/* ========== EMERALD + Light ========== */
html[data-color-theme="emerald"][data-theme="light"] {
  --accent-rgb: 5, 150, 105;
  --secondary-rgb: 4, 120, 87;
  --bg: #eef6f2;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f3faf6;
  --bg-soft: #e2efe8;
  --pink: #059669;
  --pink-hot: #047857;
  --pink-deep: #065f46;
  --purple: #10b981;
  --blue: #0f766e;
  --cyan: #0d9488;
  --shadow: 0 12px 30px rgba(6, 78, 59, 0.1);
  --glow-pink: 0 10px 24px rgba(var(--accent-rgb), 0.16);
  --glow-purple: 0 0 36px rgba(var(--secondary-rgb), 0.1);
  --header-bg: rgba(238, 246, 242, 0.94);
  --dropdown-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --input-bg: #ffffff;
  --badge-bg: rgba(var(--accent-rgb), 0.12);
  --badge-text: #065f46;
  --ring: rgba(var(--accent-rgb), 0.34);
  --hero-spot:
    radial-gradient(circle at 78% 18%, rgba(var(--accent-rgb), 0.08), transparent 38%),
    radial-gradient(circle at 12% 0%, rgba(16, 185, 129, 0.05), transparent 32%);
  --surface-1: #ffffff;
  --code: #047857;
  --primary: var(--pink);
  --primary-hover: var(--pink-hot);
  --primary-soft: rgba(var(--accent-rgb), 0.1);
  --secondary: var(--purple);
  --gradient-primary: linear-gradient(135deg, #059669, #34d399);
  --glow: var(--glow-pink);
  --chrome-bg: #eef6f2;
  --badge-fee-text: #065f46;
  --badge-fee-border: rgba(var(--accent-rgb), 0.3);
  --info-accent-bg: rgba(var(--accent-rgb), 0.1);
  --info-accent-border: rgba(var(--accent-rgb), 0.28);
}

/* Color theme picker */
.color-theme-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.color-theme-selector--compact {
  gap: 0.45rem;
}

.color-theme-option {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.35rem 0.5rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  background: var(--surface-soft, var(--bg-soft));
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease,
    background 0.2s ease;
}

.color-theme-option:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.color-theme-option.is-active {
  border-color: rgba(var(--accent-rgb), 0.65);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.25),
    0 0 22px rgba(var(--accent-rgb), 0.28);
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.08);
}

.color-theme-swatch {
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

.color-theme-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.35), transparent 45%);
  pointer-events: none;
}

.color-theme-option.is-active .color-theme-swatch {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 2px rgba(var(--accent-rgb), 0.35),
    0 0 16px rgba(var(--accent-rgb), 0.45);
}

.color-theme-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.color-theme-option.is-active .color-theme-check {
  opacity: 1;
  transform: scale(1);
}

.color-theme-option__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: center;
}

.color-theme-swatch--get4card {
  background: linear-gradient(145deg, #ff2d78, #8b5cf6);
}
.color-theme-swatch--violet {
  background: linear-gradient(145deg, #7c3aed, #c4b5fd);
}
.color-theme-swatch--ocean {
  background: linear-gradient(145deg, #0369a1, #38bdf8);
}
.color-theme-swatch--emerald {
  background: linear-gradient(145deg, #047857, #34d399);
}

.account-color-theme-card,
.account-theme-card {
  display: grid;
  gap: 0.75rem;
}

.account-color-theme-card {
  margin-bottom: 0.85rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.account-color-theme-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.account-color-theme-card-head strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
}

.account-color-theme-card-head span {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.account-color-theme-card-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

html[data-theme="light"] .color-theme-option {
  background: #fff;
}

html[data-theme="light"] .color-theme-option.is-active {
  background: rgba(var(--accent-rgb), 0.06);
}

@media (max-width: 420px) {
  .color-theme-option__label {
    font-size: 0.62rem;
  }
  .color-theme-swatch {
    width: 1.5rem;
    height: 1.5rem;
  }
}