/**
 * McLightning Support - Official Branding CSS
 * Matches mobile app theme exactly
 * Color Scheme: Patriotic Red, White, Blue
 */

:root {
  /* LIGHT MODE - From lib/theme.ts */
  --mclightning-primary: #DC143C;
  --mclightning-primary-variant: #A01030;
  --mclightning-primary-light: #E85A63;
  --mclightning-primary-dark: #8B0A1A;
  --mclightning-primary-surface: #FDE8EB;
  --mclightning-on-primary: #FFFFFF;

  --mclightning-gray-50: #F8FAFB;
  --mclightning-gray-100: #F2F4F7;
  --mclightning-gray-200: #E5E9ED;
  --mclightning-gray-300: #D0D7DE;
  --mclightning-gray-400: #AEBAC6;
  --mclightning-gray-500: #8A99A8;
  --mclightning-gray-600: #647484;
  --mclightning-gray-700: #445569;
  --mclightning-gray-800: #2E3A47;
  --mclightning-gray-900: #1A2332;

  --mclightning-surface: #FFFFFF;
  --mclightning-surface-variant: #F8FAFB;
  --mclightning-surface-hover: #F2F4F7;
  --mclightning-surface-elevated: #FFFFFF;
  --mclightning-background: #F8FAFB;
  --mclightning-background-secondary: #F2F4F7;

  --mclightning-text: #1A2332;
  --mclightning-text-secondary: #647484;
  --mclightning-text-tertiary: #8A99A8;
  --mclightning-text-disabled: #AEBAC6;
  --mclightning-text-inverse: #FFFFFF;

  --mclightning-border: #E5E9ED;
  --mclightning-outline: #E5E9ED;
  --mclightning-divider: #E5E9ED;

  --mclightning-error: #DC143C;
  --mclightning-error-surface: #FDE8EB;
  --mclightning-on-error: #FFFFFF;

  --mclightning-success: #1E90FF;
  --mclightning-success-surface: #E8F3FF;
  --mclightning-on-success: #FFFFFF;

  --mclightning-warning: #FF6B35;
  --mclightning-warning-surface: #FFE8DC;
  --mclightning-on-warning: #FFFFFF;

  --mclightning-info: #0047AB;
  --mclightning-info-surface: #E0ECFF;
  --mclightning-on-info: #FFFFFF;

  --mclightning-status-new: #0047AB;
  --mclightning-status-open: #1E90FF;
  --mclightning-status-in-progress: #FF6B35;
  --mclightning-status-waiting: #FFA500;
  --mclightning-status-resolved: #1E90FF;
  --mclightning-status-closed: #666666;

  --mclightning-priority-low: #999999;
  --mclightning-priority-normal: #0047AB;
  --mclightning-priority-high: #FF6B35;
  --mclightning-priority-urgent: #DC143C;

  --mclightning-accent-1: #0047AB;
  --mclightning-accent-2: #DC143C;
  --mclightning-accent-3: #1E90FF;
  --mclightning-accent-4: #FF6B35;

  --mclightning-spacing-xs: 4px;
  --mclightning-spacing-sm: 8px;
  --mclightning-spacing-md: 12px;
  --mclightning-spacing-base: 16px;
  --mclightning-spacing-lg: 20px;
  --mclightning-spacing-xl: 24px;
  --mclightning-spacing-xxl: 32px;
  --mclightning-spacing-xxxl: 48px;

  --mclightning-radius-xs: 4px;
  --mclightning-radius-sm: 6px;
  --mclightning-radius-md: 8px;
  --mclightning-radius-lg: 12px;
  --mclightning-radius-xl: 16px;
  --mclightning-radius-xxl: 24px;
  --mclightning-radius-full: 9999px;

  --mclightning-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mclightning-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* DARK MODE - From lib/theme.ts */
[data-theme="dark"], .mclightning-dark {
  --mclightning-primary: #FF4757;
  --mclightning-primary-variant: #E63946;
  --mclightning-primary-light: #FF6B7A;
  --mclightning-primary-dark: #D63031;
  --mclightning-primary-surface: #2D1215;
  --mclightning-on-primary: #000000;

  --mclightning-surface: #1A1D23;
  --mclightning-background: #0F1115;
  --mclightning-text: #E9EDF3;
  --mclightning-border: #3D4450;
}

/* Base */
.mclightning-portal,
.mclightning-admin-dashboard,
.mclightning-chat-widget,
.mclightning-kb {
  font-family: var(--mclightning-font-family);
  color: var(--mclightning-text);
  background-color: var(--mclightning-background);
}

.mclightning-card,
.dashboard-card,
.stat-box,
.ticket-item {
  background-color: var(--mclightning-surface);
  border: 1px solid var(--mclightning-border);
  border-radius: 12px;
  box-shadow: var(--mclightning-shadow-md);
}