/* ==========================================================================
   THEME COLOR SYSTEM
   ========================================================================== */

/* CSS Custom Properties (Variables) */
:root {
  /* Primary Colors */
  --color-primary: #f59e0b;
  --color-primary-hover: #d97706;
  --color-primary-light: #fbbf24;
  --color-primary-dark: #b45309;
  --color-primary-bg: #fef3c7;
  --color-primary-border: #f3e8ff;

  /* Secondary Colors */
  --color-secondary: #6366f1;
  --color-secondary-hover: #4f46e5;
  --color-secondary-light: #818cf8;
  --color-secondary-dark: #3730a3;
  --color-secondary-bg: #eef2ff;
  --color-secondary-border: #c7d2fe;

  /* Accent Colors */
  --color-accent: #ec4899;
  --color-accent-hover: #db2777;
  --color-accent-light: #f472b6;
  --color-accent-dark: #be185d;

  /* Neutral Colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Success Colors */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-light: #34d399;
  --color-success-bg: #d1fae5;
  --color-success-border: #a7f3d0;

  /* Warning Colors */
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: #fbbf24;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fde68a;

  /* Error/Danger Colors */
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-light: #f87171;
  --color-danger-bg: #fee2e2;
  --color-danger-border: #fecaca;

  /* Info Colors */
  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-info-light: #60a5fa;
  --color-info-bg: #dbeafe;
  --color-info-border: #93c5fd;

  /* Background Colors */
  --bg-primary: var(--color-gray-900);
  --bg-secondary: var(--color-gray-800);
  --bg-tertiary: var(--color-gray-700);
  --bg-surface: var(--color-gray-50);
  --bg-card: var(--color-gray-100);

  /* Text Colors */
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-muted: var(--color-gray-500);
  --text-inverse: var(--color-gray-50);

  /* Border Colors */
  --border-primary: var(--color-gray-200);
  --border-secondary: var(--color-gray-300);
  --border-focus: var(--color-primary);
}

/* Dark Theme Override */
[data-theme="dark"] {
  --bg-primary: var(--color-gray-900);
  --bg-secondary: var(--color-gray-800);
  --bg-tertiary: var(--color-gray-700);
  --bg-surface: var(--color-gray-800);
  --bg-card: var(--color-gray-700);

  --text-primary: var(--color-gray-50);
  --text-secondary: var(--color-gray-300);
  --text-muted: var(--color-gray-400);
  --text-inverse: var(--color-gray-900);

  --border-primary: var(--color-gray-700);
  --border-secondary: var(--color-gray-600);
}

[data-theme="darkOrange"] {
    --bg-primary: #020202;
    --bg-secondary: #492a06c2;
    --bg-tertiary: #2a1803c2;
    --bg-surface: #2a1803c2;
    --bg-card: #2a1803c2;
    --bg-strong: #fbbf24;

    --color-primary: #2a1803c2;
    --color-primary-hover: #fbbf24;
    --color-primary-light: #fbbf24;
    --color-primary-dark: #b45309;
    --color-primary-bg: #2a1803c2;
    --color-primary-border: #644a08;

    /* Elements above primary color */
    --color-secondary: #3f3213b9;
    --color-secondary-hover: #524119b9;
    --color-secondary-light: #ddaf44b9;
    --color-secondary-dark: #3f3213b9;
    --color-secondary-bg: #3f3213b9;
    --color-secondary-border: #463a1eb9;

    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-muted: #ffffff;
    --text-inverse: #ffffff;
  
    --border-primary: #643601c2;
    --border-secondary: #643601c2;
  } 

  @import './themes/dark-red.css';

/* ==========================================================================
   UTILITY CLASSES - BACKGROUND COLORS
   ========================================================================== */

/* Primary Backgrounds */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-hover { background-color: var(--color-primary-hover) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-bg { background-color: var(--color-primary-bg) !important; }

/* Secondary Backgrounds */
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-secondary-hover { background-color: var(--color-secondary-hover) !important; }
.bg-secondary-light { background-color: var(--color-secondary-light) !important; }
.bg-secondary-dark { background-color: var(--color-secondary-dark) !important; }
.bg-secondary-bg { background-color: var(--color-secondary-bg) !important; }

/* Accent Backgrounds */
.bg-accent { background-color: var(--color-accent) !important; }
.bg-accent-hover { background-color: var(--color-accent-hover) !important; }
.bg-accent-light { background-color: var(--color-accent-light) !important; }
.bg-accent-dark { background-color: var(--color-accent-dark) !important; }

/* Semantic Backgrounds */
.bg-success { background-color: var(--color-success) !important; }
.bg-success-hover { background-color: var(--color-success-hover) !important; }
.bg-success-bg { background-color: var(--color-success-bg) !important; }

.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-hover { background-color: var(--color-warning-hover) !important; }
.bg-warning-bg { background-color: var(--color-warning-bg) !important; }

.bg-danger { background-color: var(--color-danger) !important; }
.bg-danger-hover { background-color: var(--color-danger-hover) !important; }
.bg-danger-bg { background-color: var(--color-danger-bg) !important; }

.bg-info { background-color: var(--color-info) !important; }
.bg-info-hover { background-color: var(--color-info-hover) !important; }
.bg-info-bg { background-color: var(--color-info-bg) !important; }

/* Surface Backgrounds */
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-card { background-color: var(--bg-card) !important; }

/* ==========================================================================
   UTILITY CLASSES - TEXT COLORS
   ========================================================================== */

/* Primary Text */
.text-primary-color { color: var(--color-primary) !important; }
.text-primary-hover { color: var(--color-primary-hover) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }

/* Secondary Text */
.text-secondary-color { color: var(--color-secondary) !important; }
.text-secondary-hover { color: var(--color-secondary-hover) !important; }
.text-secondary-light { color: var(--color-secondary-light) !important; }
.text-secondary-dark { color: var(--color-secondary-dark) !important; }

/* Accent Text */
.text-accent { color: var(--color-accent) !important; }
.text-accent-hover { color: var(--color-accent-hover) !important; }
.text-accent-light { color: var(--color-accent-light) !important; }
.text-accent-dark { color: var(--color-accent-dark) !important; }

/* Semantic Text */
.text-success { color: var(--color-success) !important; }
.text-success-hover { color: var(--color-success-hover) !important; }

.text-warning { color: var(--color-warning) !important; }
.text-warning-hover { color: var(--color-warning-hover) !important; }

.text-danger { color: var(--color-danger) !important; }
.text-danger-hover { color: var(--color-danger-hover) !important; }

.text-info { color: var(--color-info) !important; }
.text-info-hover { color: var(--color-info-hover) !important; }

/* Base Text Colors */
.text-base { color: var(--text-primary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-inverse { color: var(--text-inverse) !important; }

/* ==========================================================================
   UTILITY CLASSES - BORDER COLORS
   ========================================================================== */

/* Primary Borders */
.border-primary-color { border-color: var(--color-primary) !important; }
.border-primary-hover { border-color: var(--color-primary-hover) !important; }
.border-primary-light { border-color: var(--color-primary-light) !important; }
.border-primary-border { border-color: var(--color-primary-border) !important; }

/* Secondary Borders */
.border-secondary-color { border-color: var(--color-secondary) !important; }
.border-secondary-hover { border-color: var(--color-secondary-hover) !important; }
.border-secondary-border { border-color: var(--color-secondary-border) !important; }

/* Semantic Borders */
.border-success { border-color: var(--color-success) !important; }
.border-success-border { border-color: var(--color-success-border) !important; }

.border-warning { border-color: var(--color-warning) !important; }
.border-warning-border { border-color: var(--color-warning-border) !important; }

.border-danger { border-color: var(--color-danger) !important; }
.border-danger-border { border-color: var(--color-danger-border) !important; }

.border-info { border-color: var(--color-info) !important; }
.border-info-border { border-color: var(--color-info-border) !important; }

/* Base Borders */
.border-base { border-color: var(--border-primary) !important; }
.border-muted { border-color: var(--border-secondary) !important; }

/* ==========================================================================
   HOVER UTILITIES
   ========================================================================== */

/* Background Hover Effects */
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover) !important; }
.hover\:bg-secondary-hover:hover { background-color: var(--color-secondary-hover) !important; }
.hover\:bg-accent-hover:hover { background-color: var(--color-accent-hover) !important; }
.hover\:bg-success-hover:hover { background-color: var(--color-success-hover) !important; }
.hover\:bg-warning-hover:hover { background-color: var(--color-warning-hover) !important; }
.hover\:bg-danger-hover:hover { background-color: var(--color-danger-hover) !important; }
.hover\:bg-info-hover:hover { background-color: var(--color-info-hover) !important; }

/* Text Hover Effects */
.hover\:text-primary-hover:hover { color: var(--color-primary-hover) !important; }
.hover\:text-secondary-hover:hover { color: var(--color-secondary-hover) !important; }
.hover\:text-accent-hover:hover { color: var(--color-accent-hover) !important; }
.hover\:text-success-hover:hover { color: var(--color-success-hover) !important; }
.hover\:text-warning-hover:hover { color: var(--color-warning-hover) !important; }
.hover\:text-danger-hover:hover { color: var(--color-danger-hover) !important; }
.hover\:text-info-hover:hover { color: var(--color-info-hover) !important; }

/* Border Hover Effects */
.hover\:border-primary-hover:hover { border-color: var(--color-primary-hover) !important; }
.hover\:border-secondary-hover:hover { border-color: var(--color-secondary-hover) !important; }
.hover\:border-accent-hover:hover { border-color: var(--color-accent-hover) !important; }

/* ==========================================================================
   FOCUS UTILITIES
   ========================================================================== */

.focus\:border-primary:focus { border-color: var(--color-primary) !important; }
.focus\:border-secondary:focus { border-color: var(--color-secondary) !important; }
.focus\:border-accent:focus { border-color: var(--color-accent) !important; }

/* ==========================================================================
   OPACITY UTILITIES
   ========================================================================== */

.bg-opacity-90 { background-color: rgba(var(--color-primary-rgb), 0.9) !important; }
.bg-opacity-80 { background-color: rgba(var(--color-primary-rgb), 0.8) !important; }
.bg-opacity-70 { background-color: rgba(var(--color-primary-rgb), 0.7) !important; }
.bg-opacity-50 { background-color: rgba(var(--color-primary-rgb), 0.5) !important; }
.bg-opacity-30 { background-color: rgba(var(--color-primary-rgb), 0.3) !important; }
.bg-opacity-20 { background-color: rgba(var(--color-primary-rgb), 0.2) !important; }
.bg-opacity-10 { background-color: rgba(var(--color-primary-rgb), 0.1) !important; }

/* ==========================================================================
   COMPONENT PRESETS
   ========================================================================== */

/* Button Presets */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: white;
  border-color: var(--color-secondary);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: white;
}

/* Card Presets */
.card-primary {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.card-surface {
  background-color: var(--bg-surface);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

/* Alert Presets */
.alert-success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-dark);
}

.alert-warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-dark);
}

.alert-danger {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-dark);
}

.alert-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-dark);
}