/*    Boutique Mate Theme Variables */
:root {
    /* Primary Brand Colors - Boutique Mate Orange */
    --bm-primary: #C47E5A;
    --bm-primary-rgb: 196, 126, 90;
    --bm-primary-hover: #b36d49;
    --bm-primary-light: #d9a989;
    --bm-primary-lighter: #f0ddd2;
    --bm-primary-dark: #a66442;

    --bm-primaryLight4: color-mix(in srgb-linear, var(--bm-primary), white 80%);
    --bm-primaryLight3: color-mix(in srgb-linear, var(--bm-primary), white 60%);
    --bm-primaryLight2: color-mix(in srgb-linear, var(--bm-primary), white 40%);
    --bm-primaryLight1: color-mix(in srgb-linear, var(--bm-primary), white 20%);
    /*--bm-primary: #C47E5A; */
    --bm-primaryDark1: color-mix(in srgb-linear, var(--bm-primary), black 20%);
    --bm-primaryDark2: color-mix(in srgb-linear, var(--bm-primary), black 40%);
    --bm-primaryDark3: color-mix(in srgb-linear, var(--bm-primary), black 60%);
    --bm-primaryDark4: color-mix(in srgb-linear, var(--bm-primary), black 80%);

    /* Secondary Colors */
    --bm-secondary: #666666;
    --bm-secondary-light: #999999;
    --bm-secondary-lighter: #cccccc;
    
    /* Status Colors */
    --bm-success: #21BA45;
    --bm-success-light: color-mix(in srgb-linear, var(--bm-success), white 40%);
    --bm-success-dark: color-mix(in srgb-linear, var(--bm-success), black 40%);
    --bm-success-bg: color-mix(in srgb-linear, var(--bm-success), white 80%);
    
    --bm-warning: #FF7900;
    --bm-warning-light: color-mix(in srgb-linear, var(--bm-warning), white 40%);
    --bm-warning-dark: color-mix(in srgb-linear, var(--bm-warning), black 40%);
    --bm-warning-bg: color-mix(in srgb-linear, var(--bm-warning), white 80%);

    --bm-info: #017FC0;
    --bm-info-light: color-mix(in srgb-linear, var(--bm-info), white 40%);
    --bm-info-dark: color-mix(in srgb-linear, var(--bm-info), black 40%);
    --bm-info-bg: color-mix(in srgb-linear, var(--bm-info), white 80%);
    
    --bm-danger: #D93526;
    --bm-danger-light: color-mix(in srgb-linear, var(--bm-danger), white 40%);
    --bm-danger-dark: color-mix(in srgb-linear, var(--bm-danger), black 40%);
    --bm-danger-bg: color-mix(in srgb-linear, var(--bm-danger), white 80%);
    
    /* Neutral Colors */
    --bm-white: #ffffff;
    --bm-gray-25: #fcfcfc;
    --bm-gray-50: #fafafa;
    --bm-gray-100: #f5f5f5;
    --bm-gray-200: #e5e5e5;
    --bm-gray-300: #d4d4d4;
    --bm-gray-400: #a3a3a3;
    --bm-gray-500: #737373;
    --bm-gray-600: #525252;
    --bm-gray-700: #404040;
    --bm-gray-800: #262626;
    --bm-gray-900: #171717;
    --bm-black: #000000;
    
    /* Text Colors */
    --bm-text-primary: #1a1a1a;
    --bm-text-secondary: #666666;
    --bm-text-muted: #999999;
    --bm-text-inverse: #ffffff;
    
    /* Border Colors */
    --bm-border: #e0e0e0;
    --bm-border-light: #e0e0e0;
    --bm-border-medium: #cccccc;
    --bm-border-dark: #999999;
    
    /* Shadow Definitions */
    --bm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --bm-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.08);
    --bm-shadow-md: 0 4px 16px 0 rgb(0 0 0 / 0.1);
    --bm-shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.12);
    --bm-shadow-xl: 0 12px 48px 0 rgb(0 0 0 / 0.15);
    
    /* Border Radius */
    --bm-radius-sm: 4px;
    --bm-radius: 8px;
    --bm-radius-md: 8px;
    --bm-radius-lg: 12px;
    --bm-radius-xl: 16px;
    --bm-radius-full: 9999px;
    
    /* Spacing */
    --bm-spacing-xs: 0.25rem;
    --bm-spacing-sm: 0.5rem;
    --bm-spacing-md: 1rem;
    --bm-spacing-lg: 1.5rem;
    --bm-spacing-xl: 2rem;
    --bm-spacing-2xl: 3rem;
    --bm-spacing-3xl: 4rem;
    
    /* Typography */
    --bm-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bm-font-size-xs: 0.75rem;
    --bm-font-size-sm: 0.875rem;
    --bm-font-size-base: 1rem;
    --bm-font-size-lg: 1.125rem;
    --bm-font-size-xl: 1.25rem;
    --bm-font-size-2xl: 1.5rem;
    --bm-font-size-3xl: 1.875rem;
    --bm-font-size-4xl: 2.25rem;
    --bm-font-size-5xl: 3rem;
    
    /* Line Heights */
    --bm-line-height-tight: 1.25;
    --bm-line-height-normal: 1.5;
    --bm-line-height-relaxed: 1.75;
    
    /*    Transitions */
    --bm-transition-fast: 150ms ease;
    --bm-transition-base: 200ms ease;
    --bm-transition-slow: 300ms ease;
    
    /* Z-index Scale */
    --bm-z-dropdown: 1000;
    --bm-z-sticky: 1020;
    --bm-z-fixed: 1030;
    --bm-z-modal-backdrop: 1040;
    --bm-z-modal: 1050;
    --bm-z-popover: 1060;
    --bm-z-tooltip: 1070;
}

/*    Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    :root {
        /*    Dark mode color overrides can be added here */
    }
}