/* ==========================================================================
   Neon Custom Designer - Style & Neon Glow Definitions
   ========================================================================== */

:root {
  --neon-color: #ff007f;
  --neon-glow: rgba(255, 0, 127, 0.85);
  --neon-ambient: rgba(255, 0, 127, 0.25);
  --grid-color: rgba(255, 255, 255, 0.05);
  --grid-major-color: rgba(255, 255, 255, 0.12);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #111827;
}
::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Canvas Viewport */
.canvas-viewport {
  position: relative;
  overflow: hidden;
  background-color: #0b0f17;
  user-select: none;
}

/* Millimeter Grid Background */
.bg-grid-mm {
  background-size: 20px 20px, 100px 100px;
  background-image: 
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-major-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major-color) 1px, transparent 1px);
}

/* Realistic Wall Backgrounds */
.bg-wall-brick {
  background-color: #121214;
  background-image: radial-gradient(circle at 50% 50%, rgba(25, 25, 30, 0.6) 0%, rgba(10, 10, 12, 0.95) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(0, 0, 0, 0.8) 28px, rgba(0, 0, 0, 0.8) 32px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 60px, transparent 60px, transparent 120px);
  background-size: 100% 100%, 120px 32px, 120px 32px;
}

.bg-wall-wood {
  background-color: #17110c;
  background-image: radial-gradient(circle at 50% 50%, rgba(45, 30, 20, 0.5) 0%, rgba(15, 10, 8, 0.95) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(0, 0, 0, 0.3) 120px, rgba(0, 0, 0, 0.6) 122px);
}

.bg-wall-concrete {
  background-color: #1a1e24;
  background-image: radial-gradient(circle at 50% 50%, rgba(35, 42, 52, 0.6) 0%, rgba(12, 16, 22, 0.95) 100%);
}

.bg-wall-dark {
  background-color: #0d1117;
  background-image: radial-gradient(circle at 50% 45%, rgba(22, 30, 46, 0.8) 0%, rgba(8, 11, 17, 0.98) 100%);
}

/* Color Palette Swatches */
.color-swatch {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.color-swatch:hover {
  transform: scale(1.15);
}

.color-swatch.active {
  transform: scale(1.2);
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* Tooltip & Floating badges */
.badge-spec {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}