/**
 * Shared CSS Variables
 *
 * Base variables for consistent styling across all Test Builder Pro pages
 *
 * @package TestBuilderPro
 * @subpackage Assets\CSS
 * @since 2.2.0
 */

 :root {
    /* Primary color palette */
    --tbp-primary: #3a7bd5;
    --tbp-secondary: #00d2ff;
    --tbp-accent: #3b82f6;
    --tbp-accent-hover: #0056b3;
    
    /* Premium badge colors */
    --tbp-premium-gold: #ffd700;
    --tbp-premium-gold-light: #ffc107;
    
    /* Text colors */
    --tbp-text: #333;
    --tbp-text-light: #666;
    --tbp-text-white: #fff;
    
    /* Background colors */
    --tbp-light-bg: #f9f9fa;
    --tbp-medium-bg: #e9ecef;
    --tbp-white: #ffffff;
    
    /* Borders */
    --tbp-border: #dee2e6;
    --tbp-border-light: #f0f0f0;
    --tbp-border-transparent: rgba(58, 123, 213, 0.15);

    /* Messages */
    --tbp-message-success: #28a745;
    --tbp-message-error: #dc3545;
    --tbp-message-warning: #ffc107;
    --tbp-message-info: #17a2b8;
    
    /* Shadows */
    --tbp-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --tbp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --tbp-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    
    /* Gradients */
    --tbp-gradient-primary: linear-gradient(135deg, var(--tbp-primary), var(--tbp-secondary));
    --tbp-gradient-button: linear-gradient(135deg, var(--tbp-accent), var(--tbp-accent-hover));
    --tbp-gradient-button-hover: linear-gradient(135deg, var(--tbp-accent-hover), var(--tbp-accent));
    --tbp-gradient-premium-badge: linear-gradient(to right, var(--tbp-premium-gold), var(--tbp-premium-gold-light));
    --tbp-gradient-light: linear-gradient(to right, var(--tbp-light-bg), var(--tbp-medium-bg));
    
    /* Spacing */
    --tbp-space-xs: 5px;
    --tbp-space-sm: 10px;
    --tbp-space-md: 20px;
    --tbp-space-lg: 30px;
    --tbp-space-xl: 40px;
    
    /* Typography */
    --tbp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --tbp-line-height: 1.6;
    --tbp-font-size-xs: 0.8rem;
    --tbp-font-size-sm: 0.95rem;
    --tbp-font-size-md: 1rem;
    --tbp-font-size-md-l: 1.1rem;
    --tbp-font-size-lg: 1.3rem;
    --tbp-font-size-xl: 1.8rem;
    --tbp-font-size-xxl: 2.5rem;
    
    /* Rounded corners */
    --tbp-radius-sm: 4px;
    --tbp-radius-md: 8px;
    --tbp-radius-lg: 12px;
    --tbp-radius-full: 50px;
    
    /* Transitions */
    --tbp-transition: all 0.3s ease;
    
    /* Opacity levels */
    --tbp-opacity-light: 0.5;
    --tbp-opacity-medium: 0.7;
    --tbp-opacity-high: 0.9;
    
    /* Z-index layers */
    --tbp-z-normal: 1;
    --tbp-z-sticky: 10;
    --tbp-z-floating: 50;
    --tbp-z-modal: 100;
  }