/*
 * Lotix CRM - Brand Colors
 * ========================
 * Easily configurable brand colors for the entire application.
 * When migrating to Laravel, these values can be generated from config/brand.php
 */

:root {
  /* Primary Colors - Teal */
  --color-primary: #0D9488;
  --color-primary-dark: #0F766E;
  --color-primary-light: #14B8A6;
  --color-primary-50: #F0FDFA;
  --color-primary-100: #CCFBF1;
  --color-primary-200: #99F6E4;
  --color-primary-500: #14B8A6;
  --color-primary-600: #0D9488;
  --color-primary-700: #0F766E;
  --color-primary-800: #115E59;
  --color-primary-900: #134E4A;

  /* Accent Colors - Amber/Gold */
  --color-accent: #F59E0B;
  --color-accent-light: #FCD34D;
  --color-accent-dark: #D97706;
  --color-accent-50: #FFFBEB;
  --color-accent-100: #FEF3C7;
  --color-accent-500: #F59E0B;
  --color-accent-600: #D97706;

  /* Secondary Colors - Indigo (AI/Analytics) */
  --color-secondary: #6366F1;
  --color-secondary-light: #818CF8;
  --color-secondary-dark: #4F46E5;
  --color-secondary-50: #EEF2FF;
  --color-secondary-100: #E0E7FF;
  --color-secondary-500: #6366F1;
  --color-secondary-600: #4F46E5;

  /* Status Colors */
  --color-success: #10B981;
  --color-success-light: #34D399;
  --color-success-dark: #059669;
  --color-success-50: #ECFDF5;
  --color-success-100: #D1FAE5;
  --color-success-500: #10B981;
  --color-success-600: #059669;

  --color-warning: #F59E0B;
  --color-warning-light: #FBBF24;
  --color-warning-dark: #D97706;
  --color-warning-50: #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-500: #F59E0B;
  --color-warning-600: #D97706;

  --color-danger: #EF4444;
  --color-danger-light: #F87171;
  --color-danger-dark: #DC2626;
  --color-danger-50: #FEF2F2;
  --color-danger-100: #FEE2E2;
  --color-danger-500: #EF4444;
  --color-danger-600: #DC2626;

  --color-info: #3B82F6;
  --color-info-light: #60A5FA;
  --color-info-dark: #2563EB;
  --color-info-50: #EFF6FF;
  --color-info-100: #DBEAFE;
  --color-info-500: #3B82F6;
  --color-info-600: #2563EB;

  /* Neutral Colors - Slate */
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
  --color-gray-950: #020617;

  /* Light Mode Theme Variables */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-topbar: #FFFFFF;
  --bg-hover: #F1F5F9;
  --bg-active: #E0F2FE;

  --border-color: #E2E8F0;
  --border-color-light: #F1F5F9;
  --border-color-dark: #CBD5E1;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --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);

  /* Pipeline Stage Colors */
  --stage-new-inquiry: #3B82F6;
  --stage-contacted: #8B5CF6;
  --stage-viewing: #EC4899;
  --stage-offer: #F59E0B;
  --stage-negotiation: #F97316;
  --stage-won: #10B981;
  --stage-lost: #EF4444;

  /* Spacing & Sizing */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --topbar-height: 64px;
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Arabic Typography - Premium readability */
  --line-height-arabic: 2;

  /* Premium Shadow Tokens */
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --border-color-subtle: #F1F5F9;
}

/* Dark Mode Theme */
[data-theme="dark"],
.dark {
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --bg-card: #1E293B;
  --bg-sidebar: #0F172A;
  --bg-topbar: #1E293B;
  --bg-hover: #334155;
  --bg-active: #1E3A5F;

  --border-color: #334155;
  --border-color-light: #1E293B;
  --border-color-dark: #475569;

  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-muted: #64748B;
  --text-inverse: #0F172A;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);

  /* Premium Shadow Tokens - Dark Mode */
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.15);
  --shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.15);
  --border-color-subtle: #1E293B;

  /* Slightly adjusted primary for dark mode visibility */
  --color-primary-light: #2DD4BF;
}