/* shadcn/ui Design Tokens */
/* Only CSS variables - components use Tailwind utilities directly */

/* ============================================
   COLOR TOKENS (HSL Format for Tailwind)
   ============================================ */
:root {
  /* Base Colors */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  /* Card/Surface Colors */
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  /* Popover/Dropdown Colors */
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  /* Primary Colors (Blue #3b82f6) */
  --primary: 217 91% 60%;
  --primary-foreground: 0 0% 100%;

  /* Secondary Colors */
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;

  /* Muted Colors */
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;

  /* Accent Colors */
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 9%;

  /* Sidebar Colors (shadcn/ui pattern) */
  --sidebar: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 217 91% 60%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217 91% 60%;

  /* Destructive (Error) Colors */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  /* Success Colors */
  --success: 142 76% 36%;
  --success-foreground: 210 40% 98%;

  /* Warning Colors */
  --warning: 38 92% 50%;
  --warning-foreground: 222.2 47.4% 11.2%;

  /* Info Colors */
  --info: 199 89% 48%;
  --info-foreground: 210 40% 98%;

  /* Border and Input Colors */
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;

  /* Focus Ring */
  --ring: 217 91% 60%;
  --ring-offset: 0 0% 100%;

  /* Border Radius */
  --radius: 0.5rem;

  /* Animation Durations */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  /* Shadows for Elevation */
  --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);

  /* Avatar Colors */
  --avatar-red: 0 84% 60%;
  --avatar-blue: 217 91% 60%;
  --avatar-green: 142 76% 36%;
  --avatar-purple: 262 83% 58%;
  --avatar-orange: 25 95% 53%;
  --avatar-pink: 330 81% 60%;

  /* Workflow Status Colors */
  --status-pending: 38 92% 50%;
  --status-running: 217 91% 60%;
  --status-completed: 142 76% 36%;
  --status-failed: 0 84.2% 60.2%;
  --status-paused: 220 9% 46%;
  --status-cancelled: 220 9% 64%;
}

/* ============================================
   DARK MODE TOKENS
   ============================================ */
.dark {
  --background: 0 0% 7%;
  --foreground: 0 0% 98%;

  --card: 0 0% 9%;
  --card-foreground: 0 0% 98%;

  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 98%;

  --primary: 217 91% 60%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 98%;

  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 64%;

  --accent: 0 0% 15%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --success: 142 76% 36%;
  --success-foreground: 0 0% 98%;

  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 9%;

  --info: 199 89% 48%;
  --info-foreground: 0 0% 9%;

  --border: 0 0% 20%;
  --input: 0 0% 20%;

  --ring: 217 91% 60%;
  --ring-offset: 0 0% 7%;

  /* Sidebar Dark (shadcn/ui pattern) */
  --sidebar: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 217 91% 60%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217 91% 60%;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

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

/* ============================================
   UTILITY CLASSES (minimal, for special cases)
   ============================================ */

/* Loading spinner */
.loading-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid hsl(var(--muted));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 25%,
    hsl(var(--muted) / 0.5) 50%,
    hsl(var(--muted)) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: calc(var(--radius) - 2px);
}

/* Toast container */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

/* 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;
}

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* ============================================
   BADGE STATUS CLASSES
   ============================================ */
.badge-pending {
  background-color: hsl(var(--warning) / 0.1);
  color: hsl(var(--warning));
  border: 1px solid hsl(var(--warning) / 0.2);
}

.badge-running {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.2);
}

.badge-completed {
  background-color: hsl(var(--success) / 0.1);
  color: hsl(var(--success));
  border: 1px solid hsl(var(--success) / 0.2);
}

.badge-failed {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.2);
}

.badge-outline {
  background-color: transparent;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}

/* Status dot colors */
.bg-status-pending { background-color: hsl(var(--status-pending)); }
.bg-status-running { background-color: hsl(var(--status-running)); }
.bg-status-completed { background-color: hsl(var(--status-completed)); }
.bg-status-failed { background-color: hsl(var(--status-failed)); }

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