/* Modern Theme System for CMS-S Frontend */

/* Import base variables */
@import './themes/_base.css';

/* Import individual themes */
@import './themes/default.css';
@import './themes/light.css';
@import './themes/dark.css';
@import './themes/corporate.css';
@import './themes/modern.css';
@import './themes/elegant.css';
@import './themes/vintage.css';
@import './themes/trader.css';
@import './themes/narcology.css';

/* Global theme utilities */
.theme-transition {
  transition: background-color var(--transition-normal), 
              color var(--transition-normal),
              border-color var(--transition-normal);
}

/* Theme-aware scrollbar styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-500);
}

/* Selection styling */
::selection {
  background-color: var(--color-selection, var(--color-primary-200));
  color: var(--color-text);
}

/* Focus visible styling */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Responsive theme utilities */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    /* Will inherit from dark theme when auto is implemented */
  }
}

/* Print styles */
@media print {
  :root {
    --color-background: #ffffff;
    --color-text: #000000;
  }
}

/* Theme-aware animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Theme animation utilities */
.animate-theme-fade-in {
  animation: fadeIn var(--animation-duration) var(--animation-timing);
}

.animate-theme-slide-right {
  animation: slideInRight var(--animation-duration) var(--animation-timing);
}

.animate-theme-slide-left {
  animation: slideInLeft var(--animation-duration) var(--animation-timing);
}

.animate-theme-scale-in {
  animation: scaleIn var(--animation-duration) var(--animation-timing);
}

.animate-theme-bounce {
  animation: bounce var(--animation-duration) var(--animation-timing);
}

.animate-theme-pulse {
  animation: pulse var(--animation-duration) var(--animation-timing) infinite;
}

/* Hover animations with theme variables */
.hover-theme-lift {
  transition: transform var(--animation-duration) var(--animation-timing);
}

.hover-theme-lift:hover {
  transform: translateY(var(--animation-translate-hover)) scale(var(--animation-scale-hover));
}