@import 'tailwindcss';
@import '@effigenix/ui/theme.css';

@source '../../../packages/ui/src/**/*.{ts,tsx}';

/*
 * Mobile Typography Scale
 *
 * Überschreibt die Tailwind-Defaults für Touch-optimierte Lesbarkeit.
 * Gilt für die gesamte Scanner-App inkl. shared UI-Komponenten.
 *
 * | Klasse    | Default | Mobile | Verwendung                        |
 * |-----------|---------|--------|-----------------------------------|
 * | text-2xs  | –       | 11px   | Timestamps, Mikro-Labels, %       |
 * | text-xs   | 12px    | 13px   | Captions, Subtitles               |
 * | text-sm   | 14px    | 15px   | Body, Listentext, Badges          |
 * | text-base | 16px    | 16px   | Card-Titel, Inputs                |
 * | text-lg   | 18px    | 20px   | Seitenüberschriften               |
 * | text-xl   | 20px    | 24px   | Große Überschriften               |
 * | text-2xl  | 24px    | 28px   | Hero / Login-Titel                |
 */
@theme {
  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1rem;

  --text-xs: 0.8125rem;
  --text-xs--line-height: 1.125rem;

  --text-sm: 0.9375rem;
  --text-sm--line-height: 1.375rem;

  --text-base: 1rem;
  --text-base--line-height: 1.5rem;

  --text-lg: 1.25rem;
  --text-lg--line-height: 1.625rem;

  --text-xl: 1.5rem;
  --text-xl--line-height: 1.75rem;

  --text-2xl: 1.75rem;
  --text-2xl--line-height: 2rem;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scan-line {
  0% { top: 10%; }
  50% { top: 85%; }
  100% { top: 10%; }
}

@utility animate-fade-in {
  animation: fade-in 0.2s ease;
}

@utility animate-scan-line {
  animation: scan-line 2.5s ease-in-out infinite;
}

/* Mobile defaults */
html, body {
  background-color: #faf9f7;
}

body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

input, textarea, select {
  user-select: text;
  -webkit-user-select: text;
}