/**
 * BookSpace - Central Color System
 * 
 * Professional color system for consistent branding across the entire service.
 * All colors are defined as CSS variables for easy customization per partner.
 * 
 * Usage:
 *   color: var(--color-primary);
 *   background: var(--color-primary);
 *   border-color: var(--color-border);
 */

:root {
  /* ============================================
     BRAND COLORS (Partner customizable)
     ============================================ */
  
  /* Primary Brand Colors */
  /* These will be overridden by brand.css if partner-specific colors are set */
  --color-brand-primary: #d6006a;         /* Main CTA color (pink) */
  --color-brand-primary-dark: #b8005a; /* Darker variant (hover/active) */
  --color-brand-accent: #667eea;           /* Accent color (purple) */
  --color-brand-accent-dark: #764ba2;                           /* Darker accent variant */
  
  /* Legacy compatibility aliases */
  --color-brand: var(--color-brand-primary);
  --brand: var(--color-brand-primary);
  
  /* ============================================
     NEUTRAL COLORS (Text & Backgrounds)
     ============================================ */
  
  /* Text Colors */
  --color-text-primary: #333;        /* Main text color */
  --color-text-secondary: #555;      /* Secondary text (muted) */
  --color-text-tertiary: #666;      /* Tertiary text (lighter) */
  --color-text-quaternary: #999;    /* Quaternary text (lightest) */
  --color-text-inverse: #fff;       /* Text on dark backgrounds */
  
  /* Background Colors */
  --color-bg-primary: #fff;          /* Main background (white) */
  --color-bg-secondary: #fafafa;    /* Secondary background */
  --color-bg-tertiary: #f8f9fa;     /* Tertiary background */
  --color-bg-quaternary: #f6f6f8;   /* Quaternary background */
  --color-bg-soft: #f5f5f7;         /* Soft background */
  --color-bg-gray: #e9ecef;         /* Gray background */
  --color-bg-gray-dark: #e5e5e5;    /* Darker gray background */
  
  /* Border Colors */
  --color-border-light: #eee;       /* Light border */
  --color-border-medium: #ddd;      /* Medium border */
  --color-border-dark: #ccc;        /* Dark border */
  --color-border-gray: #e9ecef;     /* Gray border */
  
  /* Legacy compatibility aliases */
  --color-text: var(--color-text-primary);
  --color-muted: var(--color-text-secondary);
  --color-border: var(--color-border-light);
  --text: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --border: var(--color-border-light);
  
  /* ============================================
     SEMANTIC COLORS (Success, Error, Warning, Info)
     ============================================ */
  
  /* Success Colors */
  --color-success: #10b981;           /* Success color */
  --color-success-dark: #059669;     /* Darker success variant */
  --color-success-bg: #d4edda;       /* Success background */
  --color-success-text: #155724;     /* Success text */
  --color-success-border: #c3e6cb;  /* Success border */
  
  /* Error/Danger Colors */
  --color-error: var(--color-brand-primary);      /* Error color (uses brand primary) */
  --color-error-dark: var(--color-brand-primary-dark); /* Darker error variant */
  --color-error-bg: #f8d7da;         /* Error background */
  --color-error-text: #721c24;      /* Error text */
  --color-error-border: #f5c6cb;    /* Error border */
  
  /* Warning Colors */
  --color-warning: #6c757d;          /* Warning color */
  --color-warning-bg: #fff3cd;      /* Warning background */
  --color-warning-text: #856404;    /* Warning text */
  --color-warning-border: #ffeaa7;  /* Warning border */
  
  /* Info Colors */
  --color-info: var(--color-brand-accent);        /* Info color (uses brand accent) */
  --color-info-bg: #d1ecf1;         /* Info background */
  --color-info-text: #0c5460;       /* Info text */
  --color-info-border: #bee5eb;     /* Info border */
  
  /* ============================================
     INTERACTIVE COLORS (Hover, Active, Focus)
     ============================================ */
  
  /* Primary Interactive */
  --color-primary-hover: var(--color-brand-primary-dark);
  --color-primary-active: var(--color-brand-primary-dark);
  --color-primary-focus: var(--color-brand-primary);
  --color-primary-overlay-light: rgba(214, 0, 106, 0.05);   /* 5% overlay */
  --color-primary-overlay-medium: rgba(214, 0, 106, 0.1);   /* 10% overlay */
  --color-primary-overlay-dark: rgba(214, 0, 106, 0.15);   /* 15% overlay */
  
  /* Accent Interactive */
  --color-accent-hover: var(--color-brand-accent-dark);
  --color-accent-active: var(--color-brand-accent-dark);
  --color-accent-focus: var(--color-brand-accent);
  --color-accent-overlay-light: rgba(102, 126, 234, 0.05);  /* 5% overlay */
  --color-accent-overlay-medium: rgba(102, 126, 234, 0.1);  /* 10% overlay */
  --color-accent-overlay-dark: rgba(102, 126, 234, 0.15);  /* 15% overlay */
  
  /* ============================================
     SHADOW COLORS (Box Shadows)
     ============================================ */
  
  /* Neutral Shadows */
  --shadow-light: rgba(0, 0, 0, 0.06);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.12);
  --shadow-darker: rgba(0, 0, 0, 0.15);
  
  /* Brand Primary Shadows */
  --shadow-brand-light: rgba(214, 0, 106, 0.1);
  --shadow-brand-medium: rgba(214, 0, 106, 0.15);
  --shadow-brand-dark: rgba(214, 0, 106, 0.2);
  --shadow-brand-darker: rgba(214, 0, 106, 0.25);
  --shadow-brand-darkest: rgba(214, 0, 106, 0.3);
  --shadow-brand-hover: rgba(214, 0, 106, 0.4);
  
  /* Brand Accent Shadows */
  --shadow-accent-light: rgba(102, 126, 234, 0.1);
  --shadow-accent-medium: rgba(102, 126, 234, 0.15);
  --shadow-accent-dark: rgba(102, 126, 234, 0.2);
  --shadow-accent-darker: rgba(102, 126, 234, 0.25);
  --shadow-accent-darkest: rgba(102, 126, 234, 0.3);
  --shadow-accent-hover: rgba(102, 126, 234, 0.4);
  
  /* ============================================
     GRADIENT COLORS
     ============================================ */
  
  /* Primary Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-primary-dark));
  --gradient-accent: linear-gradient(135deg, var(--color-brand-accent), var(--color-brand-accent-dark));
  --gradient-primary-45: linear-gradient(45deg, var(--color-brand-primary), var(--color-brand-primary-dark));
  --gradient-accent-45: linear-gradient(45deg, var(--color-brand-accent), var(--color-brand-accent-dark));
  
  /* ============================================
     OVERLAY COLORS (Modal, Dropdown, etc.)
     ============================================ */
  
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-light: var(--color-primary-overlay-light);
  --overlay-medium: var(--color-primary-overlay-medium);
  --overlay-dark-custom: var(--color-primary-overlay-dark);
  
  /* ============================================
     UTILITY COLORS
     ============================================ */
  
  --color-white: #fff;
  --color-black: #000;
  --color-transparent: transparent;
  
  /* White transparent variants */
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-90: rgba(255, 255, 255, 0.9);
  
  /* Black transparent variants */
  --color-black-50: rgba(0, 0, 0, 0.5);
}

/* Button System (Option 1 - Minimalist) */
:root {
  /* Shadows */
  --shadow-button-base: 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-button-active: 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-button-primary: 0 4px 12px rgba(214, 0, 106, 0.25);
  --shadow-button-primary-hover: 0 6px 16px rgba(214, 0, 106, 0.35);

  /* Radii */
  --radius-button: 8px;
  --radius-button-pill: 24px;
  --radius-button-icon: 8px;

  /* Paddings */
  --padding-button-sm: 0.5rem 1rem;    /* 8px 16px */
  --padding-button-md: 0.75rem 1.5rem; /* 12px 24px */
  --padding-button-lg: 1rem 2rem;      /* 16px 32px */
}