:root {
    /* Colors */
    --primary-color: #9c1b96;
    --header-primary-color: #a628aa;  /* Added from header.css */
    --secondary-color: #95a5a6;
    --danger-color: #e74c3c;
    --success-color: #2ecc71;
    --warning-color: #f1c40f;
    --info-color: #3498db;
    
    /* Background Colors */
    --bg-color: #f5f6fa;
    --bg-white: #ffffff;
    --color-background: #ffffff;
    --color-header-background: #f8f9fa;
    --color-hover-background: #f5f5f5;
    --header-hover-bg: rgba(255, 255, 255, 0.1);  /* Added from header.css */
    
    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-light: #ffffff;
    --text-dark: #2c3e50;
    --color-text-light: #ffffff;
    --color-text-dark: #333333;
    
    /* Border Colors */
    --border-color: #dddddd;
    --color-border: #e0e0e0;
    --focus-border-color: #3498db;
    --error-border-color: #e74c3c;
    --success-border-color: #2ecc71;
    --scanner-border-color: #ccc;
    
    /* Shadows */
    --card-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --hover-shadow: 0 4px 8px rgba(0,0,0,0.2);
    --box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    --focus-box-shadow: rgba(52, 152, 219, 0.2);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border Radius */
    --border-radius: 4px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 12px;
    
    /* Font Sizes */
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    
    /* Form Elements */
    --input-padding: 0.75rem;
    --input-border: 1px solid var(--border-color);
    --input-focus-color: #1f8dd6;
    --input-focus-shadow: 0 0 0 2px rgba(31, 141, 214, 0.2);
    --btn-min-width: 120px;
    --checkbox-size: 1.25rem;
    
    /* Colors for buttons */
    --color-primary: var(--primary-color);
    --color-success: var(--success-color);
    --color-warning: var(--warning-color);
    --color-error: var(--danger-color);
    
    /* Button Colors */
    --btn-primary-bg: #007bff;
    --btn-primary-hover-bg: #0056b3;
    
    /* Link Colors */
    --link-color: #333;
    --link-hover-color: #666;
    
    /* Image Container Styles */
    --image-border-color: #ddd;
    --image-padding: 10px;
    --image-container-radius: 4px;
    --thumbnail-height: 100px;
    --image-grid-min-width: 150px;
    --image-grid-gap: 10px;
    --image-caption-size: 0.9em;
    --image-caption-margin: 5px;
    
    /* Grid Layout */
    --grid-gap-mobile: 10px;
    --grid-gap-tablet: 30px;
    --grid-gap-desktop: 40px;
    
    /* Customer specific variables */
    --customer-header-border: 2px solid var(--primary-color);
    --customer-section-bg: #f8f9fa;
    --customer-badge-padding: 5px 10px;
    --customer-badge-font-size: 12px;
    
    /* Social media colors */
    --instagram-color: #e1306c;
    --facebook-color: #3b5998;
    --instagram-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    
    /* Table specific colors */
    --table-stripe-bg: #f3f3f3;
    --table-hover-bg: #f5f5f5;
    
    /* Pagination colors */
    --pagination-border: 1px solid var(--primary-color);
    --pagination-active-bg: var(--primary-color);
    --pagination-disabled-color: #6c757d;

    /* Table Spacing */
    --table-cell-padding: 0.5rem 0.75rem;
    --table-cell-padding-compact: 0.4rem 0.6rem;
    
    /* Icon Buttons */
    --icon-button-size: 32px;
    --icon-size: 14px;

    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-headings: var(--font-family-base);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --line-height-base: 1.5;
    --line-height-headings: 1.2;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    
    /* Heading Sizes */
    --h1-size: var(--font-size-3xl);
    --h2-size: var(--font-size-2xl);
    --h3-size: var(--font-size-xl);
    --h4-size: var(--font-size-lg);
    --h5-size: var(--font-size-md);
    --h6-size: var(--font-size-sm);

    /* Text Utilities */
    --text-muted: var(--text-secondary);
    --text-small: var(--font-size-sm);
    --text-xs: var(--font-size-xs);
}