/**
 * KITEAI CSS Variables
 * Bootstrap 5.3.0 Compatible
 * 
 * This file contains all CSS custom properties (variables) used throughout the KITEAI theme.
 * These variables follow Bootstrap's naming conventions and can be used to customize the theme.
 */

:root {
    /* ============================================
       Brand Colors
       ============================================ */
    --kiteai-primary: #0074c8;
    --kiteai-primary-hover: #0064ac;
    --kiteai-primary-rgb: 0, 116, 200;
    
    --kiteai-secondary: #425363;
    --kiteai-secondary-rgb: 66, 83, 99;
    
    --kiteai-success: #00d924;
    --kiteai-success-rgb: 0, 217, 36;
    
    --kiteai-warning: #f5a623;
    --kiteai-warning-rgb: 245, 166, 35;
    
    --kiteai-error: #df1b41;
    --kiteai-error-rgb: 223, 27, 65;
    
    --kiteai-info: #17a2b8;
    --kiteai-info-rgb: 23, 162, 184;
    
    /* ============================================
       Neutral Colors
       ============================================ */
    --kiteai-white: #ffffff;
    --kiteai-black: #000000;
    --kiteai-gray-100: #f8f9fa;
    --kiteai-gray-200: #e9ecef;
    --kiteai-gray-300: #dee2e6;
    --kiteai-gray-400: #ced4da;
    --kiteai-gray-500: #adb5bd;
    --kiteai-gray-600: #6c757d;
    --kiteai-gray-700: #495057;
    --kiteai-gray-800: #343a40;
    --kiteai-gray-900: #212529;
    
    /* ============================================
       Semantic Colors
       ============================================ */
    --kiteai-text-color: var(--kiteai-secondary);
    --kiteai-text-muted: var(--kiteai-gray-600);
    --kiteai-text-light: var(--kiteai-gray-500);
    
    --kiteai-body-bg: #fafbfc;
    --kiteai-body-color: var(--kiteai-text-color);
    
    --kiteai-border-color: #e6e8ec;
    --kiteai-border-color-translucent: rgba(0, 0, 0, 0.175);
    
    --kiteai-dark-bg: #222;
    --kiteai-light-gray: #eee;
    
    /* ============================================
       Spacing & Sizing
       ============================================ */
    --kiteai-border-radius: 8px;
    --kiteai-border-radius-sm: 4px;
    --kiteai-border-radius-lg: 12px;
    --kiteai-border-radius-xl: 16px;
    
    --kiteai-border-width: 1px;
    --kiteai-border-width-thick: 2px;
    
    /* ============================================
       Shadows
       ============================================ */
    --kiteai-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --kiteai-box-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --kiteai-box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --kiteai-box-shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.15);
    
    --kiteai-box-shadow-primary: 0 4px 12px rgba(0, 116, 200, 0.3);
    --kiteai-box-shadow-focus: 0 0 0 3px rgba(0, 116, 200, 0.1);
    
    /* ============================================
       Transitions & Animations
       ============================================ */
    --kiteai-transition: all 0.2s ease;
    --kiteai-transition-fast: all 0.15s ease;
    --kiteai-transition-slow: all 0.3s ease;
    
    --kiteai-transition-transform: transform 0.2s ease;
    --kiteai-transition-opacity: opacity 0.2s ease;
    --kiteai-transition-color: color 0.2s ease;
    
    /* ============================================
       Typography
       ============================================ */
    --kiteai-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --kiteai-font-size-base: 1rem;
    --kiteai-line-height-base: 1.6;
    
    --kiteai-font-weight-light: 300;
    --kiteai-font-weight-normal: 400;
    --kiteai-font-weight-medium: 500;
    --kiteai-font-weight-semibold: 600;
    --kiteai-font-weight-bold: 700;
    
    /* ============================================
       Z-Index Scale
       ============================================ */
    --kiteai-z-dropdown: 1000;
    --kiteai-z-sticky: 1020;
    --kiteai-z-fixed: 1030;
    --kiteai-z-modal-backdrop: 1040;
    --kiteai-z-modal: 1050;
    --kiteai-z-popover: 1060;
    --kiteai-z-tooltip: 1070;
    --kiteai-z-toast: 1080;
    
    /* ============================================
       Component Specific
       ============================================ */
    --kiteai-navbar-height: 70px;
    --kiteai-navbar-padding-y: 1rem;
    --kiteai-navbar-padding-x: 0;
    
    --kiteai-card-padding: 1.5rem;
    --kiteai-card-margin-bottom: 1.5rem;
    
    --kiteai-btn-padding-y: 0.75rem;
    --kiteai-btn-padding-x: 1.5rem;
    --kiteai-btn-font-weight: var(--kiteai-font-weight-medium);
    
    --kiteai-form-control-padding-y: 0.875rem;
    --kiteai-form-control-padding-x: 1rem;
    
    --kiteai-alert-padding-y: 1rem;
    --kiteai-alert-padding-x: 1.25rem;
    
    /* ============================================
       Responsive Breakpoints (matching Bootstrap 5.3.0)
       ============================================ */
    --kiteai-breakpoint-xs: 0;
    --kiteai-breakpoint-sm: 576px;
    --kiteai-breakpoint-md: 768px;
    --kiteai-breakpoint-lg: 992px;
    --kiteai-breakpoint-xl: 1200px;
    --kiteai-breakpoint-xxl: 1400px;
}

/* ============================================
   Dark Mode Variables (for future implementation)
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --kiteai-body-bg: #1a1a1a;
        --kiteai-body-color: #f8f9fa;
        --kiteai-text-color: #e9ecef;
        --kiteai-text-muted: #adb5bd;
        --kiteai-border-color: #495057;
        --kiteai-border-color-translucent: rgba(255, 255, 255, 0.175);
    }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --kiteai-border-width: 2px;
        --kiteai-border-width-thick: 3px;
        --kiteai-box-shadow-focus: 0 0 0 4px rgba(0, 116, 200, 0.3);
    }
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --kiteai-transition: none;
        --kiteai-transition-fast: none;
        --kiteai-transition-slow: none;
        --kiteai-transition-transform: none;
        --kiteai-transition-opacity: none;
        --kiteai-transition-color: none;
    }
}