/**
 * Futurekey CRM - Design System Variables
 * Landify Dark Theme Implementation
 */

:root {
   /* ============================================
     COLOR PALETTE - Dark Theme
     ============================================ */

   /* Background Colors */
   --color-bg-body: #11121E;
   --color-bg-sidebar: #141522;
   --color-bg-card: #1E1F30;
   --color-bg-card-hover: #252738;
   --color-bg-input: #1A1B2E;

   /* Border Colors */
   --color-border: #2B2D40;
   --color-border-focus: var(--color-primary);

   /* Primary Accent - Purple/Violet Gradient */
   --color-primary: #7F56D9;
   --color-primary-hover: #9D5BD2;
   --color-primary-light: rgba(127, 86, 217, 0.15);
   --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);

   /* Secondary Accents */
   --color-success: #28C76F;
   --color-success-light: rgba(40, 199, 111, 0.15);
   --color-warning: #FF9F43;
   --color-warning-light: rgba(255, 159, 67, 0.15);
   --color-danger: #EA5455;
   --color-danger-light: rgba(234, 84, 85, 0.15);
   --color-info: #00CFE8;
   --color-info-light: rgba(0, 207, 232, 0.15);

   /* Text Colors */
   --color-text-primary: #FFFFFF;
   --color-text-secondary: #A0AEC0;
   --color-text-muted: #6B7280;
   --color-text-inverse: #11121E;

   /* ============================================
     TYPOGRAPHY
     ============================================ */
   --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

   /* Font Sizes */
   --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 */

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

   /* Line Heights */
   --leading-tight: 1.25;
   --leading-normal: 1.5;
   --leading-relaxed: 1.625;

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

   --spacing-card: 24px;
   --spacing-section: 32px;

   /* ============================================
     DIMENSIONS
     ============================================ */
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-full: 9999px;

   --sidebar-width: 280px;
   --sidebar-collapsed: 80px;
   --header-height: 72px;

   /* ============================================
     SHADOWS
     ============================================ */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);
   --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.6);
   --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
   --shadow-glow: 0 0 20px var(--color-primary-light);

   /* ============================================
     TRANSITIONS
     ============================================ */
   --transition-fast: 150ms ease;
   --transition-normal: 250ms ease;
   --transition-slow: 350ms ease;

   /* ============================================
     Z-INDEX LAYERS
     ============================================ */
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-fixed: 300;
   --z-modal-backdrop: 400;
   --z-modal: 500;
   --z-tooltip: 600;
   --z-toast: 700;
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */
[data-theme="light"] {
   --color-bg-body: #F8F9FA;
   --color-bg-sidebar: #FFFFFF;
   --color-bg-card: #FFFFFF;
   --color-bg-card-hover: #F3F4F6;
   --color-bg-input: #F3F4F6;

   --color-border: #E5E7EB;

   --color-text-primary: #1F2937;
   --color-text-secondary: #6B7280;
   --color-text-muted: #9CA3AF;

   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);
   --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15);
   --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
}