/* Fluent 2 mobile token aliases for the QR support experience.
   These aliases sit above the current app theme tokens so the future separated
   frontend can reuse the same semantic layer without inheriting page-specific CSS. */

:root {
  /* Color tokens */
  --f2-color-neutral-background-1: var(--surface-page);
  --f2-color-neutral-background-2: var(--surface-card);
  --f2-color-neutral-background-3: var(--surface-raised);
  --f2-color-neutral-background-inset: var(--surface-sunken);
  --f2-color-neutral-foreground-1: var(--text-primary);
  --f2-color-neutral-foreground-2: var(--text-secondary);
  --f2-color-neutral-foreground-3: var(--text-tertiary);
  --f2-color-neutral-foreground-4: var(--text-quaternary);
  --f2-color-brand-background: var(--brand-primary);
  --f2-color-brand-background-hover: var(--brand-primary-hover);
  --f2-color-brand-foreground-1: var(--text-on-brand);
  --f2-color-status-success-background: var(--success-bg);
  --f2-color-status-success-foreground: var(--text-success);
  --f2-color-status-warning-background: var(--warning-bg);
  --f2-color-status-warning-foreground: var(--text-warning);
  --f2-color-status-danger-background: var(--danger-bg);
  --f2-color-status-danger-foreground: var(--text-danger);
  --f2-color-stroke-1: var(--border-default);
  --f2-color-stroke-2: var(--border-strong);
  --f2-color-stroke-focus-1: var(--border-focus);

  /* Typography tokens */
  --f2-font-family-base: var(--font-stack);
  --f2-font-family-monospace: var(--font-mono);
  --f2-font-size-100: var(--type-xs);
  --f2-font-size-200: var(--type-sm);
  --f2-font-size-300: var(--type-base);
  --f2-font-size-400: var(--type-md);
  --f2-font-size-500: var(--type-lg);
  --f2-font-size-600: var(--type-xl);
  --f2-font-size-700: var(--type-xxl);

  /* Spacing tokens */
  --f2-space-025: 2px;
  --f2-space-050: 4px;
  --f2-space-100: 8px;
  --f2-space-150: 12px;
  --f2-space-200: 16px;
  --f2-space-300: 24px;
  --f2-space-400: 32px;
  --f2-space-600: 48px;

  /* Shape and elevation tokens */
  --f2-radius-small: var(--radius-sm);
  --f2-radius-medium: var(--radius-md);
  --f2-radius-large: var(--radius-lg);
  --f2-shadow-2: var(--shadow-sm);
  --f2-shadow-4: var(--shadow-md);
  --f2-shadow-8: var(--shadow-lg);
}

.support-empty-state {
  text-align: center;
  padding: var(--f2-space-200) 0;
}

.support-error-state {
  color: var(--text-danger);
  text-align: center;
  padding: var(--f2-space-200);
}