/* Color palettes — solo acentos primarios; neutrales vienen de :root / html.light */

:root,
html[data-palette="arcane"] {
  --ambient-top: rgba(139, 92, 246, .18);
  --ambient-tr: rgba(91, 33, 182, .16);
  --ambient-bl: rgba(16, 185, 129, .07);
  --ambient-top-light: rgba(139, 92, 246, .10);
  --ambient-tr-light: rgba(91, 33, 182, .08);
  --header-accent: rgba(139, 92, 246, .10);
  --selection-bg: rgba(139, 92, 246, .35);
  --selection-bg-light: rgba(139, 92, 246, .25);
  --avatar-gradient-a: #6d28d9;
  --avatar-gradient-b: #8b5cf6;
  --logo-glow-rgb: 139, 92, 246;
  --primary-rgb: 139, 92, 246;
  --primary-deep-rgb: 91, 33, 182;
}

html[data-palette="ocean"] {
  --amber-700: #1d4ed8;
  --amber-600: #2563eb;
  --amber-500: #3b82f6;
  --amber-400: #60a5fa;
  --amber-300: #93c5fd;

  --arcane-700: #1d4ed8;
  --arcane-600: #2563eb;
  --arcane-500: #3b82f6;
  --arcane-400: #60a5fa;
  --arcane-300: #93c5fd;

  --glow-gold: 0 0 22px rgba(59, 130, 246, .40);
  --glow-arcane: 0 0 22px rgba(59, 130, 246, .40);

  --ambient-top: rgba(59, 130, 246, .20);
  --ambient-tr: rgba(37, 99, 235, .16);
  --ambient-bl: rgba(14, 165, 233, .08);
  --ambient-top-light: rgba(59, 130, 246, .12);
  --ambient-tr-light: rgba(37, 99, 235, .08);
  --header-accent: rgba(59, 130, 246, .12);
  --selection-bg: rgba(59, 130, 246, .35);
  --selection-bg-light: rgba(59, 130, 246, .22);
  --avatar-gradient-a: #2563eb;
  --avatar-gradient-b: #3b82f6;
  --logo-glow-rgb: 59, 130, 246;
  --primary-rgb: 59, 130, 246;
  --primary-deep-rgb: 37, 99, 235;
}

html[data-palette="ember"] {
  --amber-700: #b45309;
  --amber-600: #d97706;
  --amber-500: #f59e0b;
  --amber-400: #fbbf24;
  --amber-300: #fcd34d;

  --arcane-700: #c2410c;
  --arcane-600: #ea580c;
  --arcane-500: #f97316;
  --arcane-400: #fb923c;
  --arcane-300: #fdba74;

  --glow-gold: 0 0 22px rgba(249, 115, 22, .42);
  --glow-arcane: 0 0 22px rgba(249, 115, 22, .42);

  --ambient-top: rgba(249, 115, 22, .20);
  --ambient-tr: rgba(220, 38, 38, .14);
  --ambient-bl: rgba(245, 158, 11, .08);
  --ambient-top-light: rgba(249, 115, 22, .12);
  --ambient-tr-light: rgba(220, 38, 38, .08);
  --header-accent: rgba(249, 115, 22, .12);
  --selection-bg: rgba(249, 115, 22, .32);
  --selection-bg-light: rgba(249, 115, 22, .20);
  --avatar-gradient-a: #ea580c;
  --avatar-gradient-b: #f97316;
  --logo-glow-rgb: 249, 115, 22;
  --primary-rgb: 249, 115, 22;
  --primary-deep-rgb: 220, 38, 38;
}

html[data-palette="gold"] {
  --amber-700: #92650f;
  --amber-600: #a07d1f;
  --amber-500: #d4af37;
  --amber-400: #e8c766;
  --amber-300: #f3dd98;

  --arcane-700: #92650f;
  --arcane-600: #a07d1f;
  --arcane-500: #d4af37;
  --arcane-400: #e8c766;
  --arcane-300: #f3dd98;

  --glow-gold: 0 0 22px rgba(212, 175, 55, .45);
  --glow-arcane: 0 0 22px rgba(212, 175, 55, .38);

  --ambient-top: rgba(212, 175, 55, .18);
  --ambient-tr: rgba(160, 125, 31, .14);
  --ambient-bl: rgba(232, 199, 102, .06);
  --ambient-top-light: rgba(212, 175, 55, .10);
  --ambient-tr-light: rgba(160, 125, 31, .08);
  --header-accent: rgba(212, 175, 55, .12);
  --selection-bg: rgba(212, 175, 55, .30);
  --selection-bg-light: rgba(212, 175, 55, .18);
  --avatar-gradient-a: #a07d1f;
  --avatar-gradient-b: #d4af37;
  --logo-glow-rgb: 212, 175, 55;
  --primary-rgb: 212, 175, 55;
  --primary-deep-rgb: 160, 125, 31;
}

html[data-palette="forest"] {
  --amber-700: #047857;
  --amber-600: #059669;
  --amber-500: #10b981;
  --amber-400: #34d399;
  --amber-300: #6ee7b7;

  --arcane-700: #047857;
  --arcane-600: #059669;
  --arcane-500: #10b981;
  --arcane-400: #34d399;
  --arcane-300: #6ee7b7;

  --glow-gold: 0 0 22px rgba(16, 185, 129, .38);
  --glow-arcane: 0 0 22px rgba(16, 185, 129, .38);

  --ambient-top: rgba(16, 185, 129, .18);
  --ambient-tr: rgba(5, 150, 105, .14);
  --ambient-bl: rgba(52, 211, 153, .08);
  --ambient-top-light: rgba(16, 185, 129, .10);
  --ambient-tr-light: rgba(5, 150, 105, .08);
  --header-accent: rgba(16, 185, 129, .12);
  --selection-bg: rgba(16, 185, 129, .32);
  --selection-bg-light: rgba(16, 185, 129, .20);
  --avatar-gradient-a: #059669;
  --avatar-gradient-b: #10b981;
  --logo-glow-rgb: 16, 185, 129;
  --primary-rgb: 16, 185, 129;
  --primary-deep-rgb: 5, 150, 105;
}

html.light[data-palette="ocean"] {
  --glow-gold: 0 0 18px rgba(59, 130, 246, .25);
  --glow-arcane: 0 0 18px rgba(59, 130, 246, .25);
}

html.light[data-palette="ember"] {
  --glow-gold: 0 0 18px rgba(249, 115, 22, .22);
  --glow-arcane: 0 0 18px rgba(249, 115, 22, .22);
}

html.light[data-palette="gold"] {
  --glow-gold: 0 0 18px rgba(212, 175, 55, .24);
  --glow-arcane: 0 0 18px rgba(212, 175, 55, .20);
}

html.light[data-palette="forest"] {
  --glow-gold: 0 0 18px rgba(16, 185, 129, .22);
  --glow-arcane: 0 0 18px rgba(16, 185, 129, .22);
}

/* ---- Palette picker (profile) ---- */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: .75rem;
}

.palette-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.palette-option:hover:not(:disabled) {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.palette-option.active {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber-500) 25%, transparent);
}

.palette-option:disabled {
  opacity: .72;
  cursor: not-allowed;
}

.palette-option--locked {
  cursor: default;
}

.palette-option__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  min-width: 0;
}

.palette-option__swatches {
  display: flex;
  gap: .35rem;
  height: 28px;
  flex: 1;
  min-width: 0;
}

.palette-option__swatch {
  flex: 1;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
}

.palette-option__name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}

.palette-option__desc {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.palette-option__badge {
  flex-shrink: 0;
  font-size: .65rem;
  line-height: 1.2;
  white-space: nowrap;
}

.palette-option__price {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  color: var(--amber-400);
  white-space: nowrap;
  line-height: 1.2;
}

.palette-option--locked .palette-option__swatches {
  filter: grayscale(.25);
}

.palette-buy-form {
  margin-top: .15rem;
}

.palette-buy-form .btn {
  width: 100%;
  justify-content: center;
  font-size: .78rem;
  padding: .4rem .55rem;
}

.palette-picker-note {
  font-size: .82rem;
  color: var(--text-muted);
  margin: 0 0 .85rem;
}

.palette-picker-error {
  font-size: .82rem;
  color: var(--red-400);
  margin-top: .65rem;
}