/**
 * ChannelMotive CSS Variables
 * Global CSS custom properties for colors, spacing, and other design tokens
 */

:root {
    /* Primary Colors */
    --cm-primary: #0073aa;
    --cm-primary-hover: #005a87;
    --cm-primary-light: #f0f8ff;
    
    /* Secondary Colors */
    --cm-success: #28a745;
    --cm-danger: #dc3545;
    --cm-warning: #ffc107;
    --cm-info: #17a2b8;
    
    /* Neutral Colors */
    --cm-white: #fff;
    --cm-black: #000;
    --cm-gray-50: #fafafa;
    --cm-gray-100: #f8f9fa;
    --cm-gray-200: #f0f0f1;
    --cm-gray-300: #e0e0e0;
    --cm-gray-400: #dcdcde;
    --cm-gray-500: #c0c0c0;
    --cm-gray-600: #666;
    --cm-gray-700: #50575e;
    --cm-gray-800: #333;
    --cm-gray-900: #1d2327;
    
    /* Text Colors */
    --cm-text-primary: #1d2327;
    --cm-text-secondary: #50575e;
    --cm-text-muted: #666;
    
    /* Border */
    --cm-border-color: #e0e0e0;
    --cm-border-radius: 6px;
    --cm-border-radius-sm: 3px;
    --cm-border-radius-lg: 8px;
    --cm-border-radius-xl: 12px;
    
    /* Spacing */
    --cm-space-xs: 4px;
    --cm-space-sm: 8px;
    --cm-space-md: 12px;
    --cm-space-lg: 16px;
    --cm-space-xl: 24px;
    --cm-space-2xl: 32px;
    --cm-space-3xl: 48px;
    
    /* Typography - Font size variables defined on plugin containers (see below) so em resolves from inherited theme */
    --cm-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    
    /* Shadows */
    --cm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --cm-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    --cm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --cm-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
    
    /* Transitions */
    --cm-transition-fast: 0.15s ease;
    --cm-transition-base: 0.2s ease;
    --cm-transition-slow: 0.3s ease;
    
    /* Z-index */
    --cm-z-drawer: 99999;
    --cm-z-modal: 100000;
    --cm-z-tooltip: 100001;
}

/* Theme font size inheritance - text inherits from theme (em variables resolve from inherited size, not root) */
.cm-container-wrapper,
.cm-container,
.cm-search-form,
.cm-search-form-wrapper,
.cm-confirm-dialog-overlay .cm-confirm-dialog,
#cm-results-sticky-bar,
.cm-drawer {
    font-size: inherit;
    /* Define font size variables here so em resolves relative to inherited theme font, not :root */
    --cm-font-size-xs: 0.786em;
    --cm-font-size-sm: 0.929em;
    --cm-font-size-base: 1em;
    --cm-font-size-md: 1.143em;
    --cm-font-size-lg: 1.286em;
    --cm-font-size-xl: 1.429em;
    --cm-font-size-2xl: 1.714em;
    --cm-font-size-3xl: 2em;
    --cm-font-size-2xs: 0.714em;
    --cm-font-size-plate: 1.679em;
}