:root {
    /* Colors */
    --primary-color: #fb7b04;
    --secondary-color: #2c1602;
    --accent-color: #8b5cf6;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    --light-color: #f8f9fa;
    --dark-color: #1f2937;
    
    /* Grays */
    --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;
    
    /* Fonts */
    --primary-font: 'Inter', sans-serif;
    --secondary-font: 'Poppins', sans-serif;
    --heading-font: 'Poppins', sans-serif;
    
    /* Button Styles */
    --button-bg-color: #3b82f6;
    --button-text-color: #ffffff;
    --button-hover-bg: #2563eb;
    
    /* Background Colors */
    --sidebar-bg: #1f2937;
    --header-bg: #ffffff;
    
    /* Layout */
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;
    --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --transition: all 0.2s ease;
}

/* Apply fonts to body and headings */
body {
    font-family: var(--primary-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
}

/* Customer-specific styles */
.customer-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
}

.customer-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.1);
    border-color: var(--primary-color);
}

.customer-btn-primary {
    background: var(--button-bg-color);
    color: var(--button-text-color);
    transition: var(--transition);
}

.customer-btn-primary:hover {
    background: var(--button-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-color), 0.4);
}

/* Additional customer-specific color classes */
.customer-text-primary {
    color: var(--primary-color);
}

.customer-text-primary-hover:hover {
    color: var(--secondary-color);
}

.customer-bg-primary {
    background-color: var(--primary-color);
}

.customer-bg-primary-hover:hover {
    background-color: var(--secondary-color);
}

.customer-bg-primary-light {
    background-color: rgba(var(--primary-color), 0.1);
}

.customer-border-primary {
    border-color: var(--primary-color);
}

.customer-border-primary-light {
    border-color: rgba(var(--primary-color), 0.3);
}

.customer-focus-ring:focus {
    --tw-ring-color: var(--primary-color);
}

/* Replace common purple classes with configurable colors */
.text-purple-600 {
    color: var(--primary-color);
}

.text-purple-500 {
    color: var(--primary-color);
}

.text-purple-700 {
    color: var(--secondary-color);
}

.bg-purple-600 {
    background-color: var(--primary-color);
}

.bg-purple-700 {
    background-color: var(--secondary-color);
}

.bg-purple-100 {
    background-color: rgba(var(--primary-color), 0.1);
}

.border-purple-300 {
    border-color: rgba(var(--primary-color), 0.3);
}

.border-purple-500 {
    border-color: var(--primary-color);
}

.focus\:ring-purple-500:focus {
    --tw-ring-color: var(--primary-color);
}

.hover\:text-purple-500:hover {
    color: var(--primary-color);
}

.hover\:text-purple-700:hover {
    color: var(--secondary-color);
}

.hover\:bg-purple-700:hover {
    background-color: var(--secondary-color);
}

.hover\:border-purple-300:hover {
    border-color: rgba(var(--primary-color), 0.3);
}

.group-hover\:text-purple-400.group:hover {
    color: rgba(var(--primary-color), 0.8);
}

.bg-purple-50 {
    background-color: rgba(var(--primary-color), 0.05);
}

.hover\:bg-purple-50:hover {
    background-color: rgba(var(--primary-color), 0.05);
}

.text-purple-800 {
    color: var(--secondary-color);
}

.bg-purple-500 {
    background-color: var(--primary-color);
}

.hover\:bg-purple-600:hover {
    background-color: var(--secondary-color);
}

.focus\:ring-purple-300:focus {
    --tw-ring-color: rgba(var(--primary-color), 0.3);
}

.focus\:border-purple-500:focus {
    border-color: var(--primary-color);
}

/* Quick action card styles (dashboard) */
.customer-quick {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: var(--border-radius);
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.customer-quick:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
}

.customer-quick i {
    color: #ffffff;
}