@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* Design System Tokens */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  
  /* Enhanced Typography Scale */
  --font-display: 'Inter Display', system-ui, -apple-system, sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono-premium: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
  
  /* Typography Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  
  /* Spacing System */
  --space-xs: 0.25rem;     /* 4px */
  --space-sm: 0.5rem;      /* 8px */
  --space-md: 0.75rem;     /* 12px */
  --space-lg: 1rem;        /* 16px */
  --space-xl: 1.5rem;      /* 24px */
  --space-2xl: 2rem;       /* 32px */
  --space-3xl: 3rem;       /* 48px */
  --space-4xl: 4rem;       /* 64px */
  
  /* Animation Durations */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  
  /* Animation Easing */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-glow: 0 0 20px rgb(59 130 246 / 0.15);
}

/* Light Theme (Minimal Usage) */
:root {
  --radius: 0.75rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.596 0.245 264.376);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

/* Enhanced Dark Theme - Sophisticated & Premium */
.dark {
  --radius: 0.75rem;
  
  /* Background System - Deep blacks with subtle warmth */
  --background: #0a0a0a;           /* Deep black */
  --surface: #141414;              /* Elevated surfaces */
  --surface-elevated: #1a1a1a;     /* Cards, modals */
  --surface-hover: #1f1f1f;          /* Hover states */
  
  /* Text System - Clear hierarchy */
  --foreground: #fafafa;             /* Primary text */
  --text-primary: #fafafa;           /* Primary text */
  --text-secondary: #a1a1aa;         /* Secondary text */
  --text-tertiary: #71717a;         /* Tertiary text */
  --text-inverse: #0a0a0a;          /* Text on light */
  --text-muted: #71717a;             /* Muted text */
  
  /* Card System */
  --card: #141414;                   /* Card background */
  --card-foreground: #fafafa;         /* Card text */
  --popover: #141414;                 /* Popover background */
  --popover-foreground: #fafafa;       /* Popover text */
  
  /* Primary Colors - Modern Blue */
  --primary: #3b82f6;                /* Primary blue */
  --primary-hover: #2563eb;           /* Primary hover */
  --primary-light: #60a5fa;           /* Primary light variant */
  --primary-foreground: #ffffff;       /* Text on primary */
  
  /* Accent Colors */
  --accent: #8b5cf6;                 /* Purple accent */
  --accent-hover: #7c3aed;           /* Accent hover */
  --accent-foreground: #ffffff;       /* Text on accent */
  
  /* Secondary System */
  --secondary: #272727;               /* Secondary background */
  --secondary-foreground: #fafafa;     /* Secondary text */
  
  /* Muted System */
  --muted: #1f1f1f;                  /* Muted background */
  --muted-foreground: #71717a;        /* Muted text */
  
  /* Border System - Subtle distinctions */
  --border: #272727;                 /* Standard borders */
  --border-subtle: #1f1f1f;           /* Subtle borders */
  --border-strong: #2f2f2f;           /* Strong borders */
  --input: #272727;                   /* Input borders */
  
  /* Status Colors */
  --destructive: #ef4444;             /* Error red */
  --destructive-foreground: #ffffff;   /* Text on destructive */
  --success: #10b981;                 /* Success green */
  --success-foreground: #ffffff;       /* Text on success */
  --warning: #f59e0b;                 /* Warning amber */
  --warning-foreground: #000000;       /* Text on warning */
  
  /* Ring & Focus */
  --ring: #3b82f6;                   /* Focus ring */
  --ring-offset: #0a0a0a;             /* Ring offset */
  
  /* Sidebar System */
  --sidebar: #0f0f0f;                /* Sidebar background */
  --sidebar-foreground: #fafafa;       /* Sidebar text */
  --sidebar-primary: #3b82f6;          /* Sidebar primary */
  --sidebar-primary-foreground: #ffffff; /* Sidebar primary text */
  --sidebar-accent: #272727;           /* Sidebar accent */
  --sidebar-accent-foreground: #fafafa;  /* Sidebar accent text */
  --sidebar-border: #1f1f1f;           /* Sidebar border */
  --sidebar-ring: #3b82f6;            /* Sidebar focus ring */
  
  /* Chart Colors - Refined palette */
  --chart-1: #3b82f6;                /* Blue */
  --chart-2: #8b5cf6;                /* Purple */
  --chart-3: #10b981;                /* Green */
  --chart-4: #f59e0b;                /* Amber */
  --chart-5: #ef4444;                /* Red */
}

/* Enhanced Base Styles */
@layer base {
  * {
    @apply border-border outline-ring/50;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }
  
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-body);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: var(--leading-normal);
  }
  
  /* Typography Enhancements */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: var(--leading-tight);
  }
  
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  h5 { font-size: var(--text-lg); }
  h6 { font-size: var(--text-base); }
  
  /* Display Typography */
  .text-display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.05em;
  }
  
  /* Code Typography */
  code, pre {
    font-family: var(--font-mono-premium);
    font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04';
  }
  
  /* Focus Styles */
  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2;
    ring-offset-color: var(--ring-offset);
  }
  
  /* Selection Styles */
  ::selection {
    @apply bg-primary/20 text-primary-foreground;
  }
  
  /* Scrollbar Styles */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-border;
  }
}

/* Enhanced Component Styles */
@layer components {
  /* Glass Effect */
  .glass {
    backdrop-filter: blur(12px);
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Elevated Surface */
  .surface {
    background-color: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
  }
  
  .surface-elevated {
    background-color: var(--surface-elevated);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
  }
  
  /* Interactive Elements */
  .interactive {
    transition: all var(--duration-normal) var(--ease-out);
  }
  
  .interactive:hover {
    background-color: var(--surface-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  
  /* Button Enhancements */
  .btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
    transition: all var(--duration-normal) var(--ease-out);
  }
  
  .btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
  }
  
  /* Card Enhancements */
  .card-premium {
    background-color: var(--surface-elevated);
    border-color: var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-out);
  }
  
  .card-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
  
  /* Input Enhancements */
  .input-premium {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--foreground);
    transition: all var(--duration-normal) var(--ease-out);
  }
  
  .input-premium:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
  }
  
  /* Animation Classes */
  .fade-in {
    animation: fadeIn var(--duration-normal) var(--ease-out);
  }
  
  .slide-up {
    animation: slideUp var(--duration-normal) var(--ease-out);
  }
  
  .pulse-glow {
    animation: pulseGlow 2s var(--ease-in-out) infinite;
  }
  
  /* Loading States */
  .skeleton {
    background-color: var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.05),
      transparent
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }
}

/* Keyframe Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.4); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Responsive Typography */
@media (max-width: 640px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
  /* Mobile-specific spacing */
  .mobile-spacing {
    padding: var(--space-md);
  }
  
  /* Stack layouts on mobile */
  .mobile-stack {
    flex-direction: column;
    gap: var(--space-md);
  }
  
  /* Mobile cards */
  .mobile-card {
    margin: var(--space-sm);
    padding: var(--space-md);
  }
  
  /* Hide desktop elements */
  .desktop-only {
    display: none;
  }
}

@media (max-width: 640px) {
  /* Small mobile adjustments */
  .sm-mobile-spacing {
    padding: var(--space-sm);
  }
  
  /* Compact layouts */
  .mobile-compact {
    gap: var(--space-sm);
  }
  
  /* Touch-friendly targets */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Mobile navigation */
  .mobile-nav {
    padding: var(--space-md);
  }
  
  /* Mobile grid adjustments */
  .mobile-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  /* Mobile text sizing */
  .mobile-text-sm {
    font-size: var(--text-sm);
  }
  
  /* Hide tablet elements */
  .tablet-only {
    display: none;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  /* Tablet-specific styles */
  .tablet-spacing {
    padding: var(--space-lg);
  }
  
  /* Tablet grid */
  .tablet-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  
  /* Hide mobile elements */
  .mobile-only {
    display: none;
  }
}

@media (min-width: 1025px) {
  /* Desktop-specific styles */
  .desktop-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
  
  /* Show desktop elements */
  .desktop-only {
    display: block;
  }
  
  /* Desktop spacing */
  .desktop-spacing {
    padding: var(--space-xl);
  }
}

/* Ultra-wide screens */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
  
  .wide-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Responsive animations */
@media (max-width: 768px) {
  /* Reduce motion on mobile for performance */
  .mobile-animation {
    animation-duration: var(--duration-fast);
    transition-duration: var(--duration-fast);
  }
  
  /* Simplified hover states */
  .mobile-hover:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* Responsive form elements */
@media (max-width: 640px) {
  .mobile-form {
    width: 100%;
  }
  
  .mobile-input {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: var(--space-md);
  }
  
  .mobile-button {
    width: 100%;
    padding: var(--space-md);
    min-height: 44px;
  }
}

/* Responsive tables */
@media (max-width: 768px) {
  .mobile-table {
    font-size: var(--text-sm);
  }
  
  .mobile-table th,
  .mobile-table td {
    padding: var(--space-sm);
  }
}

/* Responsive images */
@media (max-width: 640px) {
  .mobile-image {
    max-width: 100%;
    height: auto;
  }
}

/* Responsive modal/dialog */
@media (max-width: 640px) {
  .mobile-modal {
    margin: var(--space-sm);
    max-width: calc(100vw - var(--space-lg));
  }
  
  .mobile-modal-content {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast */
@media (prefers-contrast: high) {
  .dark {
    --border: #404040;
    --text-secondary: #d4d4d4;
    --text-tertiary: #b3b3b3;
  }
}

/* Enhanced Loading Animations */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-subtle);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-dots {
  display: inline-flex;
  gap: 4px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: loadingDots 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

.loading-skeleton {
  background: linear-gradient(
    90deg,
    #141414 0%,
    #1f1f1f 50%,
    #141414 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.dark .loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface, #141414) 0%,
    var(--surface-hover, #1f1f1f) 50%,
    var(--surface, #141414) 100%
  );
}

.loading-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Enhanced Transitions */
.transition-all {
  transition: all var(--duration-normal) var(--ease-out);
}

.transition-transform {
  transition: transform var(--duration-normal) var(--ease-out);
}

.transition-opacity {
  transition: opacity var(--duration-normal) var(--ease-out);
}

.transition-colors {
  transition: color var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.transition-smooth {
  transition: all var(--duration-slow) var(--ease-in-out);
}

/* Hover Effects */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform var(--duration-normal) var(--ease-out);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Page Transitions */
.page-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.page-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity var(--duration-normal) var(--ease-in),
              transform var(--duration-normal) var(--ease-in);
}

/* Modal Transitions */
.modal-enter {
  opacity: 0;
  transform: scale(0.9) translateY(-20px);
}

.modal-enter-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.modal-exit {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.modal-exit-active {
  opacity: 0;
  transform: scale(0.9) translateY(-20px);
  transition: opacity var(--duration-normal) var(--ease-in),
              transform var(--duration-normal) var(--ease-in);
}

/* Staggered Animations */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerIn 0.6s var(--ease-out) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }

/* Micro-interactions */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::before {
  width: 300px;
  height: 300px;
}

/* Success/Error Animations */
.success-check {
  animation: successCheck 0.6s ease-in-out;
}

.error-shake {
  animation: errorShake 0.6s ease-in-out;
}

/* Progress Animations */
.progress-bar {
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progressShimmer 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes staggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes successCheck {
  0% { transform: scale(0) rotate(45deg); }
  50% { transform: scale(1.2) rotate(45deg); }
  100% { transform: scale(1) rotate(45deg); }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes progressShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Enhanced Feedback System */
.feedback-success {
  background: linear-gradient(135deg, var(--success) 0%, var(--success) 100%);
  color: var(--success-foreground);
  border: 1px solid var(--success);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  animation: successPulse 0.6s ease-in-out;
}

.feedback-error {
  background: linear-gradient(135deg, var(--destructive) 0%, var(--destructive) 100%);
  color: var(--destructive-foreground);
  border: 1px solid var(--destructive);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
  animation: errorShake 0.6s ease-in-out;
}

.feedback-warning {
  background: linear-gradient(135deg, var(--warning) 0%, var(--warning) 100%);
  color: var(--warning-foreground);
  border: 1px solid var(--warning);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
  animation: warningPulse 0.6s ease-in-out;
}

.feedback-info {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  animation: infoPulse 0.6s ease-in-out;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 9999;
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  margin-bottom: var(--space-sm);
  animation: slideInRight 0.3s var(--ease-out);
  transition: all var(--duration-normal) var(--ease-out);
}

.toast-item:hover {
  transform: translateX(-4px);
  box-shadow: var(--shadow-lg);
}

.toast-item-exit {
  animation: slideOutRight 0.3s var(--ease-in);
}

/* Status Indicators */
.status-indicator {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: statusPulse 2s ease-in-out infinite;
}

.status-indicator.online {
  background: var(--success);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.status-indicator.offline {
  background: var(--destructive);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.status-indicator.pending {
  background: var(--warning);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

/* Progress Feedback */
.progress-feedback {
  position: relative;
  overflow: hidden;
}

.progress-feedback::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: progressSwipe 2s linear infinite;
}

/* Interactive Feedback */
.interactive-feedback {
  position: relative;
  overflow: hidden;
}

.interactive-feedback::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.interactive-feedback:active::after {
  width: 100px;
  height: 100px;
}

/* Form Validation Feedback */
.validation-success {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.validation-error {
  border-color: var(--destructive) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.validation-warning {
  border-color: var(--warning) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* Loading States */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-content {
  text-align: center;
  color: var(--text-primary);
}

/* Success/Error Animation Keyframes */
@keyframes successPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes warningPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes infoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.95; }
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes progressSwipe {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Enhanced Accessibility */
/* Skip Links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  text-decoration: none;
  z-index: 1000;
  transition: top var(--duration-normal) var(--ease-out);
}

.skip-link:focus {
  top: 6px;
}

/* Focus Management */
.focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.focus-ring {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-sm);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* High Contrast Mode Enhancements */
@media (prefers-contrast: high) {
  .focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
  }
  
  .interactive:hover {
    outline: 1px solid var(--primary);
  }
  
  .btn-primary {
    border: 2px solid var(--primary);
  }
}

/* Reduced Motion Enhancements */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
  
  .toast-item {
    animation: none;
    transform: none;
  }
  
  .loading-spinner {
    animation: none;
    border: 3px solid var(--primary);
    border-right-color: transparent;
  }
  
  .pulse-glow,
  .success-check,
  .error-shake {
    animation: none;
  }
}

/* Keyboard Navigation */
.keyboard-nav {
  display: none;
}

.keyboard-nav:focus-within {
  display: block;
}

/* Focus Traps */
.focus-trap {
  position: relative;
}

.focus-trap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

/* ARIA Live Regions */
.aria-live {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aria-live-polite {
  clip: rect(0, 0, 0, 0);
}

.aria-live-assertive {
  clip: rect(0, 0, 0, 0);
}

/* Enhanced Form Accessibility */
.form-field {
  position: relative;
}

.form-field label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

.form-field .required-indicator {
  color: var(--destructive);
  margin-left: var(--space-xs);
}

.form-field .error-message {
  display: block;
  margin-top: var(--space-xs);
  color: var(--destructive);
  font-size: var(--text-sm);
}

.form-field .help-text {
  display: block;
  margin-top: var(--space-xs);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Button Accessibility */
.btn-accessible {
  position: relative;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
}

.btn-accessible:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

/* Link Accessibility */
.link-accessible {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.link-accessible:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.link-accessible:hover {
  color: var(--primary-hover);
  text-decoration-thickness: 3px;
}

/* Table Accessibility */
.table-accessible {
  border-collapse: collapse;
  width: 100%;
}

.table-accessible th,
.table-accessible td {
  padding: var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.table-accessible th {
  font-weight: 600;
  color: var(--text-secondary, #a1a1aa);
  background: var(--surface, #141414);
}

.table-accessible caption {
  caption-side: bottom;
  text-align: left;
  padding: var(--space-md);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Modal Accessibility */
.modal-accessible {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-accessible:focus {
  outline: none;
}

.modal-content-accessible {
  background: var(--surface-elevated, #1a1a1a);
  border: 1px solid var(--border, #272727);
  border-radius: var(--radius-lg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  padding: var(--space-lg);
}

.modal-close-accessible {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 1001;
}

/* List Accessibility */
.list-accessible {
  list-style: none;
  padding: 0;
}

.list-accessible li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.list-accessible li:last-child {
  border-bottom: none;
}

.list-accessible li:focus {
  background: var(--surface-hover, #1f1f1f);
  outline: 2px solid var(--primary, #3b82f6);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Enhanced Focus Indicators */
.focus-indicator {
  position: relative;
}

.focus-indicator::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.focus-indicator:focus::after {
  opacity: 1;
}

/* Touch Target Improvements */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-sm);
}

@media (pointer: coarse) {
  .touch-target {
    min-height: 48px;
    min-width: 48px;
    padding: var(--space-md);
  }
}

/* Performance Optimizations */
/* CSS Containment for better performance */
.performance-optimization {
 contain: layout style paint;
}

/* GPU Acceleration */
.gpu-accelerated {
 transform: translateZ(0);
 backface-visibility: hidden;
 perspective: 1000px;
}

/* Image Optimization */
.optimized-image {
 content-visibility: auto;
 contain: layout;
}

/* Animation Performance */
.will-change-transform {
 will-change: transform;
}

.will-change-opacity {
 will-change: opacity;
}

.will-change-auto {
 will-change: auto;
}

/* Reduced Animation for Performance */
.performance-animation {
 animation-duration: var(--duration-fast);
 transition-duration: var(--duration-fast);
}

/* Lazy Loading Support */
.lazy-load {
 content-visibility: hidden;
}

.lazy-load.loaded {
 content-visibility: visible;
 animation: fadeIn var(--duration-normal) var(--ease-out);
}

/* Virtual Scrolling Support */
.virtual-scroll {
 overflow-y: auto;
 overscroll-behavior: contain;
}

/* Critical CSS Inlining */
.critical-above-fold {
 /* Content that appears above the fold */
}

.critical-below-fold {
 /* Content that can be loaded later */
}

/* Resource Hints */
.resource-hint {
 font-display: swap;
}

/* Memory Management */
.memory-efficient {
 contain: strict;
}

/* Network Optimization */
.network-optimized {
 image-rendering: -webkit-optimize-contrast;
 image-rendering: crisp-edges;
}

/* Smooth Scrolling with Performance */
.smooth-scroll {
 scroll-behavior: smooth;
 scroll-padding-top: var(--space-lg);
}

/* Prefetch Hints */
.prefetch-hint {
 rel: prefetch;
 as: document;
}

/* Preload Hints */
.preload-hint {
 rel: preload;
 as: style;
}

/* Performance Monitoring */
.performance-marker {
 /* For debugging performance issues */
}

/* Optimized Transitions */
.performance-transition {
 transition: transform var(--duration-fast) var(--ease-out),
             opacity var(--duration-fast) var(--ease-out);
 will-change: transform, opacity;
}

/* Batched Animations */
.batch-animation {
 animation-fill-mode: both;
 animation-direction: normal;
}

/* Optimized Hover States */
.performance-hover {
 transition: transform var(--duration-fast) var(--ease-out);
 will-change: transform;
}

.performance-hover:hover {
 transform: translateY(-1px);
}

/* Optimized Loading States */
.performance-loading {
 animation: performanceSpin 1s linear infinite;
 will-change: transform;
}

@keyframes performanceSpin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

/* Optimized Skeleton Loading */
.performance-skeleton {
  background: linear-gradient(
   90deg,
   #141414 0%,
   #1f1f1f 50%,
   #141414 100%
  );
  background-size: 200% 100%;
  animation: performanceShimmer 1s linear infinite;
  will-change: background;
}

.dark .performance-skeleton {
  background: linear-gradient(
   90deg,
   var(--surface, #141414) 0%,
   var(--surface-hover, #1f1f1f) 50%,
   var(--surface, #141414) 100%
  );
}

@keyframes performanceShimmer {
 0% { background-position: -200% 0; }
 100% { background-position: 200% 0; }
}

/* Optimized Fade In */
.performance-fade-in {
 opacity: 0;
 animation: performanceFadeIn var(--duration-fast) var(--ease-out) forwards;
 will-change: opacity;
}

@keyframes performanceFadeIn {
 to { opacity: 1; }
}

/* Optimized Scale Animation */
.performance-scale {
 transition: transform var(--duration-fast) var(--ease-out);
 will-change: transform;
}

.performance-scale:hover {
 transform: scale(1.02);
}

/* Optimized Blur Effects */
.performance-blur {
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 will-change: filter;
}

/* Optimized Shadows */
.performance-shadow {
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
             0 2px 4px -2px rgba(0, 0, 0, 0.06);
 will-change: box-shadow;
}

/* Optimized Gradients */
.performance-gradient {
 background: linear-gradient(
   135deg,
   var(--primary) 0%,
   var(--accent) 100%
 );
 will-change: background;
}

/* Optimized Border Animations */
.performance-border {
 border: 2px solid var(--border);
 transition: border-color var(--duration-fast) var(--ease-out);
 will-change: border-color;
}

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

/* Optimized Text Rendering */
.performance-text {
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Optimized Layout */
.performance-layout {
 contain: layout;
 content-visibility: visible;
}

/* Optimized Paint */
.performance-paint {
 contain: paint;
 isolation: isolate;
}

/* Optimized Size */
.performance-size {
 contain: size;
}

/* Optimized Composite */
.performance-composite {
 contain: layout style paint composite;
 isolation: isolate;
}

/* Optimized Transform */
.performance-transform-only {
 transform: translateZ(0);
 will-change: transform;
}

/* Optimized Opacity */
.performance-opacity-only {
 will-change: opacity;
}

/* Optimized Filter */
.performance-filter {
 will-change: filter;
 isolation: isolate;
}

/* Optimized Backdrop Filter */
.performance-backdrop {
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 will-change: filter;
}

/* Optimized Mix Blend Mode */
.performance-mix-blend {
 mix-blend-mode: multiply;
 isolation: isolate;
}

/* Optimized Isolation */
.performance-isolation {
 isolation: isolate;
}

/* Optimized Stacking */
.performance-stacking {
 z-index: 1;
 position: relative;
}

/* Optimized Clipping */
.performance-clip {
 clip-path: inset(0 0 100% 100%);
 will-change: clip-path;
}

/* Optimized Mask */
.performance-mask {
 mask-image: linear-gradient(to bottom, transparent, black);
 will-change: mask;
}

/* Optimized Reflection */
.performance-reflection {
 -webkit-box-reflect: below 0px -webkit-linear-gradient(transparent, rgba(255,255,255,0.3) 0 100%);
 will-change: transform;
}

/* Optimized Column Count */
.performance-columns {
 column-count: 2;
 column-gap: var(--space-md);
 will-change: transform;
}

/* Optimized Flex */
.performance-flex {
 display: flex;
 will-change: transform;
}

/* Optimized Grid */
.performance-grid {
 display: grid;
 will-change: transform;
}

/* Optimized Position */
.performance-position {
 position: relative;
 will-change: transform;
}

/* Optimized Display */
.performance-display {
 display: block;
 will-change: transform;
}

/* Optimized Visibility */
.performance-visibility {
 visibility: visible;
 will-change: transform;
}

/* Optimized Overflow */
.performance-overflow {
 overflow: hidden;
 will-change: transform;
}

/* Optimized Z Index */
.performance-z-index {
 z-index: 1;
 will-change: transform;
}

/* Optimized Transform Origin */
.performance-transform-origin {
 transform-origin: center center;
 will-change: transform;
}

/* Optimized Transform Style */
.performance-transform-style {
 transform-style: preserve-3d;
 will-change: transform;
}

/* Optimized Perspective */
.performance-perspective {
 perspective: 1000px;
 will-change: transform;
}

/* Optimized Backface Visibility */
.performance-backface {
 backface-visibility: hidden;
 will-change: transform;
}

/* Optimized Scroll Snap */
.performance-scroll-snap {
 scroll-snap-type: mandatory;
 scroll-snap-align: center;
 will-change: transform;
}

/* Optimized Scroll Behavior */
.performance-scroll-behavior {
 scroll-behavior: smooth;
 scroll-padding-top: var(--space-lg);
 will-change: transform;
}

/* Optimized Scroll Margin */
.performance-scroll-margin {
 scroll-margin-top: var(--space-lg);
 scroll-margin-bottom: var(--space-lg);
 will-change: transform;
}

/* Optimized Scroll Padding */
.performance-scroll-padding {
 scroll-padding-top: var(--space-lg);
 scroll-padding-bottom: var(--space-lg);
 will-change: transform;
}

/* Optimized Scroll Snap Align */
.performance-scroll-snap-align {
 scroll-snap-align: center;
 will-change: transform;
}

/* Optimized Scroll Snap Stop */
.performance-scroll-snap-stop {
 scroll-snap-stop: always;
 will-change: transform;
}

/* Optimized Scroll Snap Type */
.performance-scroll-snap-type {
 scroll-snap-type: mandatory;
 will-change: transform;
}