/**
 * Root CSS Variables for Q-Mak Queue Management System
 * Modern Professional Color Palette
 */

:root {
    /* Primary Colors - Use for headers, navigation, main UI elements */
    --primary-900: #0f172a;      /* Slate 900 - Deep navy for headers */
    --primary-800: #1e293b;      /* Slate 800 - Dark backgrounds */
    --primary-700: #334155;      /* Slate 700 - Secondary text */
    --primary-600: #475569;      /* Slate 600 - Muted text */
    --primary-500: #64748b;      /* Slate 500 - Subtle elements */
    --primary-400: #94a3b8;      /* Slate 400 - Light muted elements */

    /* Accent Colors - Use for CTAs, links, interactive elements */
    --accent-700: #1d4ed8;       /* Blue 700 - Dark CTA */
    --accent-600: #2563eb;       /* Blue 600 - Primary CTA buttons */
    --accent-500: #3b82f6;       /* Blue 500 - Hover/Active states */
    --accent-400: #60a5fa;       /* Blue 400 - Light accents */
    --accent-300: #93c5fd;       /* Blue 300 - Lighter accents */

    /* Success & Status Colors - Use for order states, notifications */
    --success-700: #15803d;      /* Green 700 - Dark success */
    --success-600: #16a34a;      /* Green 600 - Success states */
    --success-500: #22c55e;      /* Green 500 - Success light */
    --success-400: #4ade80;      /* Green 400 - Light success */
    
    --warning-700: #c2410c;      /* Orange 700 - Dark warning */
    --warning-600: #ea580c;      /* Orange 600 - Warning states */
    --warning-500: #f97316;      /* Orange 500 - Warning light */
    --warning-400: #fb923c;      /* Orange 400 - Light warning */
    
    --danger-700: #b91c1c;       /* Red 700 - Dark danger */
    --danger-600: #dc2626;       /* Red 600 - Danger/Error states */
    --danger-500: #ef4444;       /* Red 500 - Danger light */
    --danger-400: #f87171;       /* Red 400 - Light danger */

    /* Info Colors */
    --info-600: #0891b2;        /* Cyan 600 - Info states */
    --info-500: #06b6d4;        /* Cyan 500 - Info light */

    /* Neutral/Background Colors - Use for layouts, cards, borders */
    --gray-50: #f8fafc;          /* Light background */
    --gray-100: #f1f5f9;         /* Card backgrounds */
    --gray-200: #e2e8f0;         /* Borders */
    --gray-300: #cbd5e1;         /* Darker borders */
    --gray-400: #94a3b8;         /* Muted elements */
    --white: #ffffff;            /* Pure white */
    --black: #000000;            /* Pure black */

    /* ========== ENHANCED DESIGN SYSTEM ========== */
    
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    --gradient-accent: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --gradient-warning: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    --gradient-danger: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    --gradient-info: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    
    /* Glassmorphism Effects */
    --glass-light: rgba(255, 255, 255, 0.9);
    --glass-medium: rgba(255, 255, 255, 0.7);
    --glass-dark: rgba(15, 23, 42, 0.8);
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;

    /* Spacing Scale (4px base) */
    --spacing-0: 0;
    --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-7: 1.75rem;        /* 28px */
    --spacing-8: 2rem;           /* 32px */
    --spacing-10: 2.5rem;        /* 40px */
    --spacing-12: 3rem;          /* 48px */
    --spacing-16: 4rem;          /* 64px */
    --spacing-20: 5rem;          /* 80px */
    --spacing-24: 6rem;          /* 96px */

    /* Typography Scale */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-family-display: 'Poppins', 'Inter', sans-serif;
    --font-family-mono: 'Fira Code', 'Consolas', monospace;
    
    --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 */
    --text-6xl: 3.75rem;         /* 60px */
    
    --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;

    /* Shadow Elevation Levels */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    /* Colored shadows for emphasis */
    --shadow-accent: 0 10px 25px -5px rgba(37, 99, 235, 0.3);
    --shadow-success: 0 10px 25px -5px rgba(22, 163, 74, 0.3);
    --shadow-warning: 0 10px 25px -5px rgba(249, 115, 22, 0.3);
    --shadow-danger: 0 10px 25px -5px rgba(220, 38, 38, 0.3);

    /* Motion Design System - Standard Transitions */
    --transition-fast: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-spring: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Duration presets */
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;
    
    /* Easing functions */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Border Radius Presets */
    --radius-none: 0;
    --radius-sm: 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;

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    --z-notification: 80;
    --z-max: 9999;

    /* Touch Target Sizes (for mobile accessibility) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    --touch-target-spacious: 56px;
}

/* Dark mode support (optional - for future enhancement) */
/* @media (prefers-color-scheme: dark) {
    :root {
        Dark mode color overrides can be added here
    }
} */

/* Utility classes for quick color application */
.text-primary-900 { color: var(--primary-900); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-500 { color: var(--primary-500); }

.text-accent-600 { color: var(--accent-600); }
.text-accent-500 { color: var(--accent-500); }

.text-success-600 { color: var(--success-600); }
.text-success-500 { color: var(--success-500); }

.text-warning-600 { color: var(--warning-600); }
.text-warning-500 { color: var(--warning-500); }

.text-danger-600 { color: var(--danger-600); }
.text-danger-500 { color: var(--danger-500); }

.text-info-600 { color: var(--info-600); }
.text-info-500 { color: var(--info-500); }

.bg-primary-900 { background-color: var(--primary-900); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-700 { background-color: var(--primary-700); }

.bg-accent-600 { background-color: var(--accent-600); }
.bg-accent-500 { background-color: var(--accent-500); }

.bg-success-600 { background-color: var(--success-600); }
.bg-warning-600 { background-color: var(--warning-600); }
.bg-danger-600 { background-color: var(--danger-600); }
.bg-info-600 { background-color: var(--info-600); }

.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }

/* Button base styles */
.btn {
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: var(--transition-fast);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--accent-600);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--accent-700);
}

.btn-success {
    background-color: var(--success-600);
    color: var(--white);
}

.btn-success:hover {
    background-color: var(--success-700);
}

.btn-warning {
    background-color: var(--warning-600);
    color: var(--white);
}

.btn-warning:hover {
    background-color: var(--warning-700);
}

.btn-danger {
    background-color: var(--danger-600);
    color: var(--white);
}

.btn-danger:hover {
    background-color: var(--danger-700);
}

/* Card styles */
.card {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
}

/* Alert styles */
.alert {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.alert-success {
    background-color: #dcfce7;
    border-left: 4px solid var(--success-600);
    color: var(--success-700);
}

.alert-warning {
    background-color: #fed7aa;
    border-left: 4px solid var(--warning-600);
    color: var(--warning-700);
}

.alert-danger {
    background-color: #fee2e2;
    border-left: 4px solid var(--danger-600);
    color: var(--danger-700);
}

.alert-info {
    background-color: #cffafe;
    border-left: 4px solid var(--info-600);
    color: #0c7792;
}