/* Shared Design Tokens for Vue/Inertia Application */
/* This file imports the shared design tokens from the Laravel application */
/* to ensure consistency between both applications */

/* Import the main design tokens from Laravel application */
@import url('../../../laravel/public/css/shared/design-tokens.css');

/* Import Browser Support and Vendor Prefixes */
@import url('./browser-support.css');

/* Vue/Inertia specific enhancements */
/* These additions work with the shared tokens to provide Vue-specific functionality */

/* Vue Transition Classes that work with shared theme system */
.theme-transition-enter-active,
.theme-transition-leave-active {
  transition: all var(--transition-normal);
}

.theme-transition-enter-from,
.theme-transition-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Vue-specific utility classes */
.v-theme-aware {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-light);
  transition: var(--transition-colors);
}

.v-theme-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-colors);
}

.v-theme-input {
  background-color: var(--bg-input);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  transition: var(--transition-colors);
}

.v-theme-input:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* Vue component scoped style helpers */
:root {
  /* Vue-specific CSS custom properties for scoped styles */
  --vue-component-bg: var(--bg-card);
  --vue-component-border: var(--border-light);
  --vue-component-text: var(--text-primary);
  --vue-component-shadow: var(--shadow-sm);
  
  /* Vue transition durations that match the shared system */
  --vue-transition-fast: var(--transition-fast);
  --vue-transition-normal: var(--transition-normal);
  --vue-transition-slow: var(--transition-slow);
}

/* Dark mode overrides for Vue-specific properties */
[data-theme="dark"] {
  --vue-component-bg: var(--bg-card);
  --vue-component-border: var(--border-light);
  --vue-component-text: var(--text-primary);
  --vue-component-shadow: var(--shadow-md);
}

/* System theme detection for Vue components */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --vue-component-bg: var(--bg-card-dark);
    --vue-component-border: var(--border-light-dark);
    --vue-component-text: var(--text-primary-dark);
    --vue-component-shadow: var(--shadow-md);
  }
}

/* Vue Router transition classes that respect theme */
.router-transition-enter-active,
.router-transition-leave-active {
  transition: opacity var(--vue-transition-normal), transform var(--vue-transition-normal);
}

.router-transition-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.router-transition-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* Inertia.js specific loading states */
.inertia-loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--vue-transition-fast);
}

/* Vue component animation utilities */
@keyframes vue-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vue-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.vue-fade-in {
  animation: vue-fade-in var(--vue-transition-normal);
}

.vue-slide-up {
  animation: vue-slide-up var(--vue-transition-normal);
}

.vue-scale-in {
  animation: vue-scale-in var(--vue-transition-normal);
}