/* ============================================================================
   HI-FLYER TOKEN CONVERGENCE
   Unifies: --supe-* (admin legacy), --hf-* (consumer), --hifi-* (AI planner)
   New: --hf-* tokens + backwards-compatible --supe-* aliases
   Dark mode: [data-theme='dark'] overrides
   ============================================================================ */
/* CONVERGED CORE TOKENS */
:root {
  /* Brand */
  --hf-primary: #1a3a6b;
  --hf-primary-light: #2b5ea7;
  --hf-primary-dark: #0f2340;
  --hf-accent: #ff6b35;
  --hf-accent-warm: #ff8c5a;
  --hf-accent-glow: rgba(255, 107, 53, 0.12);

  /* Admin blues (merged supe to hf) */
  --hf-admin: #2563eb;
  --hf-admin-hover: #1d4ed8;
  --hf-admin-light: #dbeafe;
  --hf-admin-subtle: #eff6ff;

  /* AI / Hi-fi */
  --hf-ai: #8b5cf6;
  --hf-ai-glow: rgba(139, 92, 246, 0.1);
  --hf-ai-light: #ede9fe;

  /* Surfaces */
  --hf-bg: #f1f5f9;
  --hf-bg-warm: #f8f6f4;
  --hf-surface: #ffffff;
  --hf-surface-elevated: #f8fafc;
  --hf-surface-glass: rgba(255, 255, 255, 0.72);
  --hf-surface-muted: #f1f5f9;

  /* Ink */
  --hf-ink: #0f172a;
  --hf-ink-secondary: #475569;
  --hf-ink-muted: #94a3b8;

  /* Borders */
  --hf-border: #e2e8f0;
  --hf-border-subtle: #f1f5f9;

  /* Semantic */
  --hf-success: #059669;
  --hf-success-light: #d1fae5;
  --hf-warning: #d97706;
  --hf-warning-light: #fef3c7;
  --hf-danger: #dc2626;
  --hf-danger-light: #fee2e2;
  --hf-info: #2563eb;
  --hf-info-light: #dbeafe;

  /* Gradients */
  --hf-gradient-primary: linear-gradient(135deg, #1a3a6b 0%, #2b5ea7 100%);
  --hf-gradient-accent: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
  --hf-gradient-admin: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --hf-gradient-ai: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --hf-gradient-hero: linear-gradient(180deg, #0f2340 0%, #1a3a6b 100%);
  --hf-gradient-dark: linear-gradient(180deg, #0b1120 0%, #101828 100%);

  /* Shadows */
  --hf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --hf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --hf-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --hf-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.1);
  --hf-shadow-glow-admin: 0 0 0 1px rgba(37, 99, 235, 0.2),
    0 8px 24px rgba(37, 99, 235, 0.1);
  --hf-shadow-glow-ai: 0 0 0 1px rgba(139, 92, 246, 0.2),
    0 8px 24px rgba(139, 92, 246, 0.1);

  /* Radii */
  --hf-radius-xs: 6px;
  --hf-radius-sm: 8px;
  --hf-radius-md: 12px;
  --hf-radius-lg: 16px;
  --hf-radius-xl: 20px;
  --hf-radius-2xl: 24px;
  --hf-radius-full: 9999px;

  /* Typography */
  --hf-text-xs: 0.75rem;
  --hf-text-sm: 0.875rem;
  --hf-text-base: 1rem;
  --hf-text-md: 1.125rem;
  --hf-text-lg: 1.5rem;
  --hf-text-xl: 2rem;
  --hf-text-2xl: 2.5rem;
  --hf-text-3xl: 3.5rem;

  /* Leading */
  --hf-leading-tight: 1.2;
  --hf-leading-snug: 1.35;
  --hf-leading-base: 1.5;
  --hf-leading-relaxed: 1.6;

  /* Conversation UI (Hi-fi chat, trip context, support) */
  --hf-conversation-font: 'Inter', 'SF Pro Text', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hf-conversation-body-size: 0.8125rem;
  --hf-conversation-body-leading: 1.5;
  --hf-conversation-title-size: 0.8125rem;
  --hf-conversation-title-leading: 1.35;
  --hf-conversation-composer-size: 0.875rem;
  --hf-conversation-composer-leading: 1.45;
  --hf-conversation-label-size: 0.72rem;
  --hf-conversation-meta-size: 0.68rem;
  --hf-conversation-chip-size: 0.74rem;

  /* Spacing - fluid */
  --hf-space-xs: clamp(4px, 0.3vw, 8px);
  --hf-space-sm: clamp(8px, 0.6vw, 12px);
  --hf-space-md: clamp(12px, 1vw, 20px);
  --hf-space-lg: clamp(18px, 1.5vw, 32px);
  --hf-space-xl: clamp(24px, 2vw, 48px);
  --hf-space-2xl: clamp(36px, 3vw, 64px);

  /* Motion */
  --hf-duration-instant: 80ms;
  --hf-duration-fast: 150ms;
  --hf-duration-normal: 250ms;
  --hf-duration-slow: 400ms;
  --hf-ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
  --hf-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --hf-ease-in: cubic-bezier(0.8, 0, 1, 1);
  --hf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus */
  --hf-focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.32);
  --hf-focus-ring-offset: 2px;

  /* Chart */
  --hf-chart-line: #2563eb;
  --hf-chart-fill: rgba(37, 99, 235, 0.08);
}

/* DARK MODE OVERRIDES */
[data-theme='dark'] {
  --hf-bg: #0b1120;
  --hf-surface: #101828;
  --hf-surface-elevated: #1a2035;
  --hf-surface-glass: rgba(16, 24, 40, 0.82);
  --hf-surface-muted: #1a2035;
  --hf-ink: #f4f7ff;
  --hf-ink-secondary: #9ca3b9;
  --hf-ink-muted: #6b728a;
  --hf-border: #2a3045;
  --hf-border-subtle: #1e2438;
  --hf-admin-light: #1e3048;
  --hf-admin-subtle: #162233;
  --hf-ai-light: #1e1a35;
  --hf-info-light: #1e3048;
  --hf-success-light: #0f2a1e;
  --hf-warning-light: #2a2210;
  --hf-danger-light: #2e1414;
  --hf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --hf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --hf-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --hf-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.5);
  --hf-chart-fill: rgba(37, 99, 235, 0.15);
}

/* BACKWARDS-COMPATIBLE SUPABASE ADMIN TOKENS */
/* Map --supe-* to --hf-* so existing admin CSS keeps working */
:root {
  --supe-primary: var(--hf-admin);
  --supe-primary-hover: var(--hf-admin-hover);
  --supe-primary-light: var(--hf-admin-light);
  --supe-success: var(--hf-success);
  --supe-success-light: var(--hf-success-light);
  --supe-warning: var(--hf-warning);
  --supe-warning-light: var(--hf-warning-light);
  --supe-danger: var(--hf-danger);
  --supe-danger-light: var(--hf-danger-light);
  --supe-gray-50: var(--hf-surface-elevated);
  --supe-gray-100: var(--hf-surface-muted);
  --supe-gray-200: var(--hf-border);
  --supe-gray-300: #d1d5db;
  --supe-gray-400: var(--hf-ink-muted);
  --supe-gray-500: var(--hf-ink-secondary);
  --supe-gray-600: #4b5563;
  --supe-gray-700: var(--hf-ink);
  --supe-gray-800: #1f2937;
  --supe-gray-900: var(--hf-ink);
  --supe-radius-sm: var(--hf-radius-sm);
  --supe-radius-md: var(--hf-radius-md);
  --supe-radius-lg: var(--hf-radius-lg);
  --supe-radius-xl: var(--hf-radius-xl);
  --supe-shadow-sm: var(--hf-shadow-sm);
  --supe-shadow-md: var(--hf-shadow-md);
  --supe-shadow-lg: var(--hf-shadow-lg);
  --supe-shadow-xl: var(--hf-shadow-xl);
  --supe-transition: all var(--hf-duration-fast) var(--hf-ease-out);
}

/* DARK MODE ADMIN OVERRIDES */
/* These fix hardcoded #fff backgrounds in existing .supe-* classes */
[data-theme='dark'] .supe-admin-shell,
[data-theme='dark'] .supe-card,
[data-theme='dark'] .supe-metric,
[data-theme='dark'] .supe-thread-panel,
[data-theme='dark'] .supe-inbox-sidebar,
[data-theme='dark'] .supe-chat-composer,
[data-theme='dark'] .support-chat-panel,
[data-theme='dark'] .support-ticket,
[data-theme='dark'] .supe-message-content,
[data-theme='dark'] .supe-search-group,
[data-theme='dark'] .supe-status-select,
[data-theme='dark'] .supe-chat-log,
[data-theme='dark'] .support-chat-log,
[data-theme='dark'] .supe-detail {
  background: var(--hf-surface);
  border-color: var(--hf-border);
}

[data-theme='dark'] .support-chat-panel {
  --support-chat-ink: #f1f5f9;
  --support-chat-body: #dce4ef;
  --support-chat-muted: #94a3b8;
  --support-chat-line: rgba(148, 163, 184, 0.14);
  --support-chat-shell: #080d14;
  --support-chat-assistant-bg: rgba(26, 36, 54, 0.9);
  --support-chat-user-bg: linear-gradient(145deg, #1b4f94 0%, #0d6578 100%);
  background: var(--support-chat-shell);
  border-color: rgba(100, 116, 139, 0.22);
  color: var(--support-chat-ink);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] .support-chat-head {
  border-bottom-color: var(--support-chat-line);
  background: rgba(8, 12, 20, 0.96);
}

[data-theme='dark'] .support-connection-activity.support-connection-loading {
  background: rgba(217, 119, 6, 0.18);
  color: #fbbf24;
}

[data-theme='dark'] .support-connection-activity.support-connection-error {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}

[data-theme='dark'] .support-connection-activity.support-connection-ok {
  background: rgba(5, 150, 105, 0.18);
  color: #6ee7b7;
}

[data-theme='dark'] .support-chat-head p,
[data-theme='dark'] .support-chat-head button {
  color: var(--support-chat-muted);
}

[data-theme='dark'] .support-chat-head button {
  background: rgba(20, 28, 42, 0.92);
}

[data-theme='dark'] .support-chat-head button:hover {
  background: rgba(30, 42, 62, 0.95);
}

[data-theme='dark'] .support-ticket-delete {
  border-left-color: var(--support-chat-line);
  color: var(--support-chat-muted);
}

[data-theme='dark'] .support-ticket-delete:hover,
[data-theme='dark'] .support-ticket-delete:focus-visible {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}

[data-theme='dark'] .support-chat-log,
[data-theme='dark'] .hf-admin-chat-log.support-chat-log {
  background-color: #0a1018;
  background-image: radial-gradient(
      circle at 14% 8%,
      rgba(37, 99, 235, 0.14),
      transparent 44%
    ),
    radial-gradient(circle at 88% 86%, rgba(20, 184, 166, 0.1), transparent 40%),
    linear-gradient(rgba(148, 163, 184, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.028) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    24px 24px,
    24px 24px;
}

[data-theme='dark'] .support-message-agent .support-message-content,
[data-theme='dark']
  .hf-admin-chat-log
  .support-message-agent
  .support-message-content,
[data-theme='dark']
  .support-assistant-message.assistant
  .support-assistant-bubble
  .support-message-content {
  background: var(--support-chat-assistant-bg);
  border: 1px solid var(--support-chat-line);
  color: #e8eef6;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

[data-theme='dark'] .support-message-user .support-message-content,
[data-theme='dark']
  .hf-admin-chat-log
  .support-message-user
  .support-message-content,
[data-theme='dark']
  .support-assistant-message.user
  .support-assistant-bubble
  .support-message-content {
  background: var(--support-chat-user-bg);
  border: 1px solid rgba(56, 189, 248, 0.24);
  color: #f0f9ff;
  box-shadow: 0 8px 24px rgba(8, 47, 73, 0.28);
}

[data-theme='dark'] .support-message-time,
[data-theme='dark'] .hf-admin-chat-log .support-message-time,
[data-theme='dark'] .hifi-chat-bubble .support-message-time {
  color: var(--support-chat-muted);
}

[data-theme='dark'] .support-message-user .support-message-time,
[data-theme='dark']
  .hf-admin-chat-log
  .support-message-user
  .support-message-time,
[data-theme='dark']
  .hifi-chat-message--user
  .hifi-chat-bubble
  .support-message-time {
  color: rgba(240, 249, 255, 0.72);
}

[data-theme='dark'] .hf-admin-chat-system {
  color: #94a3b8;
}

[data-theme='dark'] .support-assistant {
  background: rgba(14, 20, 32, 0.94);
  border-color: var(--support-chat-line);
}

[data-theme='dark'] .support-assistant h3 {
  color: var(--support-chat-ink);
}

[data-theme='dark'] .support-assistant-chips button,
[data-theme='dark'] .support-assistant-form input,
[data-theme='dark'] .support-reply,
[data-theme='dark'] .support-new-ticket {
  background: rgba(8, 12, 20, 0.96);
  border-color: var(--support-chat-line);
  color: var(--support-chat-ink);
}

[data-theme='dark'] .support-assistant-chips button {
  background: rgba(20, 30, 48, 0.9);
  color: #d8e2ef;
}

[data-theme='dark'] .support-assistant-form input {
  background: rgba(18, 26, 40, 0.94);
}

[data-theme='dark'] .support-reply textarea,
[data-theme='dark'] .support-new-ticket textarea,
[data-theme='dark'] .support-new-ticket input {
  background: rgba(18, 26, 40, 0.94);
  border-color: var(--support-chat-line);
  color: var(--support-chat-ink);
}

[data-theme='dark'] .supe-admin-shell {
  backdrop-filter: none;
  box-shadow: var(--hf-shadow-lg);
}

[data-theme='dark'] .supe-admin-status {
  background: var(--hf-surface-elevated);
  border-color: var(--hf-border);
  color: var(--hf-ink-secondary);
}

[data-theme='dark'] .supe-admin-tabs {
  background: var(--hf-surface-muted);
}

[data-theme='dark'] .supe-admin-tabs button {
  color: var(--hf-ink-muted);
}

[data-theme='dark'] .supe-admin-tabs button.active {
  color: #fff;
}

[data-theme='dark'] .supe-table td {
  border-color: var(--hf-border);
}

[data-theme='dark'] .supe-message-agent .supe-message-content {
  border: 1px solid var(--hf-border);
}

[data-theme='dark'] .supe-message-user .supe-message-content {
  background: var(--hf-admin);
}

[data-theme='dark'] .supe-ticket-preview {
  color: var(--hf-ink-muted);
}

[data-theme='dark'] .supe-pill.supe-pill-channel {
  background: var(--hf-surface-muted);
  color: var(--hf-ink-muted);
}

[data-theme='dark'] .supe-composer-hint,
[data-theme='dark'] .support-reply-hint {
  color: var(--hf-ink-muted);
}

[data-theme='dark'] .supe-chat-composer textarea,
[data-theme='dark'] .support-reply textarea {
  background: var(--hf-surface-elevated);
  color: var(--hf-ink);
  border-color: var(--hf-border);
}

[data-theme='dark'] .supe-chat-composer textarea:focus {
  background: var(--hf-surface);
  border-color: var(--hf-admin);
}

[data-theme='dark'] .supe-empty-state svg {
  color: var(--hf-ink-muted);
}

[data-theme='dark'] .supe-empty-state h3 {
  color: var(--hf-ink);
}

[data-theme='dark'] .supe-empty-state p {
  color: var(--hf-ink-secondary);
}

[data-theme='dark'] .supe-table th {
  color: var(--hf-ink-muted);
}

[data-theme='dark'] .supe-metric span {
  color: var(--hf-ink-muted);
}

[data-theme='dark'] .supe-detail-item {
  background: var(--hf-surface-elevated);
}

[data-theme='dark'] .supe-alert {
  background: var(--hf-warning-light);
  color: var(--hf-warning);
}

[data-theme='dark'] .supe-thread-subtitle {
  color: var(--hf-ink-muted);
}

[data-theme='dark'] .supe-user-email {
  color: var(--hf-ink-secondary);
}

[data-theme='dark'] .supe-order-ref {
  color: var(--hf-admin);
}

[data-theme='dark'] html.is-supe-admin-route,
[data-theme='dark'] body.is-supe-admin-route {
  background: var(--hf-bg);
}

/* Dark admin CRM typography — higher contrast for support inbox readability */
[data-theme='dark'] body.is-supe-admin-route {
  --hf-ink-secondary: #b8c0d4;
  --hf-ink-muted: #8b95ad;
  --hf-conversation-body-leading: 1.56;
  --hf-conversation-meta-size: 0.7rem;
  --hf-conversation-label-size: 0.74rem;
  --hf-admin-type-hint: #9aa6be;
  --hf-admin-type-meta: #a8b4c8;
  --hf-admin-chip-ink: #93c5fd;
  --hf-admin-chip-bg: rgba(37, 99, 235, 0.14);
  --hf-admin-chip-border: rgba(96, 165, 250, 0.22);
  -webkit-font-smoothing: antialiased;
}

[data-theme='dark'] body.is-supe-admin-route .hf-nav-link {
  color: var(--hf-ink-secondary);
}

[data-theme='dark'] body.is-supe-admin-route .hf-nav-link:hover {
  color: var(--hf-ink);
}

[data-theme='dark'] body.is-supe-admin-route .hf-inbox-toggle,
[data-theme='dark'] body.is-supe-admin-route .date-range-opt,
[data-theme='dark'] body.is-supe-admin-route .hf-inbox-list-count,
[data-theme='dark'] body.is-supe-admin-route .hf-ws-status-wrap {
  color: var(--hf-ink-secondary);
}

[data-theme='dark']
  body.is-supe-admin-route
  .hf-inbox-search
  input::placeholder,
[data-theme='dark']
  body.is-supe-admin-route
  .hf-composer-input-wrap
  textarea::placeholder,
[data-theme='dark'] body.is-supe-admin-route .hf-composer textarea::placeholder,
[data-theme='dark'] body.is-supe-admin-route .composer-textarea::placeholder {
  color: var(--hf-admin-type-hint);
  opacity: 1;
}

[data-theme='dark'] body.is-supe-admin-route .hf-composer-hint,
[data-theme='dark'] body.is-supe-admin-route .composer-hint,
[data-theme='dark'] body.is-supe-admin-route .supe-composer-hint {
  color: var(--hf-admin-type-hint);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

[data-theme='dark'] body.is-supe-admin-route .hf-ticket-preview {
  color: var(--hf-ink-secondary);
}

[data-theme='dark'] body.is-supe-admin-route .hf-ticket-meta-row,
[data-theme='dark'] body.is-supe-admin-route .hf-ticket-time,
[data-theme='dark'] body.is-supe-admin-route .hf-admin-thread-email,
[data-theme='dark'] body.is-supe-admin-route .hf-detail-meta,
[data-theme='dark']
  body.is-supe-admin-route
  .hf-chat-pane-customer
  .hf-detail-meta,
[data-theme='dark'] body.is-supe-admin-route .thread-customer-info .sub,
[data-theme='dark'] body.is-supe-admin-route .supe-thread-subtitle {
  color: var(--hf-admin-type-meta);
}

[data-theme='dark'] body.is-supe-admin-route .thread-context-bar .chip-label,
[data-theme='dark'] body.is-supe-admin-route .context-chip .chip-label {
  color: var(--hf-admin-type-meta);
  font-weight: 500;
}

[data-theme='dark']
  body.is-supe-admin-route
  .hf-admin-chat-log
  .support-message-content
  p,
[data-theme='dark']
  body.is-supe-admin-route
  .hf-admin-chat-log
  .support-message
  p {
  color: #e8eef6;
  letter-spacing: 0.008em;
}

[data-theme='dark']
  body.is-supe-admin-route
  .hf-admin-chat-log
  .support-message-agent
  .support-message-content
  p {
  color: #f1f5f9;
}

[data-theme='dark']
  body.is-supe-admin-route
  .hf-admin-chat-log
  .support-message-time,
[data-theme='dark'] body.is-supe-admin-route .hf-admin-chat-system {
  color: var(--hf-admin-type-meta);
  font-variant-numeric: tabular-nums;
}

[data-theme='dark'] body.is-supe-admin-route .hf-ai-chip,
[data-theme='dark'] body.is-supe-admin-route .ai-suggestion-chip {
  color: var(--hf-admin-chip-ink);
  background: var(--hf-admin-chip-bg);
  border-color: var(--hf-admin-chip-border);
  font-weight: 600;
}

[data-theme='dark'] body.is-supe-admin-route .hf-ai-chip:hover,
[data-theme='dark'] body.is-supe-admin-route .ai-suggestion-chip:hover {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(147, 197, 253, 0.35);
}

[data-theme='dark']
  body.is-supe-admin-route
  .hf-chat-pane-btn:not(.primary):not(.danger),
[data-theme='dark']
  body.is-supe-admin-route
  .thread-action-btn:not(.primary):not(.danger) {
  color: var(--hf-ink);
}

[data-theme='dark'] body.is-supe-admin-route .hf-inbox-thread-skeleton {
  color: var(--hf-ink-secondary);
}

@media (max-width: 720px) {
  :root {
    --hf-conversation-body-size: 0.75rem;
    --hf-conversation-body-leading: 1.42;
    --hf-conversation-title-size: 0.75rem;
    --hf-conversation-title-leading: 1.3;
    --hf-conversation-composer-size: 0.8125rem;
    --hf-conversation-composer-leading: 1.4;
    --hf-conversation-label-size: 0.66rem;
    --hf-conversation-meta-size: 0.64rem;
    --hf-conversation-chip-size: 0.68rem;
  }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hf-duration-instant: 0ms;
    --hf-duration-fast: 0ms;
    --hf-duration-normal: 0ms;
    --hf-duration-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}