/* Dark Mode Base Styles - assets/css/dark-mode-base.css */

/* ====== GLOBAL TRANSITIONS ====== */
*,
*::before,
*::after {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====== BASE ELEMENTS ====== */
html {
  color-scheme: light dark;
}

[data-theme="dark"] html {
  color-scheme: dark;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* ====== BACKGROUND COLORS ====== */
.bg-white {
  background-color: var(--card-bg) !important;
}

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

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

.bg-gray-900 {
  background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .bg-gray-900 {
  background-color: var(--bg-primary) !important;
}

/* ====== TEXT COLORS ====== */
.text-gray-900,
.text-gray-800,
.text-gray-700 {
  color: var(--text-primary) !important;
}

.text-gray-600 {
  color: var(--text-secondary) !important;
}

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

.text-white {
  color: var(--text-primary) !important;
}

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

/* ====== BORDER COLORS ====== */
.border-gray-200,
.border-gray-300 {
  border-color: var(--border-color) !important;
}

.border-gray-100 {
  border-color: var(--border-light) !important;
}

/* ====== ORANGE THEME COLORS ====== */
.bg-orange-500 {
  background-color: var(--orange-primary) !important;
}

.bg-orange-600 {
  background-color: var(--orange-secondary) !important;
}

.text-orange-500 {
  color: var(--orange-primary) !important;
}

.text-orange-600 {
  color: var(--orange-secondary) !important;
}

.hover\:bg-orange-600:hover {
  background-color: var(--orange-secondary) !important;
}

.hover\:text-orange-500:hover {
  color: var(--orange-primary) !important;
}

/* ====== COLORED BACKGROUNDS ====== */
.bg-orange-50 {
  background-color: var(--warning-bg) !important;
}

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

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

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

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

/* ====== COLORED TEXT ====== */
.text-orange-700,
.text-orange-800 {
  color: var(--warning-text) !important;
}

.text-blue-700,
.text-blue-800,
.text-blue-900 {
  color: var(--info-text) !important;
}

.text-green-700,
.text-green-800 {
  color: var(--success-text) !important;
}

.text-red-700,
.text-red-800 {
  color: var(--error-text) !important;
}

.text-yellow-700,
.text-yellow-800 {
  color: var(--warning-text) !important;
}

/* ====== SHADOWS AND ELEVATIONS ====== */
.shadow,
.shadow-md {
  box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color) !important;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color) !important;
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px var(--shadow-color), 0 10px 10px -5px var(--shadow-color) !important;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px var(--shadow-dark) !important;
}

/* ====== ACCESSIBILITY IMPROVEMENTS ====== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ====== HIGH CONTRAST MODE SUPPORT ====== */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000000;
    --text-secondary: #000000;
  }
  
  [data-theme="dark"] {
    --border-color: #ffffff;
    --text-secondary: #ffffff;
  }
}

/* ====== FOCUS VISIBLE IMPROVEMENTS ====== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--orange-primary);
  outline-offset: 2px;
}

/* ====== CUSTOM SCROLLBAR (WEBKIT) ====== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ====== PRINT STYLES ====== */
@media print {
  [data-theme="dark"] * {
    background: white !important;
    color: black !important;
    border-color: black !important;
  }
}