/**
 * HTMembership CSS Variables
 * Shared design tokens for consistent styling
 *
 * @package HTMembership
 * @since 2.1.0
 */

:root {
    /* ============================================
       COLOR PALETTE
       ============================================ */
    
    /* Primary Colors */
    --htm-primary: #2271b1;
    --htm-primary-hover: #135e96;
    --htm-primary-light: #72aee6;
    --htm-primary-bg: #f0f6fc;
    
    /* Secondary Colors */
    --htm-secondary: #50575e;
    --htm-secondary-hover: #32373c;
    --htm-secondary-light: #a7aaad;
    
    /* Status Colors - WordPress Default */
    --htm-success: #00a32a;
    --htm-success-hover: #008a20;
    --htm-success-light: #edfaef;
    --htm-success-dark: #007017;
    
    --htm-warning: #dba617;
    --htm-warning-hover: #c29d0b;
    --htm-warning-light: #fcf9e8;
    --htm-warning-dark: #996800;
    
    --htm-danger: #d63638;
    --htm-danger-hover: #b32d2e;
    --htm-danger-light: #fcf0f1;
    --htm-danger-dark: #8a2424;
    
    --htm-info: #2271b1;
    --htm-info-hover: #135e96;
    --htm-info-light: #f0f6fc;
    --htm-info-dark: #0a4b78;
    
    /* Neutral Colors - WordPress Admin */
    --htm-gray-50: #f6f7f7;
    --htm-gray-100: #f0f0f1;
    --htm-gray-200: #dcdcde;
    --htm-gray-300: #c3c4c7;
    --htm-gray-400: #a7aaad;
    --htm-gray-500: #8c8f94;
    --htm-gray-600: #646970;
    --htm-gray-700: #50575e;
    --htm-gray-800: #3c434a;
    --htm-gray-900: #2c3338;
    
    /* Text Colors - WordPress Admin */
    --htm-text-primary: #1d2327;
    --htm-text-secondary: #50575e;
    --htm-text-muted: #8c8f94;
    --htm-text-inverse: #ffffff;
    
    /* Background Colors - WordPress Admin */
    --htm-bg-white: #ffffff;
    --htm-bg-light: #f6f7f7;
    --htm-bg-gray: #f0f0f1;
    
    /* Border Colors - WordPress Admin */
    --htm-border: #c3c4c7;
    --htm-border-light: #dcdcde;
    --htm-border-dark: #8c8f94;
    
    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --htm-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --htm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    
    /* Font Sizes */
    --htm-text-xs: 11px;
    --htm-text-sm: 13px;
    --htm-text-base: 14px;
    --htm-text-lg: 16px;
    --htm-text-xl: 18px;
    --htm-text-2xl: 20px;
    --htm-text-3xl: 24px;
    --htm-text-4xl: 28px;
    
    /* Font Weights */
    --htm-font-normal: 400;
    --htm-font-medium: 500;
    --htm-font-semibold: 600;
    --htm-font-bold: 700;
    
    /* Line Heights */
    --htm-leading-tight: 1.25;
    --htm-leading-normal: 1.5;
    --htm-leading-relaxed: 1.75;
    
    /* ============================================
       SPACING
       ============================================ */
    --htm-space-1: 4px;
    --htm-space-2: 8px;
    --htm-space-3: 12px;
    --htm-space-4: 16px;
    --htm-space-5: 20px;
    --htm-space-6: 24px;
    --htm-space-8: 32px;
    --htm-space-10: 40px;
    --htm-space-12: 48px;
    
    /* ============================================
       BORDERS & RADIUS
       ============================================ */
    --htm-radius-sm: 4px;
    --htm-radius: 6px;
    --htm-radius-md: 8px;
    --htm-radius-lg: 12px;
    --htm-radius-xl: 16px;
    --htm-radius-full: 9999px;
    
    /* ============================================
       SHADOWS
       ============================================ */
    --htm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --htm-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --htm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --htm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --htm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    --htm-transition-fast: 0.15s ease;
    --htm-transition: 0.2s ease;
    --htm-transition-slow: 0.3s ease;
    
    /* ============================================
       COMPONENT TOKENS
       Semantic tokens for common UI components
       ============================================ */
    
    /* Compatibility aliases (referenced in existing CSS) */
    --htm-foreground: var(--htm-text-primary);
    --htm-muted-foreground: var(--htm-text-muted);
    
    /* Blue shades (widely used, not in palette) - WordPress Admin Blue */
    --htm-blue: #2271b1;
    --htm-blue-hover: #135e96;
    --htm-blue-light: #60a5fa;
    --htm-blue-dark: #1e40af;
    
    /* Links */
    --htm-link-color: var(--htm-primary);
    --htm-link-hover: var(--htm-primary-hover);
    --htm-link-visited: #6b21a8;
    
    /* Inputs & Forms */
    --htm-input-bg: var(--htm-bg-white);
    --htm-input-border: var(--htm-border);
    --htm-input-border-hover: var(--htm-border-dark);
    --htm-input-border-focus: var(--htm-primary);
    --htm-input-text: var(--htm-text-primary);
    --htm-input-placeholder: var(--htm-text-muted);
    
    /* Cards & Panels */
    --htm-card-bg: var(--htm-bg-white);
    --htm-card-border: var(--htm-border);
    --htm-card-shadow: var(--htm-shadow-sm);
    
    /* Buttons */
    --htm-button-primary-bg: var(--htm-primary);
    --htm-button-primary-hover: var(--htm-primary-hover);
    --htm-button-primary-text: var(--htm-text-inverse);
    
    /* ============================================
       Z-INDEX
       ============================================ */
    --htm-z-dropdown: 1000;
    --htm-z-sticky: 1020;
    --htm-z-fixed: 1030;
    --htm-z-modal-backdrop: 1040;
    --htm-z-modal: 1050;
    --htm-z-popover: 1060;
    --htm-z-tooltip: 1070;
}

/* ============================================
   DARK MODE SUPPORT
   Automatically applies when user prefers dark color scheme
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Primary Colors - adjusted for dark mode */
        --htm-primary: #72aee6;
        --htm-primary-hover: #9ec2e6;
        --htm-primary-light: var(--htm-primary);
        --htm-primary-bg: #1a2e3e;
        
        /* Secondary Colors */
        --htm-secondary: var(--htm-gray-400);
        --htm-secondary-hover: var(--htm-gray-300);
        --htm-secondary-light: var(--htm-gray-600);
        
        /* Status Colors - brighter for dark backgrounds */
        --htm-success: #34d399;
        --htm-success-hover: #6ee7b7;
        --htm-success-light: #064e3b;
        --htm-success-dark: var(--htm-success-light);
        
        --htm-warning: #fbbf24;
        --htm-warning-hover: #fcd34d;
        --htm-warning-light: #451a03;
        --htm-warning-dark: var(--htm-warning-light);
        
        --htm-danger: #f87171;
        --htm-danger-hover: #fca5a5;
        --htm-danger-light: #450a0a;
        --htm-danger-dark: var(--htm-danger-light);
        
        --htm-info: #38bdf8;
        --htm-info-hover: #7dd3fc;
        --htm-info-light: var(--htm-info-dark);
        --htm-info-dark: var(--htm-info-light);
        
        /* Neutral Colors - inverted */
        --htm-gray-50: var(--htm-gray-900);
        --htm-gray-100: var(--htm-gray-800);
        --htm-gray-200: var(--htm-gray-700);
        --htm-gray-300: var(--htm-gray-600);
        --htm-gray-400: var(--htm-gray-500);
        --htm-gray-500: var(--htm-gray-400);
        --htm-gray-600: var(--htm-gray-300);
        --htm-gray-700: var(--htm-gray-200);
        --htm-gray-800: var(--htm-gray-100);
        --htm-gray-900: var(--htm-gray-50);
        
        /* Text Colors */
        --htm-text-primary: var(--htm-bg-gray);
        --htm-text-secondary: #94a3b8;
        --htm-text-muted: var(--htm-text-secondary);
        --htm-text-inverse: var(--htm-text-primary);
        
        /* Background Colors */
        --htm-bg-white: #1e1e1e;
        --htm-bg-light: #252525;
        --htm-bg-gray: #2d2d2d;
        
        /* Border Colors */
        --htm-border: #404040;
        --htm-border-light: #333333;
        --htm-border-dark: #525252;
        
        /* Shadows - adjusted for dark mode */
        --htm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --htm-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
        --htm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --htm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
        --htm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
        
        /* Blue shades - adjusted for dark mode */
        --htm-blue: var(--htm-blue-light);
        --htm-blue-hover: #93c5fd;
        --htm-blue-light: var(--htm-blue);
        --htm-blue-dark: #bfdbfe;
        
        /* Component tokens - dark mode */
        --htm-input-bg: #1e1e1e;
        --htm-card-bg: #252525;
        --htm-link-visited: #c084fc;
    }
}

/* Manual dark mode class for WordPress admin */
.htm-dark-mode {
    /* Primary Colors */
    --htm-primary: #72aee6;
    --htm-primary-hover: #9ec2e6;
    --htm-primary-light: var(--htm-primary);
    --htm-primary-bg: #1a2e3e;
    
    /* Text Colors */
    --htm-text-primary: var(--htm-bg-gray);
    --htm-text-secondary: #94a3b8;
    --htm-text-muted: var(--htm-text-secondary);
    --htm-text-inverse: var(--htm-text-primary);
    
    /* Background Colors */
    --htm-bg-white: #1e1e1e;
    --htm-bg-light: #252525;
    --htm-bg-gray: #2d2d2d;
    
    /* Border Colors */
    --htm-border: #404040;
    --htm-border-light: #333333;
    --htm-border-dark: #525252;
    
    /* Blue shades */
    --htm-blue: var(--htm-blue-light);
    --htm-blue-hover: #93c5fd;
    
    /* Component tokens */
    --htm-input-bg: #1e1e1e;
    --htm-card-bg: #252525;
    --htm-link-visited: #c084fc;
}