/**
 * CompReadyDad Theme System
 * Indigo Spotlight palette with 4-mode support
 */

:root {
    /* Core Brand Colors - Indigo Spotlight */
    --cdd-primary: #4F46E5;       /* indigo-600 */
    --cdd-primary-light: #6366F1;  /* indigo-500 */
    --cdd-primary-dark: #4338CA;   /* indigo-700 */
    --cdd-secondary: #8B5CF6;      /* violet-500 */
    --cdd-secondary-light: #A78BFA; /* violet-400 */
    --cdd-accent: #F59E0B;         /* amber-500 */
    --cdd-accent-light: #FBBF24;   /* amber-400 */
    --cdd-navy: #312E81;           /* indigo-900 */
    --cdd-navy-dark: #0F172A;      /* slate-900 */
    --cdd-steel: #3A4A5C;

    /* Legacy aliases (mapped to new palette) */
    --cdd-copper: #4F46E5;
    --cdd-copper-light: #6366F1;
    --cdd-copper-dark: #4338CA;
    --cdd-gold: #8B5CF6;
    --cdd-gold-light: #A78BFA;
    --cdd-orange: #F59E0B;

    /* Mode Variables - Default: Game + Light */
    --bg-page: linear-gradient(135deg, #EEF2FF 0%, #EDE9FE 50%, #F5F3FF 100%);
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-card-solid: #FFFFFF;
    --text-heading: #312E81;
    --text-body: #4A5568;
    --accent-1: var(--cdd-primary);
    --accent-2: var(--cdd-secondary);
    --border-color: rgba(79, 70, 229, 0.4);
    --glow-accent: rgba(79, 70, 229, 0.15);
}

/* Game + Dark Mode */
[data-clean-mode="false"][data-dark-mode="true"] {
    --bg-page: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%);
    --bg-card: rgba(30, 41, 59, 0.8);
    --bg-card-solid: #1E293B;
    --text-heading: #A5B4FC;
    --text-body: #CBD5E1;
    --accent-1: #818CF8;
    --accent-2: #A78BFA;
    --border-color: rgba(129, 140, 248, 0.3);
    --glow-accent: rgba(79, 70, 229, 0.25);
}

/* Clean + Light Mode */
[data-clean-mode="true"][data-dark-mode="false"] {
    --bg-page: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-solid: #FFFFFF;
    --text-heading: #111827;
    --text-body: #4B5563;
    --accent-1: #2563EB;
    --accent-2: #3B82F6;
    --border-color: #E5E7EB;
    --glow-accent: transparent;
}

/* Clean + Dark Mode */
[data-clean-mode="true"][data-dark-mode="true"] {
    --bg-page: #0F172A;
    --bg-card: #1E293B;
    --bg-card-solid: #1E293B;
    --text-heading: #F9FAFB;
    --text-body: #9CA3AF;
    --accent-1: #60A5FA;
    --accent-2: #93C5FD;
    --border-color: #374151;
    --glow-accent: transparent;
}

/* Custom Color Classes - New Indigo Palette */
.text-dd-300 { color: #A5B4FC; }
.text-dd-400 { color: #818CF8; }
.text-dd-500 { color: #6366F1; }
.text-dd-600 { color: #4F46E5; }
.text-dd-700 { color: #4338CA; }
.text-dd-800 { color: #3730A3; }
.text-dd-900 { color: #312E81; }

.bg-dd-50 { background-color: #EEF2FF; }
.bg-dd-100 { background-color: #E0E7FF; }
.bg-dd-200 { background-color: #C7D2FE; }
.bg-dd-500 { background-color: #6366F1; }
.bg-dd-600 { background-color: #4F46E5; }

.text-dd-accent-400 { color: #A78BFA; }
.text-dd-accent-500 { color: #8B5CF6; }
.text-dd-accent-600 { color: #7C3AED; }

.bg-dd-accent-400 { background-color: #A78BFA; }
.bg-dd-accent-500 { background-color: #8B5CF6; }
.bg-dd-accent-600 { background-color: #7C3AED; }

.text-dd-gold-400 { color: #FBBF24; }
.text-dd-gold-500 { color: #F59E0B; }
.text-dd-gold-600 { color: #D97706; }

.bg-dd-gold-400 { background-color: #FBBF24; }
.bg-dd-gold-500 { background-color: #F59E0B; }
.bg-dd-gold-600 { background-color: #D97706; }

/* Legacy copper/gold classes (mapped to new colors) */
.text-copper-300 { color: #A5B4FC; }
.text-copper-500 { color: #6366F1; }
.text-copper-600 { color: #4F46E5; }
.text-copper-700 { color: #4338CA; }
.text-copper-800 { color: #3730A3; }

.bg-copper-100 { background-color: #E0E7FF; }
.bg-copper-200 { background-color: #C7D2FE; }
.bg-copper-500 { background-color: #6366F1; }
.bg-copper-600 { background-color: #4F46E5; }

.text-gold-400 { color: #A78BFA; }
.text-gold-500 { color: #8B5CF6; }
.text-gold-600 { color: #7C3AED; }

.bg-gold-100 { background-color: #EDE9FE; }
.bg-gold-500 { background-color: #8B5CF6; }
.bg-gold-600 { background-color: #7C3AED; }

.text-steel-500 { color: #3A4A5C; }
.text-steel-600 { color: #2D3A48; }

.bg-steel-500 { background-color: #3A4A5C; }
.bg-steel-600 { background-color: #2D3A48; }

.bg-navy-900 { background-color: #0F172A; }

/* Border utilities with new colors */
.border-dd-500\/20 { border-color: rgba(99, 102, 241, 0.2); }
.border-dd-500\/30 { border-color: rgba(99, 102, 241, 0.3); }
.border-dd-500\/40 { border-color: rgba(99, 102, 241, 0.4); }

.border-copper-500\/20 { border-color: rgba(99, 102, 241, 0.2); }
.border-copper-500\/30 { border-color: rgba(99, 102, 241, 0.3); }
.border-copper-500\/40 { border-color: rgba(99, 102, 241, 0.4); }

/* Background utilities with opacity */
.bg-dd-500\/10 { background-color: rgba(99, 102, 241, 0.1); }
.bg-dd-500\/20 { background-color: rgba(99, 102, 241, 0.2); }
.bg-dd-600\/20 { background-color: rgba(79, 70, 229, 0.2); }
.bg-dd-600\/30 { background-color: rgba(79, 70, 229, 0.3); }

.bg-copper-500\/10 { background-color: rgba(99, 102, 241, 0.1); }
.bg-copper-500\/20 { background-color: rgba(99, 102, 241, 0.2); }
.bg-copper-600\/20 { background-color: rgba(79, 70, 229, 0.2); }
.bg-copper-600\/30 { background-color: rgba(79, 70, 229, 0.3); }

.bg-gold-600\/20 { background-color: rgba(139, 92, 246, 0.2); }
.bg-orange-600\/20 { background-color: rgba(245, 158, 11, 0.2); }

/* Shadow utilities */
.shadow-dd-500\/10 { --tw-shadow-color: rgba(99, 102, 241, 0.1); }
.shadow-dd-500\/20 { --tw-shadow-color: rgba(99, 102, 241, 0.2); }
.shadow-dd-500\/25 { --tw-shadow-color: rgba(99, 102, 241, 0.25); }

.shadow-copper-500\/10 { --tw-shadow-color: rgba(99, 102, 241, 0.1); }
.shadow-copper-500\/20 { --tw-shadow-color: rgba(99, 102, 241, 0.2); }
.shadow-copper-500\/25 { --tw-shadow-color: rgba(99, 102, 241, 0.25); }

/* Gradient text utility */
.bg-gradient-to-r.from-dd-500.to-dd-accent-500 {
    background-image: linear-gradient(to right, #6366F1, #8B5CF6);
}

.bg-gradient-to-r.from-dd-600.to-dd-700 {
    background-image: linear-gradient(to right, #4F46E5, #4338CA);
}

.bg-gradient-to-r.from-dd-600.to-dd-accent-600 {
    background-image: linear-gradient(to right, #4F46E5, #7C3AED);
}

/* Legacy gradient support */
.bg-gradient-to-r.from-copper-500.to-gold-500 {
    background-image: linear-gradient(to right, #6366F1, #8B5CF6);
}

.bg-gradient-to-r.from-copper-600.to-copper-700 {
    background-image: linear-gradient(to right, #4F46E5, #4338CA);
}

.bg-gradient-to-r.from-copper-600.to-gold-600 {
    background-image: linear-gradient(to right, #4F46E5, #7C3AED);
}

/* Focus rings */
.focus\:ring-dd-500:focus {
    --tw-ring-color: #6366F1;
}

.focus\:ring-copper-500:focus {
    --tw-ring-color: #6366F1;
}

/* Industrial animations for Game mode - now Indigo */
@keyframes industrial-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes dd-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(79, 70, 229, 0.3); }
    50% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.5); }
}

@keyframes copper-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(79, 70, 229, 0.3); }
    50% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.5); }
}

/* Apply glow in Game mode */
[data-clean-mode="false"] .glow-dd {
    animation: dd-glow 2s ease-in-out infinite;
}

[data-clean-mode="false"] .glow-copper {
    animation: copper-glow 2s ease-in-out infinite;
}

/* Smooth transitions */
* {
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
}

/* Disable transitions for transform-based animations */
.hover\:scale-\[1\.02\]:hover {
    transition-property: transform;
}