/* ========================================
   ENHANCED AL-FIKR DESIGN SYSTEM - COMPLETE COLOR VARIABLES
   ======================================== */

:root {
    /* ========================================
     COLOR PALETTE - PRIMARY COLORS (Based on #ecb43a)
     ======================================== */
    --primary-50: #fffaeb;
    --primary-100: #fef3c7;
    --primary-200: #fde68a;
    --primary-300: #fcd34d;
    --primary-400: #fbbf24;
    --primary-500: #ecb43a; /* Main brand color */
    --primary-600: #d29e2e;
    --primary-700: #b58422;
    --primary-800: #8f6816;
    --primary-900: #744e0a;
    /* ========================================
     COLOR PALETTE - SECONDARY COLORS (Based on #334155)
     ======================================== */
    --secondary-50: #f8fafc;
    --secondary-100: #f1f5f9;
    --secondary-200: #e2e8f0;
    --secondary-300: #cbd5e1;
    --secondary-400: #94a3b8;
    --secondary-500: #64748b;
    --secondary-600: #475569;
    --secondary-700: #334155; /* Secondary brand color */
    --secondary-800: #273344;
    --secondary-900: #1b2532;
    /* ========================================
     COLOR PALETTE - BLUE COLORS
     ======================================== */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e3a5f; /* Main blue brand color */
    --blue-900: #1e3a8a;
    /* ========================================
     COLOR PALETTE - GRAY COLORS
     ======================================== */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    /* ========================================
     COLOR PALETTE - SEMANTIC COLORS
     ======================================== */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-200: #bfdbfe;
    --info-300: #93c5fd;
    --info-400: #60a5fa;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;
    --info-800: #1e40af;
    --info-900: #1e3a8a;
    /* ========================================
     NEW: THEME-SPECIFIC COLOR VARIABLES
     ======================================== */
    /* Background Colors */
    --background-color: var(--gray-50);
    --surface-color: var(--white);
    --surface-elevated: var(--gray-100);
    --surface-overlay: rgba(255, 255, 255, 0.95);
    /* Text Colors */
    --text-color-primary: var(--secondary-800);
    --text-color-secondary: var(--secondary-600);
    --text-color-muted: var(--secondary-400);
    --text-color-disabled: var(--secondary-300);
    /* Text on Color Backgrounds */
    --text-on-primary: var(--white);
    --text-on-secondary: var(--white);
    --text-on-surface: var(--secondary-800);
    --text-on-background: var(--secondary-800);
    /* Interactive States */
    --interactive-primary: var(--primary-500);
    --interactive-primary-hover: var(--primary-600);
    --interactive-primary-active: var(--primary-700);
    --interactive-primary-disabled: var(--primary-300);
    --interactive-secondary: var(--secondary-500);
    --interactive-secondary-hover: var(--secondary-600);
    --interactive-secondary-active: var(--secondary-700);
    --interactive-secondary-disabled: var(--secondary-300);
    /* Focus States */
    --focus-ring-color: var(--primary-500);
    --focus-ring-shadow: 0 0 0 3px rgba(236, 180, 58, 0.3);
    /* Accent Colors */
    --accent-warm: #f97316; /* Orange accent */
    --accent-cool: #0ea5e9; /* Sky blue accent */
    --accent-success: var(--success-500);
    --accent-warning: var(--warning-500);
    --accent-danger: var(--danger-500);
    /* ========================================
     COLOR PALETTE - NEUTRAL COLORS
     ======================================== */
    --white: #ffffff;
    --black: #000000;
    --transparent: transparent;
    /* ========================================
     COLOR PALETTE - OVERLAY COLORS
     ======================================== */
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-medium: rgba(0, 0, 0, 0.4);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-primary: rgba(236, 180, 58, 0.1);
    --overlay-blue: rgba(30, 58, 95, 0.1);
    --overlay-backdrop: rgba(0, 0, 0, 0.5);
    /* ========================================
     ENHANCED GRADIENT COLORS
     ======================================== */
    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary-600) 0%, var(--secondary-700) 100%);
    --gradient-warm: linear-gradient(135deg, var(--primary-400) 0%, var(--accent-warm) 100%);
    --gradient-cool: linear-gradient(135deg, var(--blue-500) 0%, var(--accent-cool) 100%);
    --gradient-subtle: linear-gradient(135deg, var(--gray-50) 0%, var(--primary-50) 50%, var(--secondary-50) 100%);
    --gradient-hero: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 50%, var(--secondary-700) 100%);
    /* ========================================
     TYPOGRAPHY COLORS
     ======================================== */
    --heading-color: var(--secondary-800);
    --subheading-color: var(--secondary-700);
    --body-color: var(--secondary-600);
    --caption-color: var(--secondary-500);
    --link-color: var(--primary-600);
    --link-hover-color: var(--primary-700);
    --link-visited-color: var(--secondary-700);
    /* ========================================
     COMPONENT-SPECIFIC COLORS
     ======================================== */
    /* Buttons */
    --btn-primary-bg: var(--primary-500);
    --btn-primary-hover: var(--primary-600);
    --btn-primary-active: var(--primary-700);
    --btn-primary-text: var(--white);
    --btn-secondary-bg: var(--secondary-100);
    --btn-secondary-hover: var(--secondary-200);
    --btn-secondary-active: var(--secondary-300);
    --btn-secondary-text: var(--secondary-700);
    --btn-outline-border: var(--primary-500);
    --btn-outline-text: var(--primary-600);
    --btn-outline-hover-bg: var(--primary-500);
    --btn-outline-hover-text: var(--white);
    /* Forms */
    --input-bg: var(--white);
    --input-border: var(--gray-300);
    --input-border-focus: var(--primary-500);
    --input-text: var(--secondary-800);
    --input-placeholder: var(--secondary-400);
    --input-disabled-bg: var(--gray-100);
    --input-disabled-text: var(--secondary-400);
    /* Cards */
    --card-bg: var(--white);
    --card-border: var(--gray-200);
    --card-shadow: var(--shadow-md);
    --card-hover-shadow: var(--shadow-lg);
    /* Navigation */
    --nav-bg: var(--white);
    --nav-border: var(--gray-200);
    --nav-link-color: var(--secondary-600);
    --nav-link-hover: var(--primary-600);
    --nav-link-active: var(--primary-700);
    /* Status Colors */
    --status-success-bg: var(--success-50);
    --status-success-text: var(--success-700);
    --status-success-border: var(--success-200);
    --status-warning-bg: var(--warning-50);
    --status-warning-text: var(--warning-700);
    --status-warning-border: var(--warning-200);
    --status-danger-bg: var(--danger-50);
    --status-danger-text: var(--danger-700);
    --status-danger-border: var(--danger-200);
    --status-info-bg: var(--info-50);
    --status-info-text: var(--info-700);
    --status-info-border: var(--info-200);
    /* ========================================
     BORDERS
     ======================================== */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width-8: 8px;
    --border-color-light: var(--gray-200);
    --border-color-base: var(--gray-300);
    --border-color-dark: var(--gray-400);
    --border-color-primary: var(--primary-500);
    --border-color-blue: var(--blue-500);
    /* ========================================
     LEGACY COMPATIBILITY
     ======================================== */
    --primary-color: var(--primary-500);
    --secondary-color: var(--secondary-700);
    --blue: var(--blue-800);
    --danger-color: var(--danger-500);
    --success-color: var(--success-500);
    --border-radius: var(--border-radius-xl);
    --transition: var(--transition-base);
    --overlay-bg: var(--overlay-medium);
    /* ========================================
     SPACING, TYPOGRAPHY, SHADOWS, ETC.
     ======================================== */
    /* Typography */
    --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-secondary: 'Arial', sans-serif;
    --font-family-mono: 'Courier New', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    /* Spacing */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;
    /* Border Radius */
    --border-radius-none: 0;
    --border-radius-sm: 0.125rem;
    --border-radius-base: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    --border-radius-2xl: 1rem;
    --border-radius-3xl: 1.5rem;
    --border-radius-full: 9999px;
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 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);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* Z-Index */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 1080;
    /* Layout */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-4);
    --header-height: 80px;
    --sidebar-width: 280px;
    /* Component Specific */
    --button-padding-x: var(--spacing-4);
    --button-padding-y: var(--spacing-2);
    --input-padding-x: var(--spacing-3);
    --input-padding-y: var(--spacing-2);
    --card-padding: var(--spacing-6);
    --modal-padding: var(--spacing-6);
}

/* ========================================
   DARK THEME VARIABLES
   ======================================== */
[data-theme="dark"] {
    /* Primary colors remain vibrant in dark mode */
    --primary-500: #fbbf24;
    --primary-600: #f59e0b;
    --primary-700: #d97706;
    /* Invert secondary grays for dark mode */
    --secondary-50: #0f172a;
    --secondary-100: #1e293b;
    --secondary-200: #334155;
    --secondary-300: #475569;
    --secondary-400: #64748b;
    --secondary-500: #94a3b8;
    --secondary-600: #cbd5e1;
    --secondary-700: #e2e8f0;
    --secondary-800: #f1f5f9;
    --secondary-900: #f8fafc;
    /* Invert grays */
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;
    /* Invert neutrals */
    --white: #0f172a;
    --black: #ffffff;
    /* Update theme-specific colors for dark mode */
    --background-color: var(--secondary-50);
    --surface-color: var(--secondary-100);
    --surface-elevated: var(--secondary-200);
    --surface-overlay: rgba(30, 41, 59, 0.95);
    --text-color-primary: var(--secondary-800);
    --text-color-secondary: var(--secondary-600);
    --text-color-muted: var(--secondary-400);
    --text-color-disabled: var(--secondary-300);
    --text-on-primary: var(--secondary-50);
    --text-on-secondary: var(--secondary-50);
    --text-on-surface: var(--secondary-800);
    --text-on-background: var(--secondary-800);
    /* Update component colors for dark mode */
    --card-bg: var(--secondary-100);
    --card-border: var(--secondary-200);
    --input-bg: var(--secondary-100);
    --input-border: var(--secondary-300);
    --nav-bg: var(--secondary-100);
    --nav-border: var(--secondary-200);
    /* Adjust overlays for dark mode */
    --overlay-primary: rgba(251, 191, 36, 0.2);
    --overlay-backdrop: rgba(0, 0, 0, 0.8);
    /* Update gradients for dark mode */
    --gradient-subtle: linear-gradient(135deg, var(--secondary-100) 0%, var(--primary-900) 50%, var(--secondary-200) 100%);
    --gradient-hero: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 50%, var(--secondary-300) 100%);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */
@media (max-width: 640px) {
    :root {
        --container-padding: var(--spacing-3);
        --card-padding: var(--spacing-4);
        --modal-padding: var(--spacing-4);
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }
}