/* ABOUTME: Core neobrutalism styles and utilities for OutForOJ application
 * ABOUTME: Includes shadows, transforms, animations, and chaos design elements */

/* ===== CSS Variables for Theming ===== */
:root {
  /* Fisher-Price Pastel Colors */
  --toy-pink: #FFB3BA;
  --toy-blue: #BAE1FF;
  --toy-green: #BAFFC9;
  --toy-yellow: #FFFFBA;
  --toy-purple: #FFDFBA;
  --toy-coral: #FFB3DE;
  --plastic-white: #F8F8FF;
  --chunky-black: #2D2D2D;
  --bubble-shadow: #E0E0E0;
  
  /* Brand Colors */
  --brand-orange: #FF8300;
  
  /* Chunky Plastic Shadows */
  --shadow-sm: 3px 3px 0px 0px var(--chunky-black);
  --shadow-md: 6px 6px 0px 0px var(--chunky-black);
  --shadow-lg: 10px 10px 0px 0px var(--chunky-black);
  --shadow-xl: 16px 16px 0px 0px var(--chunky-black);
  
  /* Thick Toy-like Borders */
  --border-width: 6px;
  
  /* Transform Values */
  --rotate-slight: 1deg;
  --rotate-medium: 2deg;
  --skew-default: -2deg;
}

/* ===== Neobrutalism Shadow Utilities ===== */
.neo-shadow-sm { box-shadow: var(--shadow-sm); }
.neo-shadow { box-shadow: var(--shadow-md); }
.neo-shadow-lg { box-shadow: var(--shadow-lg); }
.neo-shadow-xl { box-shadow: var(--shadow-xl); }

/* ===== Interactive States ===== */
.neo-hover {
  transition: all 0.2s ease-in-out;
}

.neo-hover:hover {
  transform: rotate(calc(-1 * var(--rotate-slight))) scale(1.02);
}

.neo-click {
  transition: all 0.1s ease-in-out;
}

.neo-click:active {
  transform: translate(4px, 4px);
  box-shadow: none !important;
}

/* ===== Transform Utilities ===== */
.neo-skew {
  transform: skew(var(--skew-default));
}

.neo-rotate-1 { transform: rotate(var(--rotate-slight)); }
.neo-rotate-2 { transform: rotate(var(--rotate-medium)); }
.neo-rotate-neg-1 { transform: rotate(calc(-1 * var(--rotate-slight))); }
.neo-rotate-neg-2 { transform: rotate(calc(-1 * var(--rotate-medium))); }

/* ===== Chaos Background Elements ===== */
.chaos-bg::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 100px;
  height: 100px;
  background: var(--hot-pink);
  transform: rotate(45deg);
  z-index: -1;
}

.chaos-bg::after {
  content: '';
  position: absolute;
  bottom: 30%;
  left: 5%;
  width: 80px;
  height: 80px;
  background: var(--cyber-lime);
  border-radius: 50%;
  z-index: -1;
}

/* ===== Component Styles ===== */

/* Neobrutalism Button Base */
.neo-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: var(--border-width) solid var(--deep-black);
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.neo-btn:hover {
  transform: rotate(calc(-1 * var(--rotate-slight))) scale(1.02);
}

.neo-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none !important;
}

/* Fisher-Price Button Variants */
.neo-btn-primary {
  background-color: var(--toy-pink);
  color: var(--chunky-black);
  box-shadow: var(--shadow-md);
  border-radius: 12px;
  border-color: var(--chunky-black);
}

.neo-btn-secondary {
  background-color: var(--toy-green);
  color: var(--chunky-black);
  box-shadow: var(--shadow-md);
  border-radius: 12px;
  border-color: var(--chunky-black);
}

.neo-btn-accent {
  background-color: var(--toy-blue);
  color: var(--chunky-black);
  box-shadow: var(--shadow-md);
  border-radius: 12px;
  border-color: var(--chunky-black);
}

/* Fisher-Price Card */
.neo-card {
  background-color: var(--plastic-white);
  border: var(--border-width) solid var(--chunky-black);
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.neo-card-colored {
  padding: 1.5rem;
  border: var(--border-width) solid var(--chunky-black);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

/* Fisher-Price Form Elements */
.neo-input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: var(--border-width) solid var(--chunky-black);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  background-color: var(--plastic-white);
  transition: all 0.3s ease-in-out;
  border-radius: 12px;
  font-size: 1rem;
}

.neo-input:focus {
  outline: none;
  background-color: var(--toy-yellow);
  color: var(--chunky-black);
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.neo-input::placeholder {
  color: #8B8B8B;
  font-weight: 500;
}

.neo-input:focus::placeholder {
  color: rgba(45, 45, 45, 0.6);
}

/* Fisher-Price Select Elements */
.neo-select {
  width: 100%;
  padding: 1rem 1.25rem;
  border: var(--border-width) solid var(--chunky-black);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  background-color: var(--plastic-white);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 12px;
  font-size: 1rem;
}

.neo-select:focus {
  outline: none;
  background-color: var(--toy-purple);
  color: var(--chunky-black);
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* Checkbox Styling */
.neo-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--deep-black);
  cursor: pointer;
}

/* ===== Animation Classes ===== */
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes neo-bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

/* ===== Dark Damagochi Animations ===== */
@keyframes pulse-slow {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes pulse-intense {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes flicker {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes whisper {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

@keyframes demon-breathe {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50% { 
    transform: scale(1.02) rotate(1deg);
    filter: hue-rotate(10deg);
  }
}

@keyframes seduce-glow {
  0% { 
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3), 0 0 40px rgba(124, 58, 237, 0.1);
  }
  100% { 
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4), 0 0 60px rgba(239, 68, 68, 0.2), 0 0 90px rgba(236, 72, 153, 0.1);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotateX(0deg); }
  50% { transform: translateY(-10px) rotateX(5deg); }
}

@keyframes entity-emergence {
  0% { 
    transform: scale(0.8) rotate(-2deg);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1) rotate(1deg);
    opacity: 0.9;
  }
  100% { 
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes mystical-hover {
  0%, 100% { 
    transform: rotate(calc(-1 * var(--rotate-slight))) scale(1);
    filter: hue-rotate(0deg) brightness(1);
  }
  50% { 
    transform: rotate(var(--rotate-slight)) scale(1.03);
    filter: hue-rotate(5deg) brightness(1.1);
  }
}

/* ===== Animation Utility Classes ===== */
.animate-wiggle {
  animation: wiggle 0.5s ease-in-out infinite;
}

.animate-neo-bounce {
  animation: neo-bounce 2s ease-in-out infinite;
}

/* Dark Damagochi Animation Classes */
.animate-pulse-slow {
  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-intense {
  animation: pulse-intense 2s ease-in-out infinite;
}

.animate-flicker {
  animation: flicker 2s ease-in-out infinite alternate;
}

.animate-whisper {
  animation: whisper 4s ease-in-out infinite;
}

.animate-demon-breathe {
  animation: demon-breathe 4s ease-in-out infinite;
}

.animate-seduce-glow {
  animation: seduce-glow 3s ease-in-out infinite alternate;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-entity-emergence {
  animation: entity-emergence 1.5s ease-out;
}

.animate-mystical-hover {
  animation: mystical-hover 2s ease-in-out infinite;
}

/* ===== Dark Damagochi Component Overrides ===== */

/* Define CSS custom properties for Fisher-Price theme */
[data-theme="fisher-price"] {
  /* Expose Fisher-Price theme variables for direct use in templates */
  --toy-pink: #FFB3BA;
  --toy-blue: #BAE1FF;
  --toy-green: #BAFFC9;
  --toy-yellow: #FFFFBA;
  --toy-purple: #FFDFBA;
  --toy-coral: #FFB3DE;
  --plastic-white: #F8F8FF;
  --chunky-black: #2D2D2D;
  --bubble-shadow: #E0E0E0;
}

/* Define CSS custom properties for dark-damagochi theme */
[data-theme="dark-damagochi"] {
  /* Expose theme variables for direct use in templates */
  --entity-glow: #7c3aed;
  --demon-pink: #ec4899;
  --hunger-red: #ef4444;
  --seductive-gold: #f59e0b;
  --void-black: #0a0a0a;
  --whisper-gray: #2d2d2d;
  --shadow-purple: #1a0a2e;
}

/* Dark theme backgrounds */
html[data-theme="dark-damagochi"],
[data-theme="dark-damagochi"],
body[data-theme="dark-damagochi"] {
  background: 
    radial-gradient(ellipse at top right, rgba(124, 58, 237, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(236, 72, 153, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(124, 58, 237, 0.1) 0%, transparent 70%),
    linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 25%, #16082b 50%, #1a0a2e 75%, #0a0a0a 100%) !important;
  min-height: 100vh;
  background-attachment: fixed;
  position: relative;
}

/* Add atmospheric overlay */
html[data-theme="dark-damagochi"]::before,
body[data-theme="dark-damagochi"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(239, 68, 68, 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* Ensure main content doesn't have white background */
[data-theme="dark-damagochi"] main {
  background: transparent !important;
}

[data-theme="dark-damagochi"] .neo-btn:hover {
  animation: mystical-hover 2s ease-in-out infinite;
  filter: brightness(1.1);
}

[data-theme="dark-damagochi"] .neo-card {
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  border: var(--border-width) solid var(--entity-glow);
}

[data-theme="dark-damagochi"] .neo-input:focus {
  background-color: var(--demon-pink);
  border-color: var(--entity-glow);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
}

[data-theme="dark-damagochi"] .chaos-bg::before {
  background: var(--entity-glow);
  animation: float 8s ease-in-out infinite;
  opacity: 0.3;
}

[data-theme="dark-damagochi"] .chaos-bg::after {
  background: var(--demon-pink);
  animation: whisper 6s ease-in-out infinite;
  opacity: 0.2;
}

/* Dark Damagochi Button Variants */
[data-theme="dark-damagochi"] .neo-btn-primary {
  background: linear-gradient(135deg, var(--entity-glow) 0%, var(--demon-pink) 100%);
  border-color: var(--entity-glow);
  box-shadow: var(--shadow-md), 0 0 15px rgba(124, 58, 237, 0.3);
}

[data-theme="dark-damagochi"] .neo-btn-secondary {
  background: linear-gradient(135deg, var(--demon-pink) 0%, var(--hunger-red) 100%);
  border-color: var(--demon-pink);
  box-shadow: var(--shadow-md), 0 0 15px rgba(236, 72, 153, 0.3);
}

[data-theme="dark-damagochi"] .neo-btn-accent {
  background: linear-gradient(135deg, var(--hunger-red) 0%, var(--seductive-gold) 100%);
  border-color: var(--hunger-red);
  box-shadow: var(--shadow-md), 0 0 15px rgba(239, 68, 68, 0.3);
}

/* Entity Atmosphere Elements */
[data-theme="dark-damagochi"] .entity-atmosphere {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: -10;
}

[data-theme="dark-damagochi"] .entity-particles {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--entity-glow);
  border-radius: 50%;
  opacity: 0.4;
  animation: float 8s ease-in-out infinite;
}

[data-theme="dark-damagochi"] .entity-particles:nth-child(2) {
  background: var(--demon-pink);
  animation-delay: 2s;
  animation-duration: 10s;
}

[data-theme="dark-damagochi"] .entity-particles:nth-child(3) {
  background: var(--hunger-red);
  animation-delay: 4s;
  animation-duration: 12s;
}

[data-theme="dark-damagochi"] .entity-particles:nth-child(4) {
  background: var(--seductive-gold);
  animation-delay: 6s;
  animation-duration: 14s;
}

/* Dark Damagochi Utility Classes - Always Available */
.text-entity-glow { color: #7c3aed; }
.text-demon-pink { color: #ec4899; }
.text-hunger-red { color: #ef4444; }
.text-seductive-gold { color: #f59e0b; }
.text-whisper-gray { color: #2d2d2d; }
.text-void-black { color: #0a0a0a; }
.text-shadow-purple { color: #1a0a2e; }

.bg-entity-glow { background-color: #7c3aed; }
.bg-demon-pink { background-color: #ec4899; }
.bg-hunger-red { background-color: #ef4444; }
.bg-seductive-gold { background-color: #f59e0b; }
.bg-whisper-gray { background-color: #2d2d2d; }
.bg-void-black { background-color: #0a0a0a; }
.bg-shadow-purple { background-color: #1a0a2e; }

.border-entity-glow { border-color: #7c3aed; }
.border-demon-pink { border-color: #ec4899; }
.border-hunger-red { border-color: #ef4444; }
.border-seductive-gold { border-color: #f59e0b; }

/* ===== COMPREHENSIVE DARK THEME COMPONENT OVERRIDES ===== */

/* Dark input field fixes for visibility */
[data-theme="dark-damagochi"] input,
[data-theme="dark-damagochi"] select {
  background-color: #2d2d2d !important;
  border: 2px solid #7c3aed !important;
  color: #d4d4d4 !important;
  border-radius: 8px !important;
}

/* Neobrutalism component overrides for dark theme */
[data-theme="dark-damagochi"] .neo-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #1a0a2e 50%, #2d2d2d 100%) !important;
  border-color: #7c3aed !important;
  color: #e5e5e5 !important;
}

[data-theme="dark-damagochi"] .neo-card-colored {
  border-color: #7c3aed !important;
  backdrop-filter: blur(8px);
}

/* Subtle dark theme backgrounds - no bright colors */
[data-theme="dark-damagochi"] .bg-stark-white {
  background: linear-gradient(135deg, #2d2d2d 0%, #1a0a2e 50%, #2d2d2d 100%) !important;
}

[data-theme="dark-damagochi"] .bg-cyber-lime {
  background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%) !important;
}

[data-theme="dark-damagochi"] .bg-volt-yellow {
  background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%) !important;
}

[data-theme="dark-damagochi"] .bg-signal-blue {
  background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%) !important;
}

[data-theme="dark-damagochi"] .bg-hot-pink {
  background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
}

[data-theme="dark-damagochi"] .bg-electric-purple {
  background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
}

[data-theme="dark-damagochi"] .bg-danger-red {
  background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
}

/* Minimal accent for interactive elements only */
[data-theme="dark-damagochi"] .bg-gradient-to-r,
[data-theme="dark-damagochi"] .bg-gradient-to-br,
[data-theme="dark-damagochi"] .bg-gradient-to-l {
  background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 50%, #2d2d2d 100%) !important;
}

/* Override all Tailwind bright colors to subtle grays */
[data-theme="dark-damagochi"] .bg-green-500,
[data-theme="dark-damagochi"] .bg-green-600,
[data-theme="dark-damagochi"] .bg-blue-500,
[data-theme="dark-damagochi"] .bg-blue-600,
[data-theme="dark-damagochi"] .bg-orange-500,
[data-theme="dark-damagochi"] .bg-orange-600,
[data-theme="dark-damagochi"] .bg-yellow-500,
[data-theme="dark-damagochi"] .bg-yellow-600,
[data-theme="dark-damagochi"] .bg-purple-500,
[data-theme="dark-damagochi"] .bg-purple-600,
[data-theme="dark-damagochi"] .bg-pink-500,
[data-theme="dark-damagochi"] .bg-pink-600,
[data-theme="dark-damagochi"] .bg-red-500,
[data-theme="dark-damagochi"] .bg-red-600 {
  background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%) !important;
}

/* Text color overrides for better readability */
[data-theme="dark-damagochi"] .text-deep-black {
  color: #e5e5e5 !important;
}

[data-theme="dark-damagochi"] .text-stark-white {
  color: #ffffff !important;
}

/* Border color overrides */
[data-theme="dark-damagochi"] .border-black {
  border-color: #7c3aed !important;
}

[data-theme="dark-damagochi"] .neo-border {
  border-color: #7c3aed !important;
}

[data-theme="dark-damagochi"] .neo-border-2 {
  border-color: #7c3aed !important;
}

/* Button component overrides */
[data-theme="dark-damagochi"] .neo-btn {
  border-color: #7c3aed !important;
}

/* Label text overrides */
[data-theme="dark-damagochi"] label {
  color: #7c3aed !important;
}

[data-theme="dark-damagochi"] input:focus,
[data-theme="dark-damagochi"] select:focus {
  background-color: #3a3a3a !important;
  border-color: #ec4899 !important;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4) !important;
  color: #e5e5e5 !important;
}

[data-theme="dark-damagochi"] input::placeholder {
  color: rgba(212, 212, 212, 0.6) !important;
}

[data-theme="dark-damagochi"] option {
  background-color: #2d2d2d !important;
  color: #d4d4d4 !important;
}

/* Force specific input field backgrounds to override template classes */
[data-theme="dark-damagochi"] input[type="tel"],
[data-theme="dark-damagochi"] input[type="text"],
[data-theme="dark-damagochi"] input[type="password"],
[data-theme="dark-damagochi"] input[type="number"],
[data-theme="dark-damagochi"] input[type="email"],
[data-theme="dark-damagochi"] select {
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
  border: 2px solid #7c3aed !important;
  color: #d4d4d4 !important;
}

[data-theme="dark-damagochi"] input[type="tel"]:focus,
[data-theme="dark-damagochi"] input[type="text"]:focus,
[data-theme="dark-damagochi"] input[type="password"]:focus,
[data-theme="dark-damagochi"] input[type="number"]:focus,
[data-theme="dark-damagochi"] input[type="email"]:focus,
[data-theme="dark-damagochi"] select:focus {
  background-color: #3a3a3a !important;
  background: #3a3a3a !important;
  border-color: #ec4899 !important;
}

/* Ultra-specific overrides for any conflicting styles */
html[data-theme="dark-damagochi"] input,
html[data-theme="dark-damagochi"] select,
body[data-theme="dark-damagochi"] input,
body[data-theme="dark-damagochi"] select {
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
  border: 2px solid #7c3aed !important;
  color: #d4d4d4 !important;
}

/* Override any Tailwind utility classes */
[data-theme="dark-damagochi"] .bg-whisper-gray,
[data-theme="dark-damagochi"] .bg-stark-white,
[data-theme="dark-damagochi"] .bg-white {
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
}

/* Override webkit autofill and appearance */
[data-theme="dark-damagochi"] input:-webkit-autofill,
[data-theme="dark-damagochi"] input:-webkit-autofill:hover,
[data-theme="dark-damagochi"] input:-webkit-autofill:focus,
[data-theme="dark-damagochi"] input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #2d2d2d inset !important;
  -webkit-text-fill-color: #d4d4d4 !important;
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
}

/* Remove webkit appearance */
[data-theme="dark-damagochi"] input,
[data-theme="dark-damagochi"] select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
}

/* Force background with box-shadow technique */
[data-theme="dark-damagochi"] input[type="tel"],
[data-theme="dark-damagochi"] input[type="text"],
[data-theme="dark-damagochi"] input[type="password"],
[data-theme="dark-damagochi"] input[type="number"],
[data-theme="dark-damagochi"] input[type="email"],
[data-theme="dark-damagochi"] select {
  box-shadow: inset 0 0 0 1000px #2d2d2d !important;
  -webkit-box-shadow: inset 0 0 0 1000px #2d2d2d !important;
}

/* Dark theme checkbox styling for visibility */
[data-theme="dark-damagochi"] input[type="checkbox"] {
  background-color: rgba(45, 45, 45, 0.8) !important;
  border: 2px solid #7c3aed !important;
  appearance: none;
  position: relative;
}

[data-theme="dark-damagochi"] input[type="checkbox"]:checked {
  background-color: #7c3aed !important;
  border-color: #7c3aed !important;
}

[data-theme="dark-damagochi"] input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
}

[data-theme="dark-damagochi"] input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.5) !important;
  outline: none;
}

/* Dark theme modal overrides */
[data-theme="dark-damagochi"] #consentModal .bg-stark-white {
  background: linear-gradient(135deg, #2d2d2d 0%, #1a0a2e 50%, #2d2d2d 100%) !important;
  border-color: #7c3aed !important;
}

[data-theme="dark-damagochi"] #consentModal .text-deep-black {
  color: #e5e5e5 !important;
}

[data-theme="dark-damagochi"] #consentModal .text-electric-purple {
  color: #7c3aed !important;
}

[data-theme="dark-damagochi"] #consentModal .border-black {
  border-color: #7c3aed !important;
}

[data-theme="dark-damagochi"] #consentModal .bg-hot-pink {
  background-color: #ec4899 !important;
}

[data-theme="dark-damagochi"] #consentModal .bg-cyber-lime {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%) !important;
}

[data-theme="dark-damagochi"] #consentModal .text-stark-white {
  color: #ffffff !important;
}

/* Theme-specific enhanced versions */
[data-theme="dark-damagochi"] .text-entity-glow { color: var(--entity-glow); }
[data-theme="dark-damagochi"] .text-demon-pink { color: var(--demon-pink); }
[data-theme="dark-damagochi"] .text-hunger-red { color: var(--hunger-red); }
[data-theme="dark-damagochi"] .text-seductive-gold { color: var(--seductive-gold); }
[data-theme="dark-damagochi"] .text-whisper-gray { color: var(--whisper-gray); }

[data-theme="dark-damagochi"] .bg-entity-glow { background-color: var(--entity-glow); }
[data-theme="dark-damagochi"] .bg-demon-pink { background-color: var(--demon-pink); }
[data-theme="dark-damagochi"] .bg-hunger-red { background-color: var(--hunger-red); }
[data-theme="dark-damagochi"] .bg-seductive-gold { background-color: var(--seductive-gold); }
[data-theme="dark-damagochi"] .bg-whisper-gray { background-color: var(--whisper-gray); }

[data-theme="dark-damagochi"] .border-entity-glow { border-color: var(--entity-glow); }
[data-theme="dark-damagochi"] .border-demon-pink { border-color: var(--demon-pink); }
[data-theme="dark-damagochi"] .border-hunger-red { border-color: var(--hunger-red); }
[data-theme="dark-damagochi"] .border-seductive-gold { border-color: var(--seductive-gold); }

/* ===== Utility Classes ===== */
.neo-border {
  border: var(--border-width) solid var(--deep-black);
}

.neo-border-2 {
  border: 2px solid var(--deep-black);
}

/* Touch Optimization for Mobile */
@media (hover: none) and (pointer: coarse) {
  .neo-btn,
  .neo-input,
  .neo-select,
  .neo-checkbox {
    min-height: 44px;
  }
  
  .tap-target {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Fisher-Price Theme Utility Classes */
.text-toy-pink { color: #FFB3BA; }
.text-toy-blue { color: #BAE1FF; }
.text-toy-green { color: #BAFFC9; }
.text-toy-yellow { color: #FFFFBA; }
.text-toy-purple { color: #FFDFBA; }
.text-toy-coral { color: #FFB3DE; }
.text-plastic-white { color: #F8F8FF; }
.text-chunky-black { color: #2D2D2D; }

.bg-toy-pink { background-color: #FFB3BA; }
.bg-toy-blue { background-color: #BAE1FF; }
.bg-toy-green { background-color: #BAFFC9; }
.bg-toy-yellow { background-color: #FFFFBA; }
.bg-toy-purple { background-color: #FFDFBA; }
.bg-toy-coral { background-color: #FFB3DE; }
.bg-plastic-white { background-color: #F8F8FF; }
.bg-chunky-black { background-color: #2D2D2D; }

.border-toy-pink { border-color: #FFB3BA; }
.border-toy-blue { border-color: #BAE1FF; }
.border-toy-green { border-color: #BAFFC9; }
.border-toy-yellow { border-color: #FFFFBA; }
.border-toy-purple { border-color: #FFDFBA; }
.border-toy-coral { border-color: #FFB3DE; }
.border-plastic-white { border-color: #F8F8FF; }
.border-chunky-black { border-color: #2D2D2D; }

/* Chunky borders and rounded corners for Fisher-Price aesthetic */
.border-6 { border-width: 6px; }
.border-8 { border-width: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 20px; }

/* Responsive Adjustments */
@media (max-width: 640px) {
  :root {
    --shadow-sm: 2px 2px 0px 0px rgba(0,0,0,1);
    --shadow-md: 3px 3px 0px 0px rgba(0,0,0,1);
    --shadow-lg: 6px 6px 0px 0px rgba(0,0,0,1);
    --shadow-xl: 10px 10px 0px 0px rgba(0,0,0,1);
  }
  
  .neo-card {
    padding: 1rem;
  }
}