/**
 * Safari Booking - CSS Variables
 * Design tokens for the entire plugin
 * 
 * Modern Light UI with brand accent #F8CD48
 */

:root {
    /* ============================================
       Brand Colors
       ============================================ */
    --color-accent: #F8CD48;
    --color-accent-hover: #EDBE2B;
    --color-accent-dark: #D4A82E;
    --color-accent-light: rgba(248, 205, 72, 0.12);
    --color-dark: #1F2937;
    
    /* ============================================
       Backgrounds
       ============================================ */
    --color-page-bg: #F9FAFB;
    --color-surface: #FFFFFF;
    --color-light-bg: #F3F4F6;
    --color-subtle-bg: #F9FAFB;
    
    /* Legacy alias for compatibility */
    --color-cream: #FFFFFF;
    
    /* ============================================
       Borders
       ============================================ */
    --color-border: #E5E7EB;
    --color-border-strong: #D1D5DB;
    
    /* ============================================
       Text
       ============================================ */
    --color-text: #1F2937;
    --color-text-secondary: #6B7280;
    --color-text-muted: #9CA3AF;
    --color-text-placeholder: #9CA3AF;
    
    /* Legacy alias */
    --color-warm-gray: #6B7280;
    
    /* ============================================
       Status Colors - Soft/Pastel
       ============================================ */
    --color-success: #059669;
    --color-success-bg: #ECFDF5;
    --color-success-border: #A7F3D0;
    
    --color-warning: #D97706;
    --color-warning-bg: #FFFBEB;
    --color-warning-border: #FDE68A;
    
    --color-error: #DC2626;
    --color-error-bg: #FEF2F2;
    --color-error-border: #FECACA;
    
    --color-info: #2563EB;
    --color-info-bg: #EFF6FF;
    --color-info-border: #BFDBFE;
    
    /* ============================================
       Spacing
       ============================================ */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* ============================================
       Typography
       ============================================ */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 14px;
    --font-size-small: 13px;
    --font-size-tiny: 11px;
    --font-size-large: 16px;
    
    /* ============================================
       Border Radius
       ============================================ */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* ============================================
       Shadows - Minimal for flat design
       ============================================ */
    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-strong: 0 4px 8px rgba(0, 0, 0, 0.08);
    
    /* ============================================
       Transitions
       ============================================ */
    --transition: all 0.15s ease;
    --transition-fast: all 0.1s ease;
    
    /* ============================================
       Sidebar Dimensions
       ============================================ */
    --sidebar-width-expanded: 240px;
    --sidebar-width-collapsed: 68px;
    --sidebar-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Safari-prefixed aliases for global.css compatibility */
:root {
    --safari-accent: var(--color-accent);
    --safari-accent-hover: var(--color-accent-hover);
    --safari-accent-dark: var(--color-accent-dark);
    --safari-accent-light: var(--color-accent-light);
    --safari-dark: var(--color-dark);
    --safari-page-bg: var(--color-page-bg);
    --safari-surface: var(--color-surface);
    --safari-light-bg: var(--color-light-bg);
    --safari-subtle-bg: var(--color-subtle-bg);
    --safari-cream: var(--color-cream);
    --safari-border: var(--color-border);
    --safari-border-strong: var(--color-border-strong);
    --safari-text: var(--color-text);
    --safari-text-secondary: var(--color-text-secondary);
    --safari-text-muted: var(--color-text-muted);
    --safari-warm-gray: var(--color-warm-gray);
    --safari-success: var(--color-success);
    --safari-success-bg: var(--color-success-bg);
    --safari-success-border: var(--color-success-border);
    --safari-warning: var(--color-warning);
    --safari-warning-bg: var(--color-warning-bg);
    --safari-warning-border: var(--color-warning-border);
    --safari-error: var(--color-error);
    --safari-error-bg: var(--color-error-bg);
    --safari-error-border: var(--color-error-border);
    --safari-info: var(--color-info);
    --safari-info-bg: var(--color-info-bg);
    --safari-info-border: var(--color-info-border);
    --safari-spacing-xs: var(--spacing-xs);
    --safari-spacing-sm: var(--spacing-sm);
    --safari-spacing-md: var(--spacing-md);
    --safari-spacing-lg: var(--spacing-lg);
    --safari-spacing-xl: var(--spacing-xl);
    --safari-font-family: var(--font-family);
    --safari-font-size-base: var(--font-size-base);
    --safari-font-size-small: var(--font-size-small);
    --safari-font-size-tiny: var(--font-size-tiny);
    --safari-radius-sm: var(--radius-sm);
    --safari-radius-md: var(--radius-md);
    --safari-radius-lg: var(--radius-lg);
    --safari-shadow-subtle: var(--shadow-subtle);
    --safari-shadow-medium: var(--shadow-medium);
    --safari-shadow-strong: var(--shadow-strong);
    --safari-transition: var(--transition);
}