/* DealGram CRM - CSS Variables with Business Turquoise Accent */

:root {
    /* ===== PRIMARY BRAND COLORS - Business Psychology ===== */
    /* Turkus - zaufanie, innowacja, spokój */
    --turquoise-50: #f0fdfa;
    --turquoise-100: #ccfbf1;
    --turquoise-200: #99f6e4;
    --turquoise-300: #5eead4;
    --turquoise-400: #2dd4bf;
    --turquoise-500: #14b8a6;  /* Main turquoise */
    --turquoise-600: #0d9488;
    --turquoise-700: #0f766e;
    --turquoise-800: #115e59;
    --turquoise-900: #134e4a;
    
    /* Gradient z fioletowym - kreatywność + zaufanie */
    --gradient-primary: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);
    --gradient-turquoise: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%);
    --gradient-success: linear-gradient(135deg, #14b8a6 0%, #10b981 100%);
    --gradient-premium: linear-gradient(135deg, #0891b2 0%, #6366f1 50%, #8b5cf6 100%);
    
    /* Original colors adjusted */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    
    /* Business Accent Colors */
    --accent-turquoise: #14b8a6;
    --accent-cyan: #06b6d4;
    --accent-teal: #0d9488;
    
    /* Semantic colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4; /* Changed to cyan-turquoise */
    
    /* Rest remains the same... */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-hover: #f8fafc;
    --bg-active: #e2e8f0;
    
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --text-inverse: #ffffff;
    
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-dark: #94a3b8;
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-turquoise: 0 10px 40px -10px rgba(20, 184, 166, 0.35);
    --shadow-turquoise-lg: 0 20px 60px -15px rgba(20, 184, 166, 0.45);
    
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    
    --navbar-height: 60px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
  
    /* ===== LAYOUT DIMENSIONS ===== */
    --navbar-margin: 20px;
    --navbar-tab-height: 56px;
    --toast-top-offset: calc(var(--navbar-margin) + var(--navbar-tab-height) + 16px);
}

/* ===== DARK MODE ===== */
.dark-mode {
    /* Adjusted turquoise for dark mode - more vibrant */
    --turquoise-500: #2dd4bf;
    --turquoise-600: #14b8a6;
    --accent-turquoise: #2dd4bf;
    --accent-cyan: #22d3ee;
    
    --gradient-primary: linear-gradient(135deg, #2dd4bf 0%, #818cf8 100%);
    --gradient-turquoise: linear-gradient(135deg, #22d3ee 0%, #2dd4bf 100%);
    
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --bg-active: #475569;
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-inverse: #0f172a;
    
    --border-light: #334155;
    --border-medium: #475569;
    --border-dark: #64748b;
    
    --shadow-turquoise: 0 10px 40px -10px rgba(45, 212, 191, 0.25);
    --shadow-turquoise-lg: 0 20px 60px -15px rgba(45, 212, 191, 0.35);
}