/**
 * Community Plugin - Base Stylesheet
 * 
 * Defines CSS custom properties for consistent theming across all modules.
 * All modules should use these variables instead of hardcoding colors.
 */

:root {
  /* ========== PRIMARY BRAND COLORS ========== */
  /* Teal/Green - WordPress Theme Primary Color */
  --community-primary: #5a9c9c;
  --community-primary-hover: #4a8c8c;
  --community-primary-light: #e8f3f3;
  --community-primary-dark: #2e5f5f;
  --community-primary-border: #7db8b8;

  /* ========== PREMIUM/ACCENT COLORS ========== */
  /* Orange - for "EMPFOHLEN" badges and premium highlights */
  --community-premium: #f5a623;
  --community-premium-dark: #b45309;
  --community-premium-light: #fffbf0;
  --community-premium-border: #f5a623;

  /* ========== STATUS COLORS ========== */
  /* Success - for positive confirmations */
  --community-success: #15803d;
  --community-success-light: #f0fdf4;
  --community-success-border: #86efac;
  --community-success-text: #166534;

  /* Error - for error messages and alerts */
  --community-error: #b91c1c;
  --community-error-light: #fef2f2;
  --community-error-border: #fca5a5;
  --community-error-text: #7f1d1d;

  /* Warning - for caution and important notices */
  --community-warning: #f97316;
  --community-warning-light: #fff7ed;
  --community-warning-border: #fed7aa;

  /* Info - for informational notices */
  --community-info: #1a5ccc;
  --community-info-light: #eff6ff;
  --community-info-border: #93c5fd;

  /* ========== PASSWORD STRENGTH LEVELS ========== */
  --community-strength-1: #ef4444;  /* Very weak - red */
  --community-strength-2: #f97316;  /* Weak - orange */
  --community-strength-3: #eab308;  /* Fair - yellow */
  --community-strength-4: #22c55e;  /* Good - light green */
  --community-strength-5: #16a34a;  /* Strong - dark green */

  /* ========== NEUTRAL COLORS ========== */
  /* Grays - for text, backgrounds, and borders */
  --community-white: #fff;
  --community-gray-50: #f9fafb;
  --community-gray-100: #fafafa;
  --community-gray-200: #f3f4f6;
  --community-gray-300: #e5e7eb;
  --community-gray-400: #d1d5db;
  --community-gray-500: #9ca3af;
  --community-gray-600: #6b7280;
  --community-gray-700: #374151;
  --community-gray-800: #1f2937;
  --community-gray-900: #111827;

  /* ========== SPACING SCALE ========== */
  /* Based on 0.25rem (4px) increments */
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* ========== BORDER RADIUS SCALE ========== */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem;   /* 8px */
  --radius-xl: 0.75rem;  /* 12px */
  --radius-full: 99px;   /* Full circle for pills */

  /* ========== TRANSITIONS ========== */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* ========== TYPOGRAPHY ========== */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========== BOX SHADOW ========== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-premium: 0 2px 16px rgba(245, 166, 35, 0.12);
}

/* ========== GLOBAL BASE STYLES ========== */

* {
  box-sizing: border-box;
}

/* ========== SHARED BUTTON STYLES ========== */

.community-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

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

.community-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary Button */
.community-btn--primary {
  background: var(--community-primary);
  color: var(--community-white);
  border-color: var(--community-primary);
}

.community-btn--primary:hover:not(:disabled) {
  background: var(--community-primary-hover);
  border-color: var(--community-primary-hover);
}

/* Secondary Button */
.community-btn--secondary {
  background: var(--community-gray-200);
  color: var(--community-gray-900);
  border-color: var(--community-gray-300);
}

.community-btn--secondary:hover:not(:disabled) {
  background: var(--community-gray-300);
  border-color: var(--community-gray-400);
}

/* Danger Button */
.community-btn--danger {
  background: var(--community-error);
  color: var(--community-white);
  border-color: var(--community-error);
}

.community-btn--danger:hover:not(:disabled) {
  background: var(--community-error-text);
  border-color: var(--community-error-text);
}

/* Success Button */
.community-btn--success {
  background: var(--community-success);
  color: var(--community-white);
  border-color: var(--community-success);
}

.community-btn--success:hover:not(:disabled) {
  background: var(--community-success-text);
  border-color: var(--community-success-text);
}

/* Premium Button */
.community-btn--premium {
    background: var(--community-premium);
    color: var(--community-white);
    border-color: var(--community-premium);
}

.community-btn--premium:hover:not(:disabled) {
    background: var(--community-premium-dark);
    border-color: var(--community-premium-dark);
}
  line-height: 1.5;
}

.community-notice__title {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.community-notice--success {
  background: var(--community-success-light);
  border-color: var(--community-success);
  color: var(--community-success-text);
}

.community-notice--error {
  background: var(--community-error-light);
  border-color: var(--community-error);
  color: var(--community-error-text);
}

.community-notice--warning {
  background: var(--community-warning-light);
  border-color: var(--community-warning);
  color: var(--community-gray-900);
}

.community-notice--info {
  background: var(--community-info-light);
  border-color: var(--community-info);
  color: var(--community-info);
}

/* ========== SHARED BADGE STYLES ========== */

.community-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.75em;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.community-badge--premium {
  background: var(--community-premium);
  color: var(--community-white);
}

.community-badge--success {
  background: var(--community-success);
  color: var(--community-white);
}

.community-badge--warning {
  background: var(--community-warning);
  color: var(--community-white);
}

.community-badge--info {
  background: var(--community-info);
  color: var(--community-white);
}

/* ========== SHARED FORM FIELD STYLES ========== */

.community-form-field {
  margin-bottom: var(--space-4);
}

.community-form-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--community-gray-900);
  font-size: 0.95em;
}

.community-form-field__input,
.community-form-field__textarea,
.community-form-field__select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--community-gray-300);
  border-radius: var(--radius-lg);
  font: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.community-form-field__input:focus,
.community-form-field__textarea:focus,
.community-form-field__select:focus {
  outline: none;
  border-color: var(--community-primary);
  box-shadow: 0 0 0 3px var(--community-primary-light);
}

.community-form-field__input:disabled,
.community-form-field__textarea:disabled,
.community-form-field__select:disabled {
  background: var(--community-gray-100);
  cursor: not-allowed;
}

.community-form-field__textarea {
  resize: vertical;
  min-height: 120px;
}

.community-form-field__hint {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.85em;
  color: var(--community-gray-600);
}

.community-form-field__error {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.85em;
  color: var(--community-error);
  font-weight: var(--font-weight-semibold);
}

/* ========== SECTION HEADERS ========== */

.community-section-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 3px solid;
  font-weight: var(--font-weight-semibold);
  font-size: 1.25em;
  letter-spacing: 0.02em;
}

.community-section-header--teal {
  background: #f0f8f8;
  border-color: var(--community-primary);
  color: var(--community-primary-dark);
}

/* ========== RESPONSIVE HELPERS ========== */

/* Mobile-first responsive breakpoints */
@media (max-width: 640px) {
  .community-btn {
    width: 100%;
  }

  .community-form-field__input,
  .community-form-field__textarea,
  .community-form-field__select {
    font-size: 16px; /* Prevent zoom on mobile */
  }
}