/* ==========================================================================
   ZAHIQ AI - Visual-First Design System
   Vercel-Inspired Clean Design with Bold Gradient Accents
   ========================================================================== */

:root {
  /* ==========================================================================
     Primary Palette - Clean like Vercel, Bold like Retell
     ========================================================================== */
  
  /* Base Colors */
  --black: #000000;                      /* Pure black background */
  --white: #FFFFFF;                      /* Pure white text */
  --gray-1: #FAFAFA;                     /* Lightest gray */
  --gray-2: #EAEAEA;                     /* Light gray borders */
  --gray-3: #999999;                     /* Medium gray text */
  --gray-4: #666666;                     /* Dark gray text */
  --gray-5: #333333;                     /* Darker gray */
  --gray-6: #1A1A1A;                     /* Almost black */
  --gray-7: #111111;                     /* Near black */
  
  /* Accent Gradients */
  --gradient-blue: linear-gradient(90deg, #0070F3 0%, #00DFD8 100%);
  --gradient-purple: linear-gradient(90deg, #7928CA 0%, #FF0080 100%);
  --gradient-green: linear-gradient(90deg, #00D68F 0%, #00B887 100%);
  --gradient-orange: linear-gradient(90deg, #FF6B00 0%, #FF9500 100%);
  --gradient-rainbow: linear-gradient(90deg, #FF0080, #7928CA, #0070F3, #00DFD8, #00D68F);
  
  /* Animated Gradients */
  --gradient-animated: linear-gradient(270deg, #0070F3, #00DFD8, #00D68F, #0070F3);
  --gradient-mesh: radial-gradient(at 20% 80%, rgba(0, 112, 243, 0.15) 0px, transparent 50%),
                   radial-gradient(at 80% 20%, rgba(0, 223, 216, 0.15) 0px, transparent 50%),
                   radial-gradient(at 40% 40%, rgba(0, 214, 143, 0.1) 0px, transparent 50%);
  
  /* Functional Colors */
  --blue: #0070F3;                       /* Primary action */
  --green: #00D68F;                      /* Success */
  --red: #E00;                           /* Error */
  --yellow: #F5A623;                     /* Warning */
  --purple: #7928CA;                     /* Special */
  --pink: #FF0080;                       /* Accent */
  
  /* ==========================================================================
     Typography - Clean & Minimal
     ========================================================================== */
  
  /* Font Stack */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  
  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 96px;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  
  /* ==========================================================================
     Spacing System
     ========================================================================== */
  
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-36: 144px;
  --space-40: 160px;
  --space-44: 176px;
  --space-48: 192px;
  --space-52: 208px;
  --space-56: 224px;
  --space-60: 240px;
  --space-64: 256px;
  --space-72: 288px;
  --space-80: 320px;
  --space-96: 384px;
  
  /* ==========================================================================
     Border Radius
     ========================================================================== */
  
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;
  
  /* ==========================================================================
     Shadows - Subtle Vercel Style
     ========================================================================== */
  
  --shadow-smallest: 0px 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-small: 0px 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0px 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-large: 0px 10px 20px rgba(0, 0, 0, 0.1);
  --shadow-largest: 0px 20px 40px rgba(0, 0, 0, 0.15);
  --shadow-border: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 112, 243, 0.15);
  
  /* Gradient Shadows */
  --shadow-blue: 0px 10px 40px rgba(0, 112, 243, 0.3);
  --shadow-green: 0px 10px 40px rgba(0, 214, 143, 0.3);
  --shadow-purple: 0px 10px 40px rgba(121, 40, 202, 0.3);
  --shadow-pink: 0px 10px 40px rgba(255, 0, 128, 0.3);
  
  /* ==========================================================================
     Animation & Transitions
     ========================================================================== */
  
  /* Durations */
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 750ms;
  --duration-slowest: 1000ms;
  
  /* Easings */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Transitions */
  --transition-all: all var(--duration-base) var(--ease-in-out);
  --transition-colors: color var(--duration-fast) var(--ease-in-out),
                      background-color var(--duration-fast) var(--ease-in-out),
                      border-color var(--duration-fast) var(--ease-in-out);
  --transition-transform: transform var(--duration-base) var(--ease-in-out);
  --transition-opacity: opacity var(--duration-base) var(--ease-in-out);
  --transition-shadow: box-shadow var(--duration-base) var(--ease-in-out);
  
  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  
  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-notification: 700;
  --z-max: 9999;
  
  /* ==========================================================================
     Layout
     ========================================================================== */
  
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* Navigation */
  --nav-height: 48px;
  --nav-padding: var(--space-4);
  --nav-blur: blur(10px);
  
  /* Grid */
  --grid-columns: 12;
  --grid-gap: var(--space-4);
  
  /* ==========================================================================
     Component Variables
     ========================================================================== */
  
  /* Buttons */
  --button-height: 40px;
  --button-padding: 0 var(--space-4);
  --button-radius: var(--radius-md);
  --button-font-size: var(--text-sm);
  --button-font-weight: var(--font-medium);
  
  /* Cards */
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-6);
  --card-border: 1px solid var(--gray-2);
  --card-shadow: var(--shadow-medium);
  
  /* Inputs */
  --input-height: 40px;
  --input-padding: 0 var(--space-3);
  --input-radius: var(--radius-md);
  --input-border: 1px solid var(--gray-2);
  --input-font-size: var(--text-sm);
  
  /* Pills/Badges */
  --pill-height: 24px;
  --pill-padding: 0 var(--space-2);
  --pill-radius: var(--radius-full);
  --pill-font-size: var(--text-xs);
  
  /* ==========================================================================
     Interactive Variables
     ========================================================================== */
  
  /* Mouse position for interactive effects */
  --mouse-x: 50%;
  --mouse-y: 50%;
  
  /* Scroll progress */
  --scroll-progress: 0%;
  
  /* Animation states */
  --is-loading: 0;
  --is-hovering: 0;
  --is-active: 0;
}

/* ==========================================================================
   Mobile Responsive Sizes
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --text-4xl: 36px;
    --text-5xl: 48px;
    --text-6xl: 64px;
    --nav-height: 56px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-3xl: 28px;
    --text-4xl: 32px;
    --text-5xl: 40px;
    --text-6xl: 48px;
  }
}

/* ==========================================================================
   Dark Mode Support (Optional) - DISABLED to respect data-theme attribute
   ========================================================================== */

/* Commented out to prevent system dark mode from overriding theme selection
@media (prefers-color-scheme: dark) {
  :root {
    --black: #FFFFFF;
    --white: #000000;
    --gray-1: #1A1A1A;
    --gray-2: #2A2A2A;
    --gray-3: #666666;
    --gray-4: #999999;
    --gray-5: #CCCCCC;
    --gray-6: #E5E5E5;
  }
}
*/

[data-theme="dark"] {
  --black: #FFFFFF;
  --white: #000000;
  --gray-1: #1A1A1A;
  --gray-2: #2A2A2A;
  --gray-3: #666666;
  --gray-4: #999999;
  --gray-5: #CCCCCC;
  --gray-6: #E5E5E5;
}