/**
 * Car Wash Booking - Color System
 * CSS Custom Properties for dynamic color customization
 * 
 * This file defines the default color palette using CSS variables.
 * Colors can be overridden via inline styles from shortcode attributes.
 */

/* ========================================
   COLOR SYSTEM - CSS CUSTOM PROPERTIES
   ======================================== */

:root {
    /* Primary Colors */
    --cwb-primary-color: #2271b1;
    --cwb-primary-dark: #135e96;
    --cwb-primary-light: #4a9eff;

    /* Accent Colors */
    --cwb-accent-color: #00a32a;
    --cwb-accent-dark: #008a20;
    --cwb-accent-light: #00d084;

    /* Text Colors */
    --cwb-text-primary: #1d2327;
    --cwb-text-secondary: #666666;
    --cwb-text-muted: #999999;
    --cwb-text-white: #ffffff;

    /* Background Colors */
    --cwb-bg-primary: #ffffff;
    --cwb-bg-secondary: #f5f5f5;
    --cwb-bg-tertiary: #e0e0e0;
    --cwb-bg-dark: #1a1a1a;

    /* Border Colors */
    --cwb-border-color: #e0e0e0;
    --cwb-border-light: #f0f0f0;
    --cwb-border-dark: #3a3a3a;

    /* Status Colors */
    --cwb-success-color: #00a32a;
    --cwb-error-color: #d63638;
    --cwb-warning-color: #f0b849;
    --cwb-info-color: #2271b1;

    /* Semantic Colors */
    --cwb-hover-bg: #f0f6fc;
    --cwb-selected-bg: #e0f0ff;
    --cwb-disabled-bg: #f5f5f5;
    --cwb-disabled-text: #999999;

    /* Shadow Colors */
    --cwb-shadow-sm: rgba(0, 0, 0, 0.08);
    --cwb-shadow-md: rgba(0, 0, 0, 0.12);
    --cwb-shadow-lg: rgba(0, 0, 0, 0.2);
    --cwb-shadow-primary: rgba(34, 113, 177, 0.2);
    --cwb-shadow-accent: rgba(0, 163, 42, 0.4);
}

/* ========================================
   DARK THEME COLOR OVERRIDES
   ======================================== */

.cwb-theme-dark {
    --cwb-primary-color: #4a9eff;
    --cwb-primary-dark: #2271b1;
    --cwb-primary-light: #6ab0ff;

    --cwb-text-primary: #ffffff;
    --cwb-text-secondary: #b0b0b0;
    --cwb-text-muted: #888888;

    --cwb-bg-primary: #1a1a1a;
    --cwb-bg-secondary: #2a2a2a;
    --cwb-bg-tertiary: #3a3a3a;

    --cwb-border-color: #3a3a3a;
    --cwb-border-light: #2a2a2a;
    --cwb-border-dark: #4a4a4a;

    --cwb-hover-bg: #2a3a4a;
    --cwb-selected-bg: #1a3a5a;
    --cwb-disabled-bg: #2a2a2a;

    --cwb-shadow-sm: rgba(0, 0, 0, 0.3);
    --cwb-shadow-md: rgba(0, 0, 0, 0.5);
    --cwb-shadow-lg: rgba(0, 0, 0, 0.7);
    --cwb-shadow-primary: rgba(74, 158, 255, 0.3);
}

/* ========================================
   UTILITY CLASSES FOR COLOR VARIATIONS
   ======================================== */

/* Generate lighter/darker shades automatically */
.cwb-booking-form {
    /* These are calculated from the primary color */
    --cwb-primary-hover: color-mix(in srgb, var(--cwb-primary-color) 80%, black);
    --cwb-primary-active: color-mix(in srgb, var(--cwb-primary-color) 70%, black);
    --cwb-primary-tint: color-mix(in srgb, var(--cwb-primary-color) 10%, white);

    /* Calculated from accent color */
    --cwb-accent-hover: color-mix(in srgb, var(--cwb-accent-color) 80%, black);
    --cwb-accent-tint: color-mix(in srgb, var(--cwb-accent-color) 10%, white);
}

/* Fallback for browsers that don't support color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
    .cwb-booking-form {
        --cwb-primary-hover: var(--cwb-primary-dark);
        --cwb-primary-active: var(--cwb-primary-dark);
        --cwb-primary-tint: var(--cwb-primary-light);
        --cwb-accent-hover: var(--cwb-accent-dark);
        --cwb-accent-tint: var(--cwb-accent-light);
    }
}

/* ========================================
   GRADIENT UTILITIES
   ======================================== */

.cwb-gradient-primary {
    background: linear-gradient(135deg, var(--cwb-primary-color) 0%, var(--cwb-primary-dark) 100%);
}

.cwb-gradient-accent {
    background: linear-gradient(135deg, var(--cwb-accent-color) 0%, var(--cwb-accent-dark) 100%);
}

/* ========================================
   ACCESSIBILITY - HIGH CONTRAST MODE
   ======================================== */

.cwb-high-contrast {
    --cwb-primary-color: #0066cc;
    --cwb-accent-color: #00aa00;
    --cwb-text-primary: #000000;
    --cwb-text-secondary: #333333;
    --cwb-bg-primary: #ffffff;
    --cwb-border-color: #000000;
}

.cwb-high-contrast.cwb-theme-dark {
    --cwb-primary-color: #66b3ff;
    --cwb-accent-color: #00ff00;
    --cwb-text-primary: #ffffff;
    --cwb-text-secondary: #cccccc;
    --cwb-bg-primary: #000000;
    --cwb-border-color: #ffffff;
}