/**
 * Extended ERP Theme Variables
 * 
 * This file contains all CSS custom properties (variables) used throughout
 * the Extended ERP website. Import this file before other stylesheets to
 * ensure variables are available globally.
 * 
 * Usage: var(--eerp-orange)
 */

:root {
    /* ===== Brand Colors ===== */
    
    /* Primary Orange */
    --eerp-orange: #f5901c;
    --eerp-orange-hover: #e58218;
    --eerp-orange-dark: #d67516;
    --eerp-orange-light: #f7a541;
    --eerp-orange-bg: rgba(245, 144, 28, 0.1);
    
    /* Secondary Blues */
    --eerp-blue-dark: #12141d;
    --eerp-blue-medium: #2a2e43;
    --eerp-blue-light: #3a4059;
    --eerp-blue-lighter: #4a5169;
    --eerp-blue-bg: rgba(18, 20, 29, 0.05);
    
    /* Grays */
    --eerp-gray-dark: #495057;
    --eerp-gray: #6c757d;
    --eerp-gray-light: #e9ecef;
    --eerp-gray-lighter: #f8f9fa;
    
    /* Status Colors */
    --eerp-success: #28a745;
    --eerp-danger: #dc3545;
    --eerp-warning: #ffc107;
    --eerp-info: #17a2b8;
    
    /* ===== Typography ===== */
    --eerp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --eerp-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    
    /* Font Sizes */
    --eerp-font-size-base: 1rem;
    --eerp-font-size-xs: 0.75rem;
    --eerp-font-size-sm: 0.875rem;
    --eerp-font-size-lg: 1.125rem;
    --eerp-font-size-xl: 1.25rem;
    
    /* Font Weights */
    --eerp-font-weight-normal: 400;
    --eerp-font-weight-medium: 500;
    --eerp-font-weight-semibold: 600;
    --eerp-font-weight-bold: 700;
    
    /* Line Heights */
    --eerp-line-height-base: 1.5;
    --eerp-line-height-tight: 1.25;
    --eerp-line-height-relaxed: 1.75;
    
    /* ===== Spacing ===== */
    --eerp-spacing-xs: 0.25rem;  /* 4px */
    --eerp-spacing-sm: 0.5rem;   /* 8px */
    --eerp-spacing-md: 1rem;     /* 16px */
    --eerp-spacing-lg: 1.5rem;   /* 24px */
    --eerp-spacing-xl: 2rem;     /* 32px */
    --eerp-spacing-xxl: 3rem;    /* 48px */
    
    /* ===== Borders ===== */
    --eerp-border-width: 1px;
    --eerp-border-color: var(--eerp-gray-light);
    --eerp-border-radius-sm: 4px;
    --eerp-border-radius: 8px;
    --eerp-border-radius-lg: 12px;
    --eerp-border-radius-xl: 16px;
    --eerp-border-radius-pill: 50rem;
    
    /* ===== Shadows ===== */
    --eerp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --eerp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --eerp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --eerp-shadow-orange: 0 0.5rem 1rem rgba(245, 144, 28, 0.25);
    --eerp-shadow-blue: 0 0.5rem 1rem rgba(18, 20, 29, 0.25);
    
    /* ===== Transitions ===== */
    --eerp-transition-base: all 0.3s ease;
    --eerp-transition-fast: all 0.15s ease;
    --eerp-transition-slow: all 0.5s ease;
    
    /* ===== Z-Index Scale ===== */
    --eerp-zindex-dropdown: 1000;
    --eerp-zindex-sticky: 1020;
    --eerp-zindex-fixed: 1030;
    --eerp-zindex-modal-backdrop: 1040;
    --eerp-zindex-modal: 1050;
    --eerp-zindex-popover: 1060;
    --eerp-zindex-tooltip: 1070;
    
    /* ===== Gradients ===== */
    --eerp-gradient-primary: linear-gradient(135deg, var(--eerp-blue-dark) 0%, var(--eerp-blue-medium) 100%);
    --eerp-gradient-orange: linear-gradient(135deg, var(--eerp-orange) 0%, var(--eerp-orange-dark) 100%);
    --eerp-gradient-light: linear-gradient(135deg, #ffffff 0%, var(--eerp-gray-lighter) 100%);
}

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

/* Utility classes using variables */
.text-orange { color: var(--eerp-orange) !important; }
.text-blue-dark { color: var(--eerp-blue-dark) !important; }
.bg-orange { background-color: var(--eerp-orange) !important; }
.bg-blue-dark { background-color: var(--eerp-blue-dark) !important; }
.bg-gradient-primary { background: var(--eerp-gradient-primary) !important; }
.border-orange { border-color: var(--eerp-orange) !important; }