/**
 * AVL MCP Design Tokens
 * Single Source of Truth for all design values
 */

:root {
  /* ===== Colors ===== */
  /* Primary Brand Colors */
  --color-primary: #2674D4;
  --color-primary-dark: #1e5aa8;
  --color-primary-light: #3b82f6;
  --color-primary-rgb: 38, 116, 212;
  
  /* Logo Colors */
  --color-logo: #D33629;
  --color-logo-rgb: 211, 54, 41;
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  
  /* Neutral Colors */
  --color-white: #ffffff;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  
  /* Text Colors */
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;
  --color-text-white: #ffffff;
  
  /* Background Colors */
  --color-bg-page: #f8fafc;
  --color-bg-page-gradient: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  --color-bg-card: #ffffff;
  --color-bg-hover: #f1f5f9;
  
  /* Border Colors */
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  
  /* ===== Gradients ===== */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-blue: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  --gradient-green: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  --gradient-purple: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  --gradient-orange: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
  --gradient-pink: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  
  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-primary: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
  --shadow-primary-lg: 0 6px 16px rgba(var(--color-primary-rgb), 0.4);
  
  /* ===== Layout ===== */
  /* Fixed Dimensions */
  --nav-height: 56px;
  --sidebar-width: 64px;
  --avatar-size: 40px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  
  /* Touch Targets */
  --touch-target-min: 44px;
  --touch-target-optimal: 48px;
  
  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* ===== Typography ===== */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===== Transitions ===== */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-default: ease;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ===== Z-Index Scale ===== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
}

/* ===== Animation Keyframes ===== */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* ===== Utility Classes ===== */
.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;
}

/* Gradient Background Utilities */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-blue { background: var(--gradient-blue); }
.bg-gradient-green { background: var(--gradient-green); }
.bg-gradient-purple { background: var(--gradient-purple); }
.bg-gradient-orange { background: var(--gradient-orange); }
.bg-gradient-pink { background: var(--gradient-pink); }

/* Text Color Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

/* Status Badge Utilities */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-badge-success { background: var(--color-success-light); color: var(--color-success); }
.status-badge-success::before { background: var(--color-success); }

.status-badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.status-badge-warning::before { background: var(--color-warning); }

.status-badge-error { background: var(--color-error-light); color: var(--color-error); }
.status-badge-error::before { background: var(--color-error); animation: pulse 2s infinite; }

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Focus Styles */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

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