/**
 * CSS Variables for CB WooCommerce Extensions
 *
 * Centralized design tokens for consistent theming across all plugin components.
 * These variables can be overridden in your theme's CSS for custom styling.
 *
 * @package CB_WooCommerce_Extensions
 * @since   2.1.0
 */

:root {
    /* ========================================
     * COLOR PALETTE
     * ======================================== */

    /* Primary Colors (WooCommerce blue) */
    --rbwce-primary: #007cba;
    --rbwce-primary-dark: #005a87;
    --rbwce-primary-light: #4299e1;
    --rbwce-primary-lighter: #e8f4fd;

    /* Success Colors (Green) */
    --rbwce-success: #28a745;
    --rbwce-success-dark: #22543d;
    --rbwce-success-light: #68d391;
    --rbwce-success-lighter: #c6f6d5;
    --rbwce-success-bg: #d4edda;

    /* Warning Colors (Yellow/Orange) */
    --rbwce-warning: #ffeaa7;
    --rbwce-warning-dark: #856404;
    --rbwce-warning-bg: #fff3cd;

    /* Danger Colors (Red) */
    --rbwce-danger: #dc3545;
    --rbwce-danger-dark: #721c24;
    --rbwce-danger-bg: #f8d7da;

    /* Bundle1000 Colors (Orange) */
    --rbwce-bundle1000: #ff6b35;
    --rbwce-bundle1000-dark: #e55a2e;

    /* Neutral Colors (Grays) */
    --rbwce-gray-900: #2d3748;
    --rbwce-gray-800: #333;
    --rbwce-gray-700: #4a5568;
    --rbwce-gray-600: #495057;
    --rbwce-gray-500: #6c757d;
    --rbwce-gray-400: #cbd5e0;
    --rbwce-gray-300: #dee2e6;
    --rbwce-gray-200: #e2e8f0;
    --rbwce-gray-100: #edf2f7;
    --rbwce-gray-50: #f7fafc;

    /* WordPress Admin Colors */
    --rbwce-wp-admin-bg: #23282d;
    --rbwce-wp-admin-text: #f8f9fa;

    /* Base Colors */
    --rbwce-white: #fff;
    --rbwce-black: #000;
    --rbwce-border: #ddd;
    --rbwce-bg-light: #f8f9fa;
    --rbwce-bg-lighter: #f8fafc;
    --rbwce-bg-lightest: #f9f9f9;

    /* ========================================
     * SPACING
     * ======================================== */

    --rbwce-spacing-xs: 4px;
    --rbwce-spacing-sm: 8px;
    --rbwce-spacing-md: 12px;
    --rbwce-spacing-lg: 16px;
    --rbwce-spacing-xl: 20px;
    --rbwce-spacing-2xl: 24px;
    --rbwce-spacing-3xl: 30px;
    --rbwce-spacing-4xl: 40px;

    /* ========================================
     * TYPOGRAPHY
     * ======================================== */

    --rbwce-font-size-xs: 12px;
    --rbwce-font-size-sm: 14px;
    --rbwce-font-size-base: 15px;
    --rbwce-font-size-md: 16px;
    --rbwce-font-size-lg: 18px;
    --rbwce-font-size-xl: 20px;

    --rbwce-font-weight-normal: 400;
    --rbwce-font-weight-medium: 500;
    --rbwce-font-weight-semibold: 600;
    --rbwce-font-weight-bold: 700;

    --rbwce-line-height-tight: 1.2;
    --rbwce-line-height-normal: 1.5;
    --rbwce-line-height-relaxed: 1.6;

    /* ========================================
     * BORDERS & RADIUS
     * ======================================== */

    --rbwce-border-width: 1px;
    --rbwce-border-width-thick: 2px;
    --rbwce-border-color: var(--rbwce-border);

    --rbwce-radius-sm: 4px;
    --rbwce-radius-md: 6px;
    --rbwce-radius-lg: 8px;
    --rbwce-radius-xl: 12px;
    --rbwce-radius-full: 9999px;

    /* ========================================
     * SHADOWS
     * ======================================== */

    --rbwce-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --rbwce-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --rbwce-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* ========================================
     * TRANSITIONS
     * ======================================== */

    --rbwce-transition-fast: 150ms ease-in-out;
    --rbwce-transition-base: 200ms ease-in-out;
    --rbwce-transition-slow: 300ms ease-in-out;

    /* ========================================
     * Z-INDEX LAYERS
     * ======================================== */

    --rbwce-z-dropdown: 1000;
    --rbwce-z-modal: 1050;
    --rbwce-z-popover: 1060;
    --rbwce-z-tooltip: 1070;

    /* ========================================
     * COMPONENT-SPECIFIC
     * ======================================== */

    /* Color Selector */
    --rbwce-color-selector-size: 40px;
    --rbwce-color-selector-border: 3px;
    --rbwce-color-selector-selected-color: var(--rbwce-primary);

    /* Box Navigator */
    --rbwce-box-indicator-size: 30px;
    --rbwce-box-indicator-active-color: var(--rbwce-primary);
    --rbwce-box-indicator-inactive-color: var(--rbwce-gray-300);

    /* Status Badges */
    --rbwce-badge-padding: 4px 10px;
    --rbwce-badge-font-size: var(--rbwce-font-size-xs);
    --rbwce-badge-radius: var(--rbwce-radius-full);
}

/**
 * Dark mode support (optional)
 * Uncomment and customize these variables if you want to support dark mode
 */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --rbwce-primary: #4299e1;
        --rbwce-gray-900: #f7fafc;
        --rbwce-gray-800: #edf2f7;
        --rbwce-gray-50: #2d3748;
        --rbwce-white: #1a202c;
        --rbwce-black: #fff;
    }
}
*/