/* Design System - Transition Tokens */

/* Design System - Z-Index Tokens */

/* ========================================
   Z-Index Layer System
   ======================================== */

/**
 * Centralized z-index values to prevent collisions
 * and allow safe changes across the application.
 * 
 * Usage:
 * - Use these CSS variables instead of hardcoded z-index values
 * - Increment from base value for stacking within a layer
 * 
 * Example:
 * .drawer { z-index: var(--z-index-drawer); }
 * .drawer-stack-2 { z-index: calc(var(--z-index-drawer) + 1); }
 */

:root {
  /* Base layer - below everything */
  --z-index-base: 0;

  /* Content layer - normal document flow */
  --z-index-content: 1;

  /* Sticky elements - headers, footers */
  --z-index-sticky: 10;

  /* Dropdown menus and popovers */
  --z-index-dropdown: 20;

  /* Overlay components */
  --z-index-backdrop: 50;
  --z-index-drawer: 50;
  --z-index-drawer-stack: 50;
  --z-index-sheet: 50;

  /* Modal dialogs */
  --z-index-modal: 60;

  /* Popovers and floating elements */
  --z-index-popover: 70;

  /* Tooltips - always on top of most elements */
  --z-index-tooltip: 80;

  /* Toast notifications */
  --z-index-toast: 90;

  /* Absolute top - dev tools, critical alerts */
  --z-index-maximum: 9999;
}

/* ========================================
   Transition Duration Tokens
   ======================================== */

:root {
  --transition-duration-fast: 150ms;
  --transition-duration-normal: 250ms;
  --transition-duration-slow: 350ms;
}

/* ========================================
   Transition Easing Tokens
   ======================================== */

:root {
  --transition-easing-linear: linear;
  --transition-easing-ease: ease;
  --transition-easing-ease-in: ease-in;
  --transition-easing-ease-out: ease-out;
  --transition-easing-ease-in-out: ease-in-out;
  --transition-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Slide Animations - Right Side
   ======================================== */

/* Slide in from right (drawer opening) */

@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide out to right (drawer closing) */

@keyframes slide-out-to-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ========================================
   Fade Animations - Overlay
   ======================================== */

/* Fade in (overlay appearing) */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade out (overlay disappearing) */

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ========================================
   Fade and Collapse Animation
   ======================================== */

@keyframes fade-and-collapse {
  0% {
    opacity: 1;
    grid-template-rows: 1fr;
  }
  40% {
    opacity: 0;
    grid-template-rows: 1fr;
  }
  100% {
    opacity: 0;
    grid-template-rows: 0fr;
  }
}

/* ========================================
   Collapsible Animations
   ======================================== */

@keyframes collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

/* ========================================
   Animation Utility Classes
   ======================================== */

/* Slide animations */

.animate-slide-in-from-right {
  animation: slide-in-from-right var(--transition-duration-normal) var(--transition-easing-spring);
}

.animate-slide-out-to-right {
  animation: slide-out-to-right var(--transition-duration-normal) var(--transition-easing-spring);
}

/* Fade animations */

.animate-fade-in {
  animation: fade-in var(--transition-duration-fast) var(--transition-easing-ease-out);
}

.animate-fade-out {
  animation: fade-out var(--transition-duration-fast) var(--transition-easing-ease-in);
}

.animate-fade-and-collapse {
  animation: fade-and-collapse var(--transition-duration-slow) var(--transition-easing-smooth) forwards;
}

/* Animation state classes */

.animation-fill-forwards {
  animation-fill-mode: forwards;
}

.animation-fill-backwards {
  animation-fill-mode: backwards;
}

.animation-fill-both {
  animation-fill-mode: both;
}

/* Collapsible animations */

.animate-collapsible-down {
  animation: collapsible-down var(--transition-duration-normal) var(--transition-easing-smooth);
}

.animate-collapsible-up {
  animation: collapsible-up var(--transition-duration-fast) var(--transition-easing-smooth);
}

/* ========================================
   Dashboard Pipeline Animations
   ======================================== */

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

/* ========================================
   Skeleton Shimmer Animation
   ======================================== */

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

.animate-shimmer {
  background-color: var(--neutral-lightest-gray);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-shimmer {
    animation: none;
  }
}

/* ========================================
   Typing Dots Animation (sequential build-up)
   ======================================== */

@keyframes typing-dot-1 {
  0%,
  100% {
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
}

@keyframes typing-dot-2 {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  45%,
  85% {
    opacity: 1;
  }
}

@keyframes typing-dot-3 {
  0%,
  60%,
  100% {
    opacity: 0;
  }
  75%,
  85% {
    opacity: 1;
  }
}

.animate-typing-dot-1 {
  animation: typing-dot-1 0.9s ease-in-out infinite;
}

.animate-typing-dot-2 {
  animation: typing-dot-2 0.9s ease-in-out infinite;
}

.animate-typing-dot-3 {
  animation: typing-dot-3 0.9s ease-in-out infinite;
}
@theme {
  --color-menu-icon-selected: #4338ca;
  --color-menu-icon-default: #050320;
  --color-menu-hover-bg: #f6f6f6;
  --color-menu-border: #f6f6f6;
  --color-menu-separator: #c2c0d5;
  --color-menu-shadow: rgba(158, 155, 178, 0.25);

  --color-layout-background: #ffffff;

  --color-modal-overlay: #4c4a6133;

  --container-collapsed: 5rem;
  --container-expanded: 13.125rem;

  --color-severity-healthy: #38d86b;
  --color-severity-info: #c2c0d5;
  --color-severity-info-dark: #3b82f6;

  --color-chart-green: #adde4b;
  --color-chart-teal: #29c1b3;
  --color-chart-blue: #4659e3;
  --color-chart-risk-fill: rgba(247, 190, 197, 0.4);
  --color-disabled-badge: #e4e3e880;
  --color-background-neutral-gray: #f6f6f6;

  --color-tab-primary: #6e32e0;
  --color-tab-primary-hover: #5b27bc;
  --color-tab-secondary-font: rgba(105, 104, 121, 1);

  --color-primary-font: #050320;

  --color-risk-critical: #8b1538;
  --color-risk-high: #dc2626;
  --color-risk-medium: #f97316;
  --color-risk-low: #eab308;
  --color-risk-minimal: #84cc16;
  --color-risk-healthy: #22c55e;

  --color-status-healthy: #10b981;
  --color-status-pending: #f59e0b;
  --color-status-neutral: #9ca3af;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-focus: var(--input-focus);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --color-primary: var(--color-primary);
  --color-primary-foreground: var(--color-primary-foreground);
  --color-primary-light: var(--color-primary-light);

  --color-menu-primary: var(--color-primary);
  --color-menu-active-bg: var(--color-primary-light);

  --color-severity-score-low-bg: var(--severity-score-low-bg);
  --color-severity-score-medium-bg: var(--severity-score-medium-bg);
  --color-severity-score-high-bg: var(--severity-score-high-bg);
  --color-severity-score-critical-bg: var(--severity-score-critical-bg);
  --color-severity-score-low-text: var(--severity-score-low-text);
  --color-severity-score-medium-text: var(--severity-score-medium-text);
  --color-severity-score-high-text: var(--severity-score-high-text);
  --color-severity-score-critical-text: var(--severity-score-critical-text);
  --color-tooltip-background: var(--tooltip-background);
  --color-surface-inverse: var(--surface-inverse);
  --color-severity-unavailable-bg: var(--severity-unavailable-bg);
  --color-button-primary-hover: var(--color-button-primary-hover);
  --color-button-secondary-hover: var(--color-button-secondary-hover);

  --color-button-primary: var(--button-primary);
  --color-button-primary-pressed: var(--button-primary-pressed);
  --color-button-primary-ring: var(--button-primary-ring);

  --color-button-outline-hover: var(--button-outline-hover);
  --color-button-outline-pressed: var(--button-outline-pressed);
  --color-button-outline-border: var(--button-outline-border);
  --color-button-outline-text: var(--button-outline-text);

  --color-button-ghost-hover: var(--button-ghost-hover);
  --color-button-ghost-pressed: var(--button-ghost-pressed);
  --color-button-ghost-text: var(--button-ghost-text);

  --color-button-destructive: var(--button-destructive);
  --color-button-destructive-hover: var(--button-destructive-hover);
  --color-button-destructive-pressed: var(--button-destructive-pressed);
  --color-button-destructive-ring: var(--button-destructive-ring);

  --color-button-destructive-ghost: var(--button-destructive-ghost);
  --color-button-destructive-ghost-hover: var(--button-destructive-ghost-hover);
  --color-button-destructive-ghost-text: var(--button-destructive-ghost-text);

  --color-button-link: var(--button-link);
  --color-button-link-pressed: var(--button-link-pressed);
  --color-button-secondary-link: var(--button-secondary-link);
  --color-button-secondary-link-hover: var(--button-secondary-link-hover);

  --color-toast-error: var(--toast-error);
  --color-toast-warning: var(--toast-warning);
  --color-toast-info: var(--toast-info);
  --color-toast-success: var(--toast-success);

  --color-neutral-gray: var(--neutral-gray);
  --color-neutral-darkest-purple: var(--neutral-darkest-purple);
  --color-dashboard-card-border: var(--color-neutral-lightest);
  --color-neutral-lighter-gray: var(--neutral-lighter-gray);
  --color-neutral-dark-gray: var(--neutral-dark-gray);
  --color-neutral-medium-gray: var(--neutral-medium-gray);
  --color-neutral-lightest-gray: var(--neutral-lightest-gray);

  --color-indication-healthy: var(--indication-healthy);
  --color-indication-healthy-bg: var(--indication-healthy-bg);

  --color-action-detect: var(--action-detect);
  --color-action-detect-bg: var(--action-detect-bg);

  --color-primitive-white: var(--primitive-white);
  --color-primitive-neutral-50: var(--primitive-neutral-50);
  --color-primitive-neutral-100: var(--primitive-neutral-100);
  --color-primitive-neutral-200: var(--primitive-neutral-200);
  --color-primitive-neutral-300: var(--primitive-neutral-300);
  --color-primitive-neutral-400: var(--primitive-neutral-400);
  --color-primitive-neutral-500: var(--primitive-neutral-500);
  --color-primitive-neutral-550: var(--primitive-neutral-550);
  --color-primitive-neutral-600: var(--primitive-neutral-600);
  --color-primitive-neutral-700: var(--primitive-neutral-700);
  --color-primitive-neutral-800: var(--primitive-neutral-800);
  --color-primitive-neutral-850: var(--primitive-neutral-850);
  --color-primitive-neutral-900: var(--primitive-neutral-900);

  --color-primitive-purple-bg: var(--primitive-purple-bg);
  --color-primitive-purple-light: var(--primitive-purple-light);
  --color-primitive-purple-default: var(--primitive-purple-default);
  --color-primitive-purple-hover: var(--primitive-purple-hover);
  --color-primitive-purple-pressed: var(--primitive-purple-pressed);
  --color-primitive-purple-dark: var(--primitive-purple-dark);

  --color-primitive-cyan-bg: var(--primitive-cyan-bg);
  --color-primitive-cyan-light: var(--primitive-cyan-light);
  --color-primitive-cyan-default: var(--primitive-cyan-default);
  --color-primitive-cyan-hover: var(--primitive-cyan-hover);
  --color-primitive-cyan-pressed: var(--primitive-cyan-pressed);
  --color-primitive-cyan-dark: var(--primitive-cyan-dark);

  --color-primitive-dark-red-bg: var(--primitive-dark-red-bg);
  --color-primitive-dark-red-light: var(--primitive-dark-red-light);
  --color-primitive-dark-red-default: var(--primitive-dark-red-default);
  --color-primitive-dark-red-hover: var(--primitive-dark-red-hover);
  --color-primitive-dark-red-dark: var(--primitive-dark-red-dark);

  --color-primitive-red-bg: var(--primitive-red-bg);
  --color-primitive-red-light: var(--primitive-red-light);
  --color-primitive-red-default: var(--primitive-red-default);
  --color-primitive-red-hover: var(--primitive-red-hover);
  --color-primitive-red-dark: var(--primitive-red-dark);

  --color-primitive-orange-bg: var(--primitive-orange-bg);
  --color-primitive-orange-light: var(--primitive-orange-light);
  --color-primitive-orange-default: var(--primitive-orange-default);
  --color-primitive-orange-hover: var(--primitive-orange-hover);
  --color-primitive-orange-dark: var(--primitive-orange-dark);

  --color-primitive-yellow-bg: var(--primitive-yellow-bg);
  --color-primitive-yellow-light: var(--primitive-yellow-light);
  --color-primitive-yellow-default: var(--primitive-yellow-default);
  --color-primitive-yellow-hover: var(--primitive-yellow-hover);
  --color-primitive-yellow-dark: var(--primitive-yellow-dark);

  --color-primitive-green-bg: var(--primitive-green-bg);
  --color-primitive-green-light: var(--primitive-green-light);
  --color-primitive-green-default: var(--primitive-green-default);
  --color-primitive-green-hover: var(--primitive-green-hover);
  --color-primitive-green-dark: var(--primitive-green-dark);

  --color-primitive-blue-bg: var(--primitive-blue-bg);
  --color-primitive-blue-light: var(--primitive-blue-light);
  --color-primitive-blue-default: var(--primitive-blue-default);
  --color-primitive-blue-hover: var(--primitive-blue-hover);
  --color-primitive-blue-dark: var(--primitive-blue-dark);

  --color-avatar-1: var(--avatar-1);
  --color-avatar-2: var(--avatar-2);
  --color-avatar-3: var(--avatar-3);
  --color-avatar-4: var(--avatar-4);
  --color-avatar-5: var(--avatar-5);
  --color-avatar-6: var(--avatar-6);
  --color-avatar-7: var(--avatar-7);
  --color-avatar-8: var(--avatar-8);
  --color-avatar-9: var(--avatar-9);
  --color-avatar-10: var(--avatar-10);
  --color-avatar-11: var(--avatar-11);
  --color-avatar-12: var(--avatar-12);

  --color-severity-info-bg: var(--severity-info-bg);

  --color-severity-critical-bg: var(--severity-critical-bg);
  --color-severity-critical-light: var(--severity-critical-light);
  --color-severity-critical: var(--severity-critical);
  --color-severity-critical-hover: var(--severity-critical-hover);
  --color-severity-critical-dark: var(--severity-critical-dark);

  --color-severity-high-bg: var(--severity-high-bg);
  --color-severity-high-light: var(--severity-high-light);
  --color-severity-high: var(--severity-high);
  --color-severity-high-hover: var(--severity-high-hover);
  --color-severity-high-dark: var(--severity-high-dark);

  --color-severity-medium-bg: var(--severity-medium-bg);
  --color-severity-medium-light: var(--severity-medium-light);
  --color-severity-medium: var(--severity-medium);
  --color-severity-medium-hover: var(--severity-medium-hover);
  --color-severity-medium-dark: var(--severity-medium-dark);

  --color-severity-low-bg: var(--severity-low-bg);
  --color-severity-low-light: var(--severity-low-light);
  --color-severity-low: var(--severity-low);
  --color-severity-low-hover: var(--severity-low-hover);
  --color-severity-low-dark: var(--severity-low-dark);

  --color-severity-informational-bg: var(--severity-informational-bg);
  --color-severity-informational: var(--severity-informational);
  --color-severity-informational-hover: var(--severity-informational-hover);

  --color-status-error-bg: var(--status-error-bg);
  --color-status-error-light: var(--status-error-light);
  --color-status-error: var(--status-error);
  --color-status-error-hover: var(--status-error-hover);
  --color-status-error-dark: var(--status-error-dark);

  --color-status-warning-bg: var(--status-warning-bg);
  --color-status-warning-light: var(--status-warning-light);
  --color-status-warning: var(--status-warning);
  --color-status-warning-hover: var(--status-warning-hover);
  --color-status-warning-dark: var(--status-warning-dark);

  --color-status-success-bg: var(--status-success-bg);
  --color-status-success-light: var(--status-success-light);
  --color-status-success: var(--status-success);
  --color-status-success-hover: var(--status-success-hover);
  --color-status-success-dark: var(--status-success-dark);

  --color-status-info-bg: var(--status-info-bg);
  --color-status-info-light: var(--status-info-light);
  --color-status-info: var(--status-info);
  --color-status-info-hover: var(--status-info-hover);
  --color-status-info-dark: var(--status-info-dark);

  --color-brand: var(--brand);
  --color-brand-light: var(--brand-light);
  --color-destructive: var(--destructive);
  --color-destructive-light: var(--destructive-light);
  --color-warning: var(--warning);
  --color-warning-light: var(--warning-light);
  --color-success: var(--success);
  --color-success-light: var(--success-light);
  --color-info: var(--info);
  --color-info-light: var(--info-light);
}

:root {
  --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);
  --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);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --input-focus: oklch(0.53 0.23 291);
  --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);

  --color-primary: #6e32e0;
  --color-primary-foreground: #ffffff;
  --color-primary-light: #f1ebfc;
  --color-primary-hover: #5b27bc;
  --color-primary-press: #401b88;

  --brand: #6e32e0;
  --brand-light: #f1ebfb;

  --color-font-primary: #050320;
  --color-font-secondary: #696879;
  --color-font-disabled: #9695a1;
  --color-font-placeholder: #696879;

  --color-background-default: #ffffff;
  --color-background-hover: rgba(241, 235, 252, 0.5);

  --color-border-element: #e4e3e8;

  --color-neutral-lightest: #e5e5e9;
  --color-neutral-light: #9e9bb2;
  --color-neutral-light-15: #9e9bb226;

  --backdrop-color: rgba(76, 74, 97, 0.08);

  --severity-score-low-bg: #c2f3cf;
  --severity-score-medium-bg: #fdedaa;
  --severity-score-high-bg: #ffd6a6;
  --severity-score-critical-bg: #fad6da;
  --severity-score-low-text: #1f7736;
  --severity-score-medium-text: #8a7627;
  --severity-score-high-text: #8c5b22;
  --severity-score-critical-text: #7d1925;
  --tooltip-background: rgba(5, 2, 36, 0.88);
  --surface-inverse: #191b2a;
  --severity-unavailable-bg: rgba(5, 3, 32, 0.05);
  --color-button-primary-hover: #6127bf;
  --color-button-secondary-hover: #f1ebfc80;

  --button-primary: var(--primitive-purple-default);
  --button-primary-hover: var(--primitive-purple-hover);
  --button-primary-pressed: var(--primitive-purple-pressed);
  --button-primary-ring: rgba(111, 51, 224, 0.35);

  --button-outline-hover: var(--primitive-neutral-50);
  --button-outline-pressed: var(--primitive-neutral-100);
  --button-outline-border: var(--primitive-neutral-200);
  --button-outline-text: var(--primitive-neutral-600);

  --button-ghost-hover: var(--primitive-neutral-50);
  --button-ghost-pressed: var(--primitive-neutral-100);
  --button-ghost-text: var(--primitive-neutral-600);

  --button-destructive: var(--primitive-red-default);
  --button-destructive-hover: var(--primitive-red-hover);
  --button-destructive-pressed: var(--primitive-red-dark);
  --button-destructive-ring: rgba(237, 62, 62, 0.35);

  --button-destructive-ghost: var(--primitive-red-bg);
  --button-destructive-ghost-hover: var(--primitive-red-light);
  --button-destructive-ghost-text: var(--primitive-red-default);

  --button-link: var(--primitive-purple-default);
  --button-link-pressed: var(--primitive-purple-pressed);
  --button-secondary-link: var(--primitive-neutral-600);
  --button-secondary-link-hover: var(--primitive-neutral-700);

  --toast-error: #fad6da;
  --toast-warning: #ffd6a6;
  --toast-info: #ebf3ff;
  --toast-success: #c2f3cf;

  --neutral-gray: #68667b;
  --neutral-dark-gray: #2f2d47;
  --neutral-darkest-purple: #050224;
  --neutral-lighter-gray: #c2c0d5;
  --neutral-lightest-gray: #e4e3e8;
  --neutral-medium-gray: #4c4a61;

  --indication-healthy: #46cc83;
  --indication-healthy-bg: #46cc831a;

  --action-detect: #7c3aed;
  --action-detect-bg: rgba(124, 58, 237, 0.1);

  --primitive-white: #ffffff;
  --primitive-neutral-50: #f7f7fa;
  --primitive-neutral-100: #ededf2;
  --primitive-neutral-200: #dcdce6;
  --primitive-neutral-300: #b8b8c8;
  --primitive-neutral-400: #9595ac;
  --primitive-neutral-500: #70708a;
  --primitive-neutral-550: #52526a;
  --primitive-neutral-600: #32324a;
  --primitive-neutral-700: #232639;
  --primitive-neutral-800: #191b2a;
  --primitive-neutral-850: #13151f;
  --primitive-neutral-900: #13151f;

  --primitive-purple-bg: #f0eafd;
  --primitive-purple-light: #d8c8ff;
  --primitive-purple-default: #6f33e0;
  --primitive-purple-hover: #5c28bd;
  --primitive-purple-pressed: #4a1f98;
  --primitive-purple-dark: #341976;

  --primitive-cyan-bg: #e4f7f6;
  --primitive-cyan-light: #a8e8e4;
  --primitive-cyan-default: #2fa89e;
  --primitive-cyan-hover: #289890;
  --primitive-cyan-pressed: #208880;
  --primitive-cyan-dark: #0f5550;

  --primitive-dark-red-bg: #fae5e5;
  --primitive-dark-red-light: #e0a0a0;
  --primitive-dark-red-default: #8b1a1a;
  --primitive-dark-red-hover: #6e1414;
  --primitive-dark-red-dark: #531010;

  --primitive-red-bg: #ffe8e7;
  --primitive-red-light: #f9c3c3;
  --primitive-red-default: #ed3e3e;
  --primitive-red-hover: #c42828;
  --primitive-red-dark: #a82020;

  --primitive-orange-bg: #feeee4;
  --primitive-orange-light: #ffd8be;
  --primitive-orange-default: #fb7718;
  --primitive-orange-hover: #d4611a;
  --primitive-orange-dark: #c85200;

  --primitive-yellow-bg: #fef7e6;
  --primitive-yellow-light: #fdefc5;
  --primitive-yellow-default: #f8cb44;
  --primitive-yellow-hover: #d4a820;
  --primitive-yellow-dark: #8a6200;

  --primitive-green-bg: #eafaf2;
  --primitive-green-light: #baf2d4;
  --primitive-green-default: #20d474;
  --primitive-green-hover: #1aaa5d;
  --primitive-green-dark: #127540;

  --primitive-blue-bg: #eef4fe;
  --primitive-blue-light: #c2d8fc;
  --primitive-blue-default: #3b82f6;
  --primitive-blue-hover: #2f68c5;
  --primitive-blue-dark: #204887;

  --avatar-1: #25205a;
  --avatar-2: #6776a8;
  --avatar-3: #738ed0;
  --avatar-4: #1c408d;
  --avatar-5: #955de6;
  --avatar-6: #4659e3;
  --avatar-7: #47a4e0;
  --avatar-8: #259896;
  --avatar-9: #29c1b3;
  --avatar-10: #acb406;
  --avatar-11: #d94f70;
  --avatar-12: #ea981e;

  --severity-info-bg: #ebf3ff;

  --severity-critical-bg: var(--primitive-dark-red-bg);
  --severity-critical-light: var(--primitive-dark-red-light);
  --severity-critical: var(--primitive-dark-red-default);
  --severity-critical-hover: var(--primitive-dark-red-hover);
  --severity-critical-dark: var(--primitive-dark-red-dark);

  --severity-high-bg: var(--primitive-red-bg);
  --severity-high-light: var(--primitive-red-light);
  --severity-high: var(--primitive-red-default);
  --severity-high-hover: var(--primitive-red-hover);
  --severity-high-dark: var(--primitive-red-dark);

  --severity-medium-bg: var(--primitive-orange-bg);
  --severity-medium-light: var(--primitive-orange-light);
  --severity-medium: var(--primitive-orange-default);
  --severity-medium-hover: var(--primitive-orange-hover);
  --severity-medium-dark: var(--primitive-orange-dark);

  --severity-low-bg: var(--primitive-yellow-bg);
  --severity-low-light: var(--primitive-yellow-light);
  --severity-low: var(--primitive-yellow-default);
  --severity-low-hover: var(--primitive-yellow-hover);
  --severity-low-dark: var(--primitive-yellow-dark);

  --severity-informational-bg: var(--primitive-neutral-100);
  --severity-informational: var(--primitive-neutral-400);
  --severity-informational-hover: var(--primitive-neutral-500);

  --status-error-bg: var(--primitive-red-bg);
  --status-error-light: var(--primitive-red-light);
  --status-error: var(--primitive-red-default);
  --status-error-hover: var(--primitive-red-hover);
  --status-error-dark: var(--primitive-red-dark);

  --status-warning-bg: var(--primitive-orange-bg);
  --status-warning-light: var(--primitive-orange-light);
  --status-warning: var(--primitive-orange-default);
  --status-warning-hover: var(--primitive-orange-hover);
  --status-warning-dark: var(--primitive-orange-dark);

  --status-success-bg: var(--primitive-green-bg);
  --status-success-light: var(--primitive-green-light);
  --status-success: var(--primitive-green-default);
  --status-success-hover: var(--primitive-green-hover);
  --status-success-dark: var(--primitive-green-dark);

  --status-info-bg: var(--primitive-blue-bg);
  --status-info-light: var(--primitive-blue-light);
  --status-info: var(--primitive-blue-default);
  --status-info-hover: var(--primitive-blue-hover);
  --status-info-dark: var(--primitive-blue-dark);

  --destructive: var(--status-error);
  --destructive-light: var(--status-error-light);
  --warning: var(--status-warning);
  --warning-light: var(--status-warning-light);
  --success: var(--status-success);
  --success-light: var(--status-success-light);
  --info: var(--status-info);
  --info-light: var(--status-info-light);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --brand: #6e32e0;
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-light: #3b1c1c;
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}
/* Design System - Z-Index Tokens */

/* ========================================
   Z-Index Layer System
   ======================================== */

/**
 * Centralized z-index values to prevent collisions
 * and allow safe changes across the application.
 * 
 * Usage:
 * - Use these CSS variables instead of hardcoded z-index values
 * - Increment from base value for stacking within a layer
 * 
 * Example:
 * .drawer { z-index: var(--z-index-drawer); }
 * .drawer-stack-2 { z-index: calc(var(--z-index-drawer) + 1); }
 */

:root {
  /* Base layer - below everything */
  --z-index-base: 0;

  /* Content layer - normal document flow */
  --z-index-content: 1;

  /* Sticky elements - headers, footers */
  --z-index-sticky: 10;

  /* Dropdown menus and popovers */
  --z-index-dropdown: 20;

  /* Overlay components */
  --z-index-backdrop: 50;
  --z-index-drawer: 50;
  --z-index-drawer-stack: 50;
  --z-index-sheet: 50;

  /* Modal dialogs */
  --z-index-modal: 60;

  /* Popovers and floating elements */
  --z-index-popover: 70;

  /* Tooltips - always on top of most elements */
  --z-index-tooltip: 80;

  /* Toast notifications */
  --z-index-toast: 90;

  /* Absolute top - dev tools, critical alerts */
  --z-index-maximum: 9999;
}
.date-time-picker {
  --date-picker-width: 250px;
}

.date-time-picker-calendar {
  width: var(--date-picker-width);
}

.react-datepicker {
  font-family: inherit;
  border: none;
  background: transparent;
}

.react-datepicker__header {
  background: transparent;
  border: none;
  padding-top: 0;
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.react-datepicker__current-month {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  text-align: center;
  padding-bottom: 0.75rem;
  width: 100%;
  background: transparent;
  border: none;
}

.react-datepicker__current-month--clickable {
  cursor: pointer;
  transition: color 150ms ease;
}

.react-datepicker__current-month--clickable:hover {
  color: var(--brand);
}

.react-datepicker__navigation {
  display: none;
}

.react-datepicker__month-container {
  float: none;
}

.react-datepicker__month {
  margin: 0;
}

.react-datepicker__month-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  max-width: 100%;
}

.react-datepicker__month-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 100%;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 150ms ease;
  color: var(--foreground);
  margin: 0;
}

.react-datepicker__month-text:hover {
  background-color: var(--brand-light);
  color: var(--brand);
}

.date-time-picker-calendar .react-datepicker__month-text--selected {
  background-color: transparent;
  color: var(--foreground);
  border: 1px solid var(--foreground);
}

.date-time-picker-calendar .react-datepicker__month-text--selected:hover {
  background-color: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand);
}

.react-datepicker__month-text--keyboard-selected {
  background-color: transparent;
}

.react-datepicker__month-text--today {
  font-weight: 600;
}

.react-datepicker__year-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  max-width: 100%;
  justify-content: center;
}

.react-datepicker__year-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 100%;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 150ms ease;
  color: var(--foreground);
  margin: 0;
}

.react-datepicker__year-text:hover {
  background-color: var(--brand-light);
  color: var(--brand);
}

.date-time-picker-calendar .react-datepicker__year-text--selected {
  background-color: var(--brand);
  color: white;
}

.date-time-picker-calendar .react-datepicker__year-text--selected:hover {
  background-color: var(--brand);
  color: white;
}

.react-datepicker__year-text--keyboard-selected {
  background-color: transparent;
}

.react-datepicker__year-text--today {
  font-weight: 600;
}

.date-time-picker-calendar .react-datepicker:has(.react-datepicker__year) .react-datepicker__header {
  display: none;
}
/* Design System - Z-Index Tokens */

/* ========================================
   Z-Index Layer System
   ======================================== */

/**
 * Centralized z-index values to prevent collisions
 * and allow safe changes across the application.
 * 
 * Usage:
 * - Use these CSS variables instead of hardcoded z-index values
 * - Increment from base value for stacking within a layer
 * 
 * Example:
 * .drawer { z-index: var(--z-index-drawer); }
 * .drawer-stack-2 { z-index: calc(var(--z-index-drawer) + 1); }
 */

:root {
  /* Base layer - below everything */
  --z-index-base: 0;

  /* Content layer - normal document flow */
  --z-index-content: 1;

  /* Sticky elements - headers, footers */
  --z-index-sticky: 10;

  /* Dropdown menus and popovers */
  --z-index-dropdown: 20;

  /* Overlay components */
  --z-index-backdrop: 50;
  --z-index-drawer: 50;
  --z-index-drawer-stack: 50;
  --z-index-sheet: 50;

  /* Modal dialogs */
  --z-index-modal: 60;

  /* Popovers and floating elements */
  --z-index-popover: 70;

  /* Tooltips - always on top of most elements */
  --z-index-tooltip: 80;

  /* Toast notifications */
  --z-index-toast: 90;

  /* Absolute top - dev tools, critical alerts */
  --z-index-maximum: 9999;
}

/* Design System - Transition Tokens */

/* ========================================
   Transition Duration Tokens
   ======================================== */

:root {
  --transition-duration-fast: 150ms;
  --transition-duration-normal: 250ms;
  --transition-duration-slow: 350ms;
}

/* ========================================
   Transition Easing Tokens
   ======================================== */

:root {
  --transition-easing-linear: linear;
  --transition-easing-ease: ease;
  --transition-easing-ease-in: ease-in;
  --transition-easing-ease-out: ease-out;
  --transition-easing-ease-in-out: ease-in-out;
  --transition-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Slide Animations - Right Side
   ======================================== */

/* Slide in from right (drawer opening) */

@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide out to right (drawer closing) */

@keyframes slide-out-to-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ========================================
   Fade Animations - Overlay
   ======================================== */

/* Fade in (overlay appearing) */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade out (overlay disappearing) */

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ========================================
   Fade and Collapse Animation
   ======================================== */

@keyframes fade-and-collapse {
  0% {
    opacity: 1;
    grid-template-rows: 1fr;
  }
  40% {
    opacity: 0;
    grid-template-rows: 1fr;
  }
  100% {
    opacity: 0;
    grid-template-rows: 0fr;
  }
}

/* ========================================
   Collapsible Animations
   ======================================== */

@keyframes collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

/* ========================================
   Animation Utility Classes
   ======================================== */

/* Slide animations */

.animate-slide-in-from-right {
  animation: slide-in-from-right var(--transition-duration-normal) var(--transition-easing-spring);
}

.animate-slide-out-to-right {
  animation: slide-out-to-right var(--transition-duration-normal) var(--transition-easing-spring);
}

/* Fade animations */

.animate-fade-in {
  animation: fade-in var(--transition-duration-fast) var(--transition-easing-ease-out);
}

.animate-fade-out {
  animation: fade-out var(--transition-duration-fast) var(--transition-easing-ease-in);
}

.animate-fade-and-collapse {
  animation: fade-and-collapse var(--transition-duration-slow) var(--transition-easing-smooth) forwards;
}

/* Animation state classes */

.animation-fill-forwards {
  animation-fill-mode: forwards;
}

.animation-fill-backwards {
  animation-fill-mode: backwards;
}

.animation-fill-both {
  animation-fill-mode: both;
}

/* Collapsible animations */

.animate-collapsible-down {
  animation: collapsible-down var(--transition-duration-normal) var(--transition-easing-smooth);
}

.animate-collapsible-up {
  animation: collapsible-up var(--transition-duration-fast) var(--transition-easing-smooth);
}

/* ========================================
   Dashboard Pipeline Animations
   ======================================== */

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

/* ========================================
   Skeleton Shimmer Animation
   ======================================== */

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

.animate-shimmer {
  background-color: var(--neutral-lightest-gray);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-shimmer {
    animation: none;
  }
}

/* ========================================
   Typing Dots Animation (sequential build-up)
   ======================================== */

@keyframes typing-dot-1 {
  0%,
  100% {
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
}

@keyframes typing-dot-2 {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  45%,
  85% {
    opacity: 1;
  }
}

@keyframes typing-dot-3 {
  0%,
  60%,
  100% {
    opacity: 0;
  }
  75%,
  85% {
    opacity: 1;
  }
}

.animate-typing-dot-1 {
  animation: typing-dot-1 0.9s ease-in-out infinite;
}

.animate-typing-dot-2 {
  animation: typing-dot-2 0.9s ease-in-out infinite;
}

.animate-typing-dot-3 {
  animation: typing-dot-3 0.9s ease-in-out infinite;
}

.recharts-tooltip-wrapper {
  z-index: var(--z-index-tooltip) !important;
}

.recharts-pie-sector path {
  transition: d var(--transition-duration-normal) var(--transition-easing-smooth) !important;
}