@import "@fontsource/geist-sans/400.css";
@import "@fontsource/geist-sans/500.css";
@import "@fontsource/geist-sans/600.css";
@import "@fontsource/geist-sans/700.css";
@import "@fontsource/geist-mono/400.css";



@tailwind base;
@tailwind components;
@tailwind utilities;

/* CRM Design System - Modern SaaS Aesthetic */
/* ... other styles ... */




/* CRM Design System - Modern SaaS Aesthetic */

@layer base {
  :root {
    /* Light Theme */
    --background: 0 0% 99%;
    --foreground: 224 71% 4%;

    --card: 0 0% 100%;
    --card-foreground: 224 71% 4%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 71% 4%;

    --primary: 220 90% 56%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 14% 96%;
    --secondary-foreground: 224 71% 4%;

    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 46%;

    --accent: 220 14% 96%;
    --accent-foreground: 224 71% 4%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

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

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

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 220 90% 56%;

    --radius: 0.5rem;

    /* Sidebar */
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 224 71% 4%;
    --sidebar-primary: 220 90% 56%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 14% 96%;
    --sidebar-accent-foreground: 224 71% 4%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 220 90% 56%;

    /* Custom tokens */
    --gradient-primary: linear-gradient(135deg, hsl(220 90% 56%) 0%, hsl(250 90% 60%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(220 14% 96%) 0%, hsl(220 14% 92%) 100%);
    --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(220 14% 98%) 100%);
    
    --shadow-sm: 0 1px 2px 0 hsl(224 71% 4% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(224 71% 4% / 0.1), 0 2px 4px -2px hsl(224 71% 4% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(224 71% 4% / 0.1), 0 4px 6px -4px hsl(224 71% 4% / 0.1);
    --shadow-glow: 0 0 20px hsl(220 90% 56% / 0.15);

    /* Status colors */
    --status-lead: 38 92% 50%;
    --status-prospect: 220 90% 56%;
    --status-customer: 142 76% 36%;
    --status-churned: 0 84% 60%;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --card: 224 71% 6%;
    --card-foreground: 213 31% 91%;

    --popover: 224 71% 6%;
    --popover-foreground: 213 31% 91%;

    --primary: 220 90% 56%;
    --primary-foreground: 0 0% 100%;

    --secondary: 215 28% 12%;
    --secondary-foreground: 213 31% 91%;

    --muted: 215 28% 12%;
    --muted-foreground: 215 20% 55%;

    --accent: 215 28% 15%;
    --accent-foreground: 213 31% 91%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

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

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

    --border: 215 28% 16%;
    --input: 215 28% 16%;
    --ring: 220 90% 56%;

    /* Sidebar dark */
    --sidebar-background: 224 71% 5%;
    --sidebar-foreground: 213 31% 91%;
    --sidebar-primary: 220 90% 56%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 215 28% 12%;
    --sidebar-accent-foreground: 213 31% 91%;
    --sidebar-border: 215 28% 16%;
    --sidebar-ring: 220 90% 56%;

    /* Custom tokens dark */
    --gradient-primary: linear-gradient(135deg, hsl(220 90% 56%) 0%, hsl(250 85% 55%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(215 28% 12%) 0%, hsl(215 28% 16%) 100%);
    --gradient-surface: linear-gradient(180deg, hsl(224 71% 6%) 0%, hsl(224 71% 5%) 100%);

    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
    --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.4), 0 2px 4px -2px hsl(0 0% 0% / 0.3);
    --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.4), 0 4px 6px -4px hsl(0 0% 0% / 0.3);
    --shadow-glow: 0 0 30px hsl(220 90% 56% / 0.2);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    font-family: "Geist Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-background text-foreground;
  }

  code, pre, kbd {
    font-family: "Geist Mono", monospace;
  }
}

@layer utilities {
  .gradient-primary {
    background: var(--gradient-primary);
  }

  .gradient-surface {
    background: var(--gradient-surface);
  }

  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }

  .animate-slide-in {
    animation: slideIn 0.3s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }

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

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

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}
