/**
 * Global Styles for BetterCX Widget
 * Uses CSS custom properties for theming
 */

:root {
  /* Default color scheme */
  --bcx-primary: #007bff;
  --bcx-secondary: #6c757d;
  --bcx-background: #ffffff;
  --bcx-text: #212529;
  --bcx-border: #dee2e6;
  --bcx-shadow: rgba(0, 0, 0, 0.1);
  --bcx-success: #28a745;
  --bcx-warning: #ffc107;
  --bcx-error: #dc3545;
  --bcx-info: #17a2b8;

  /* Spacing */
  --bcx-spacing-xs: 0.25rem;
  --bcx-spacing-sm: 0.5rem;
  --bcx-spacing-md: 1rem;
  --bcx-spacing-lg: 1.5rem;
  --bcx-spacing-xl: 2rem;

  /* Border radius */
  --bcx-radius-sm: 0.25rem;
  --bcx-radius-md: 0.5rem;
  --bcx-radius-lg: 0.75rem;
  --bcx-radius-xl: 1rem;

  /* Typography */
  --bcx-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bcx-font-size-xs: 0.75rem;
  --bcx-font-size-sm: 0.875rem;
  --bcx-font-size-md: 1rem;
  --bcx-font-size-lg: 1.125rem;
  --bcx-font-size-xl: 1.25rem;

  /* Transitions */
  --bcx-transition-fast: 0.15s ease-in-out;
  --bcx-transition-normal: 0.3s ease-in-out;
  --bcx-transition-slow: 0.5s ease-in-out;

  /* Z-index layers */
  --bcx-z-dropdown: 1000;
  --bcx-z-sticky: 1020;
  --bcx-z-fixed: 1030;
  --bcx-z-modal-backdrop: 1040;
  --bcx-z-modal: 1050;
  --bcx-z-popover: 1060;
  --bcx-z-tooltip: 1070;
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bcx-background: #1a1a1a;
    --bcx-text: #ffffff;
    --bcx-border: #404040;
    --bcx-shadow: rgba(0, 0, 0, 0.3);
  }
}

/* Reset and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Utility classes */
.bcx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bcx-focus-visible {
  outline: 2px solid var(--bcx-primary);
  outline-offset: 2px;
}

/* Animation keyframes */
@keyframes bcx-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bcx-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bcx-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes bcx-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Animation utility classes */
.bcx-animate-fade-in {
  animation: bcx-fade-in var(--bcx-transition-normal);
}

.bcx-animate-slide-up {
  animation: bcx-slide-up var(--bcx-transition-normal);
}

.bcx-animate-pulse {
  animation: bcx-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.bcx-animate-spin {
  animation: bcx-spin 1s linear infinite;
}