/**
 * Primary color swatches – overrides --primary, --ring, --accent, etc. per data-primary.
 * Combine with data-theme="light" or "dark" on body.
 * --accent drives many backgrounds (e.g. sidebar actions, hover states).
 */

/* Orange (default) */
body[data-theme="light"][data-primary="orange"] {
  --primary: #845309;
  --primary-foreground: #ffffff;
  --ring: #845309;
  --primary-alpha: rgba(132, 83, 9, 0.1);
  --accent: #f2daba;
  --accent-foreground: #57534e;
}
body[data-theme="dark"][data-primary="orange"] {
  --primary: #F97316;
  --primary-foreground: #FFFFFF;
  --ring: #F97316;
  --primary-alpha: rgba(249, 115, 22, 0.1);
  --primary-hover: #EA580C;
  --accent: #1e4252;
  --accent-foreground: #E7E5E4;
}

/* Blue */
body[data-theme="light"][data-primary="blue"] {
  --primary: #1d4ed8;
  --primary-foreground: #ffffff;
  --ring: #1d4ed8;
  --primary-alpha: rgba(29, 78, 216, 0.1);
  --accent: #dbeafe;
  --accent-foreground: #1e3a8a;
}
body[data-theme="dark"][data-primary="blue"] {
  --primary: #2563eb;
  --primary-foreground: #FFFFFF;
  --ring: #2563eb;
  --primary-alpha: rgba(37, 99, 235, 0.1);
  --primary-hover: #3b82f6;
  --accent: #1e3a8a;
  --accent-foreground: #E7E5E4;
}

/* Red */
body[data-theme="light"][data-primary="red"] {
  --primary: #682020;
  --primary-foreground: #ffffff;
  --ring: #682020;
  --primary-alpha: rgba(104, 32, 32, 0.1);
  --accent: #fecaca;
  --accent-foreground: #450a0a;
}
body[data-theme="dark"][data-primary="red"] {
  --primary: #682020;
  --primary-foreground: #FFFFFF;
  --ring: #682020;
  --primary-alpha: rgba(104, 32, 32, 0.1);
  --primary-hover: #7c2828;
  --accent: #3f1a1a;
  --accent-foreground: #E7E5E4;
}

/* Grey (neutral) */
body[data-theme="light"][data-primary="grey"] {
  --primary: #6b7280;
  --primary-foreground: #ffffff;
  --ring: #6b7280;
  --primary-alpha: rgba(107, 114, 128, 0.1);
  --accent: #e5e7eb;
  --accent-foreground: #374151;
}
body[data-theme="dark"][data-primary="grey"] {
  --primary: #9ca3af;
  --primary-foreground: #111827;
  --ring: #9ca3af;
  --primary-alpha: rgba(156, 163, 175, 0.15);
  --primary-hover: #d1d5db;
  --accent: #4b5563;
  --accent-foreground: #E7E5E4;
}

/* Green */
body[data-theme="light"][data-primary="green"] {
  --primary: #10572a;
  --primary-foreground: #ffffff;
  --ring: #10572a;
  --primary-alpha: rgba(16, 87, 42, 0.1);
  --accent: #dcfce7;
  --accent-foreground: #14532d;
}
body[data-theme="dark"][data-primary="green"] {
  --primary: #10572a;
  --primary-foreground: #FFFFFF;
  --ring: #10572a;
  --primary-alpha: rgba(16, 87, 42, 0.1);
  --primary-hover: #166534;
  --accent: #052e16;
  --accent-foreground: #E7E5E4;
}

/* Teal */
body[data-theme="light"][data-primary="teal"] {
  --primary: #0f766e;
  --primary-foreground: #ffffff;
  --ring: #0f766e;
  --primary-alpha: rgba(15, 118, 110, 0.1);
  --accent: #ccfbf1;
  --accent-foreground: #134e4a;
}
body[data-theme="dark"][data-primary="teal"] {
  --primary: #0d9488;
  --primary-foreground: #FFFFFF;
  --ring: #0d9488;
  --primary-alpha: rgba(13, 148, 136, 0.1);
  --primary-hover: #14b8a6;
  --accent: #134e4a;
  --accent-foreground: #E7E5E4;
}

/* Violet */
body[data-theme="light"][data-primary="violet"] {
  --primary: #6d28d9;
  --primary-foreground: #ffffff;
  --ring: #6d28d9;
  --primary-alpha: rgba(109, 40, 217, 0.1);
  --accent: #ede9fe;
  --accent-foreground: #4c1d95;
}
body[data-theme="dark"][data-primary="violet"] {
  --primary: #7c3aed;
  --primary-foreground: #FFFFFF;
  --ring: #7c3aed;
  --primary-alpha: rgba(124, 58, 237, 0.1);
  --primary-hover: #8b5cf6;
  --accent: #2e1065;
  --accent-foreground: #E7E5E4;
}

/* Swatch row in sidebar – hidden in light mode (easter egg: only in dark) */
body[data-theme="light"] .sidebar-primary-swatches-wrap {
  display: none !important;
}

.sidebar-primary-swatches-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sidebar-primary-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  filter: brightness(var(--swatch-brightness, 1));
}

.sidebar-swatch-brightness-wrap {
  flex-shrink: 0;
  width: 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-swatch-brightness {
  width: 20px;
  height: 56px;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  cursor: pointer;
  background: transparent;
  accent-color: var(--primary, currentColor);
}

.sidebar-swatch-brightness:focus {
  outline: none;
}

.sidebar-swatch-brightness:focus-visible {
  box-shadow: 0 0 0 2px var(--ring, var(--primary));
}

.sidebar-primary-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Default theme swatch: symbol instead of color dot */
.sidebar-primary-swatch-default {
  background: var(--muted) !important;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-primary-swatch:hover {
  transform: scale(1.1);
}

.sidebar-primary-swatch:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring, var(--primary));
}

.sidebar-primary-swatch.primary-swatch-active {
  border-color: var(--foreground);
  box-shadow: 0 0 0 2px var(--primary);
}