/**
 * Shared Design System Tokens
 * SINGLE SOURCE OF TRUTH - All colors, typography, and spacing
 * Used by: LeadsEngine, ChatProject
 *
 * Based on 2025 Enterprise SaaS design best practices
 * Accessibility: WCAG 2.1 AA compliant contrast ratios
 */

/* Bootstrap Icons - Required for navbar icons (bi-calendar3, bi-terminal, etc.) */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');

:root {
  /* ==================== PRIMARY BRAND COLORS ==================== */
  /* Professional Blue - Trust, Innovation, Enterprise */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;    /* Main brand color */
  --primary-600: #2563eb;    /* Primary actions, links */
  --primary-700: #1d4ed8;    /* Hover states */
  --primary-800: #1e40af;    /* Active states */
  --primary-900: #1e3a8a;    /* Dark accents */

  /* ==================== SEMANTIC COLORS ==================== */

  /* Success - Green (Completed, Won, Converted) */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;    /* Main success */
  --success-600: #16a34a;    /* Delivered, Won badges */
  --success-700: #15803d;

  /* Warning - Amber (Pending, Follow-up, Attention) */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;    /* Main warning */
  --warning-600: #d97706;    /* Pending badges */
  --warning-700: #b45309;

  /* Danger - Red (Failed, Lost, Errors) */
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;     /* Main danger */
  --danger-600: #dc2626;     /* Failed, Lost badges */
  --danger-700: #b91c1c;

  /* Info - Cyan (Informational, Sent, In Progress) */
  --info-50: #ecfeff;
  --info-100: #cffafe;
  --info-200: #a5f3fc;
  --info-300: #67e8f9;
  --info-400: #22d3ee;
  --info-500: #06b6d4;       /* Main info */
  --info-600: #0891b2;       /* Sent badges */
  --info-700: #0e7490;

  /* ==================== NEUTRAL GRAY SCALE ==================== */
  /* Clean, professional grays for text and backgrounds */
  --gray-50: #f9fafb;        /* Lightest backgrounds */
  --gray-100: #f3f4f6;       /* Card backgrounds, hover */
  --gray-200: #e5e7eb;       /* Borders, dividers */
  --gray-300: #d1d5db;       /* Disabled borders */
  --gray-400: #9ca3af;       /* Placeholder text */
  --gray-500: #6b7280;       /* Muted text */
  --gray-600: #4b5563;       /* Secondary text */
  --gray-700: #374151;       /* Body text */
  --gray-800: #1f2937;       /* Headings */
  --gray-900: #111827;       /* Primary text */

  /* ==================== ACCENT COLORS - PURPLE/VIOLET ==================== */
  /* Premium accent for headers, special sections */
  --accent-50: #f5f3ff;
  --accent-100: #ede9fe;
  --accent-200: #ddd6fe;
  --accent-300: #c4b5fd;
  --accent-400: #a78bfa;
  --accent-500: #8b5cf6;      /* Main accent */
  --accent-600: #7c3aed;
  --accent-700: #6d28d9;
  --accent-800: #5b21b6;
  --accent-900: #4c1d95;

  /* ==================== SPECIAL PURPOSE COLORS ==================== */

  /* Pure colors */
  --white: #ffffff;
  --black: #000000;

  /* Status-specific colors (matching lead statuses) */
  --status-new: #22c55e;
  --status-contacted: #3b82f6;
  --status-qualified: #8b5cf6;
  --status-converted: #0891b2;
  --status-lost: #ef4444;
  --status-follow-up: #f59e0b;

  /* Message bubbles - iPhone Messages style */
  --bubble-outbound-bg: #3b82f6;
  --bubble-outbound-text: #ffffff;
  --bubble-inbound-bg: #f3f4f6;
  --bubble-inbound-text: #111827;

  /* ==================== TEXT/FOREGROUND COLORS ==================== */
  /* RULE: White text on colored backgrounds, dark text on light backgrounds */

  /* Text on LIGHT backgrounds (white, gray-50, gray-100) */
  --text-on-light: #111827;           /* Near black - primary text */
  --text-on-light-secondary: #374151; /* Gray-700 - secondary text */
  --text-on-light-muted: #6b7280;     /* Gray-500 - muted/helper text */

  /* Text on DARK/COLORED backgrounds (blue, green, red, etc.) */
  --text-on-dark: #ffffff;            /* Pure white */
  --text-on-dark-secondary: rgba(255, 255, 255, 0.9);
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);

  /* Text on WARNING backgrounds (yellow/amber - special case) */
  --text-on-warning: #78350f;         /* Dark amber for contrast */
  --text-on-warning-secondary: #92400e;

  /* Semantic text colors */
  --text-primary: #111827;            /* Main body text */
  --text-secondary: #374151;          /* Secondary content */
  --text-muted: #6b7280;              /* Helper text, timestamps */
  --text-link: #2563eb;               /* Links */
  --text-link-hover: #1d4ed8;         /* Link hover */

  /* Tab states */
  --tab-inactive-bg: #e2e8f0;         /* Light gray background */
  --tab-inactive-text: #111827;       /* Black text on light */
  --tab-active-bg: var(--primary-600);
  --tab-active-text: #ffffff;         /* White text on blue */

  /* ==================== TYPOGRAPHY ==================== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* Font Sizes - Fluid scale */
  --text-xs: 0.75rem;        /* 12px */
  --text-sm: 0.875rem;       /* 14px */
  --text-base: 1rem;         /* 16px */
  --text-lg: 1.125rem;       /* 18px */
  --text-xl: 1.25rem;        /* 20px */
  --text-2xl: 1.5rem;        /* 24px */
  --text-3xl: 1.875rem;      /* 30px */
  --text-4xl: 2.25rem;       /* 36px */
  --text-5xl: 3rem;          /* 48px */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ==================== SPACING ==================== */
  --space-0: 0;
  --space-1: 0.25rem;        /* 4px */
  --space-2: 0.5rem;         /* 8px */
  --space-3: 0.75rem;        /* 12px */
  --space-4: 1rem;           /* 16px */
  --space-5: 1.25rem;        /* 20px */
  --space-6: 1.5rem;         /* 24px */
  --space-8: 2rem;           /* 32px */
  --space-10: 2.5rem;        /* 40px */
  --space-12: 3rem;          /* 48px */
  --space-16: 4rem;          /* 64px */
  --space-20: 5rem;          /* 80px */

  /* Legacy spacing names (for ChatProject compatibility) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* ==================== BORDERS ==================== */
  --radius-none: 0;
  --radius-sm: 0.125rem;     /* 2px */
  --radius: 0.25rem;         /* 4px */
  --radius-md: 0.375rem;     /* 6px */
  --radius-lg: 0.5rem;       /* 8px */
  --radius-xl: 0.75rem;      /* 12px */
  --radius-2xl: 1rem;        /* 16px */
  --radius-3xl: 1.5rem;      /* 24px */
  --radius-full: 9999px;

  --border-width: 1px;
  --border-color: var(--gray-200);

  /* ==================== SHADOWS ==================== */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --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);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Colored shadows for buttons */
  --shadow-primary: 0 4px 14px 0 rgb(59 130 246 / 0.39);
  --shadow-success: 0 4px 14px 0 rgb(34 197 94 / 0.39);
  --shadow-danger: 0 4px 14px 0 rgb(239 68 68 / 0.39);

  /* ==================== TRANSITIONS ==================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* ==================== Z-INDEX SCALE ==================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ==================== GRADIENTS ==================== */
  --gradient-primary: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
  --gradient-success: linear-gradient(135deg, var(--success-600) 0%, var(--success-500) 100%);
  --gradient-warning: linear-gradient(135deg, var(--warning-600) 0%, var(--warning-500) 100%);
  --gradient-danger: linear-gradient(135deg, var(--danger-600) 0%, var(--danger-500) 100%);
  --gradient-info: linear-gradient(135deg, var(--info-600) 0%, var(--info-500) 100%);

  /* Navbar gradient - Professional deep blue */
  --gradient-navbar: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 100%);

  /* Page header gradient - Professional blue (complements navbar) */
  --gradient-page-header: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);

  /* Accent gradient - Purple to violet */
  --gradient-accent: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-700) 100%);

  /* Background gradient - Subtle, clean */
  --gradient-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}