/* RPG System-Specific Themes */

/* Default light theme (current state) */
.default-light,
.light-theme {
  /* Already handled by existing CSS */
}

/* Cosmere Dark Theme - Inspired by deep space and starlight */
.cosmere-dark {
  --bg-primary: #0a0a0f;           /* Deep space black */
  --bg-secondary: #1a1a2e;         /* Dark blue-black */
  --bg-tertiary: #16213e;          /* Deeper blue */
  --bg-card: #1e2749;              /* Card background */
  --bg-input: #2a3b5c;             /* Input backgrounds */
  
  --text-primary: #e8e9f0;         /* Light text */
  --text-secondary: #b8c2d9;       /* Muted text */
  --text-muted: #8892b0;           /* Very muted text */
  
  --border-primary: #2d3748;       /* Borders */
  --border-secondary: #4a5568;     /* Lighter borders */
  
  /* Skill colors - adjusted for dark theme */
  --skill-red: #ff6b6b;            /* Softer red */
  --skill-red-bg: rgba(255, 107, 107, 0.1);
  --skill-red-border: rgba(255, 107, 107, 0.3);
  
  --skill-blue: #74c0fc;           /* Softer blue */  
  --skill-blue-bg: rgba(116, 192, 252, 0.1);
  --skill-blue-border: rgba(116, 192, 252, 0.3);
  
  --skill-green: #69db7c;          /* Softer green */
  --skill-green-bg: rgba(105, 219, 124, 0.1);
  --skill-green-border: rgba(105, 219, 124, 0.3);
  
  /* Accent colors inspired by cosmic elements */
  --accent-stormlight: #a78bfa;    /* Purple-blue */
  --accent-star: #fbbf24;          /* Golden star */
  --accent-nebula: #ec4899;        /* Pink-magenta */
}

/* Apply Cosmere dark theme */
.cosmere-dark {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Character Form Dark Theme */
.cosmere-dark .min-h-screen {
  background-color: var(--bg-primary) !important;
}

/* Header and navigation updates */
.cosmere-dark .bg-white {
  background-color: var(--bg-secondary) !important;
}

.cosmere-dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.cosmere-dark .border-b {
  border-color: var(--border-primary) !important;
}

/* Text color updates */
.cosmere-dark .text-gray-600 {
  color: var(--text-secondary) !important;
}

.cosmere-dark .text-gray-800 {
  color: var(--text-primary) !important;
}

.cosmere-dark .text-gray-700 {
  color: var(--text-secondary) !important;
}

.cosmere-dark .text-gray-500 {
  color: var(--text-muted) !important;
}

/* Card backgrounds */
.cosmere-dark .bg-gray-50 {
  background-color: var(--bg-card) !important;
}

.cosmere-dark .bg-gray-100 {
  background-color: var(--bg-secondary) !important;
}

.cosmere-dark .bg-white {
  background-color: var(--bg-card) !important;
}

/* Input styling */
.cosmere-dark input[type="text"],
.cosmere-dark input[type="number"],
.cosmere-dark textarea,
.cosmere-dark select {
  background-color: var(--bg-input) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.cosmere-dark input[type="text"]:focus,
.cosmere-dark input[type="number"]:focus,
.cosmere-dark textarea:focus,
.cosmere-dark select:focus {
  border-color: var(--accent-stormlight) !important;
  box-shadow: 0 0 0 1px var(--accent-stormlight) !important;
}

/* Skill-specific styling for dark theme */
.cosmere-dark .text-red-800 {
  color: var(--skill-red) !important;
}

.cosmere-dark .bg-red-50 {
  background-color: var(--skill-red-bg) !important;
}

.cosmere-dark .border-red-200 {
  border-color: var(--skill-red-border) !important;
}

.cosmere-dark .focus\\:border-red-500:focus {
  border-color: var(--skill-red) !important;
}

.cosmere-dark .text-red-600 {
  color: var(--skill-red) !important;
}

/* Blue skills */
.cosmere-dark .text-blue-800 {
  color: var(--skill-blue) !important;
}

.cosmere-dark .bg-blue-50 {
  background-color: var(--skill-blue-bg) !important;
}

.cosmere-dark .border-blue-200 {
  border-color: var(--skill-blue-border) !important;
}

.cosmere-dark .focus\\:border-blue-500:focus {
  border-color: var(--skill-blue) !important;
}

.cosmere-dark .text-blue-600 {
  color: var(--skill-blue) !important;
}

/* Green skills */
.cosmere-dark .text-green-800 {
  color: var(--skill-green) !important;
}

.cosmere-dark .bg-green-50 {
  background-color: var(--skill-green-bg) !important;
}

.cosmere-dark .border-green-200 {
  border-color: var(--skill-green-border) !important;
}

.cosmere-dark .focus\\:border-green-500:focus {
  border-color: var(--skill-green) !important;
}

.cosmere-dark .text-green-600 {
  color: var(--skill-green) !important;
}

/* Borders and dividers */
.cosmere-dark .border-gray-200 {
  border-color: var(--border-primary) !important;
}

.cosmere-dark .border-gray-300 {
  border-color: var(--border-secondary) !important;
}

/* Red skill section borders */
.cosmere-dark .border-red-100 {
  border-color: var(--skill-red-border) !important;
}

/* Blue skill section borders */
.cosmere-dark .border-blue-100 {
  border-color: var(--skill-blue-border) !important;
}

/* Green skill section borders */
.cosmere-dark .border-green-100 {
  border-color: var(--skill-green-border) !important;
}

/* Button styling */
.cosmere-dark button {
  color: var(--text-primary) !important;
}

.cosmere-dark .text-red-600 {
  color: var(--skill-red) !important;
}

.cosmere-dark .hover\\:text-red-800:hover {
  color: var(--skill-red) !important;
}

.cosmere-dark .text-blue-600 {
  color: var(--skill-blue) !important;
}

.cosmere-dark .hover\\:text-blue-800:hover {
  color: var(--skill-blue) !important;
}

.cosmere-dark .text-green-600 {
  color: var(--skill-green) !important;
}

.cosmere-dark .hover\\:text-green-800:hover {
  color: var(--skill-green) !important;
}

/* Slider styling for dark theme */
.cosmere-dark .skill-slider {
  background-color: var(--bg-input) !important;
}

.cosmere-dark .red-slider::-webkit-slider-thumb {
  background-color: var(--skill-red) !important;
}

.cosmere-dark .blue-slider::-webkit-slider-thumb {
  background-color: var(--skill-blue) !important;
}

.cosmere-dark .green-slider::-webkit-slider-thumb {
  background-color: var(--skill-green) !important;
}

/* Additional colored section backgrounds */
.cosmere-dark .bg-purple-50 {
  background-color: rgba(167, 139, 250, 0.1) !important;
}

.cosmere-dark .text-purple-700 {
  color: var(--accent-stormlight) !important;
}

.cosmere-dark .border-purple-500 {
  border-color: rgba(167, 139, 250, 0.5) !important;
}

.cosmere-dark .bg-pink-50 {
  background-color: rgba(236, 72, 153, 0.1) !important;
}

.cosmere-dark .bg-emerald-50 {
  background-color: rgba(105, 219, 124, 0.1) !important;
}

.cosmere-dark .bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.1) !important;
}

.cosmere-dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.1) !important;
}

.cosmere-dark .bg-yellow-50 {
  background-color: rgba(251, 191, 36, 0.1) !important;
}

.cosmere-dark .bg-gray-50 {
  background-color: var(--bg-card) !important;
}

.cosmere-dark .bg-teal-50 {
  background-color: rgba(45, 212, 191, 0.1) !important;
}

/* Text colors for these sections */
.cosmere-dark .text-pink-700 {
  color: var(--accent-nebula) !important;
}

.cosmere-dark .text-emerald-700 {
  color: var(--skill-green) !important;
}

.cosmere-dark .text-orange-700 {
  color: #fb923c !important;
}

.cosmere-dark .text-indigo-700 {
  color: #6366f1 !important;
}

.cosmere-dark .text-yellow-700 {
  color: var(--accent-star) !important;
}

.cosmere-dark .text-gray-700 {
  color: var(--text-secondary) !important;
}

.cosmere-dark .text-teal-700 {
  color: #14b8a6 !important;
}

/* Save button and status messages */
.cosmere-dark .bg-green-50 {
  background-color: rgba(105, 219, 124, 0.1) !important;
}

.cosmere-dark .text-green-800 {
  color: var(--skill-green) !important;
}

.cosmere-dark .border-green-200 {
  border-color: var(--skill-green-border) !important;
}

/* Additional border colors for colored sections */
.cosmere-dark .border-pink-500 {
  border-color: rgba(236, 72, 153, 0.5) !important;
}

.cosmere-dark .border-emerald-500 {
  border-color: rgba(105, 219, 124, 0.5) !important;
}

.cosmere-dark .border-orange-500 {
  border-color: rgba(249, 115, 22, 0.5) !important;
}

.cosmere-dark .border-indigo-500 {
  border-color: rgba(99, 102, 241, 0.5) !important;
}

.cosmere-dark .border-yellow-500 {
  border-color: rgba(251, 191, 36, 0.5) !important;
}

.cosmere-dark .border-teal-500 {
  border-color: rgba(45, 212, 191, 0.5) !important;
}

.cosmere-dark .border-gray-500 {
  border-color: var(--border-secondary) !important;
}

/* Ensure proper contrast for all text elements */
.cosmere-dark * {
  color: inherit;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .cosmere-dark {
    /* Ensure good contrast on mobile devices */
    --text-primary: #f1f3f7;
    --text-secondary: #c2c9d6;
  }
}