@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    color-scheme: light dark;
  }

  body {
    @apply bg-paper text-ink font-body antialiased;
  }

  .dark body {
    @apply bg-night text-slate;
  }

  h1, h2, h3, h4 {
    @apply font-display;
  }

  /* Visible keyboard focus everywhere — never remove without replacing */
  :focus-visible {
    @apply outline-2 outline-offset-2 outline-azure;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  /* Signature motif: four GSM-style signal bars.
     Used as the primary loading indicator across the app
     (auth, wallet funding, transaction polling) instead of a generic spinner. */
  .signal-loader {
    @apply flex items-end gap-1 h-6;
  }
  .signal-loader span {
    @apply w-1.5 bg-azure rounded-sm origin-bottom;
  }
  .signal-loader span:nth-child(1) { @apply h-2 animate-signal-1; }
  .signal-loader span:nth-child(2) { @apply h-3.5 animate-signal-2; }
  .signal-loader span:nth-child(3) { @apply h-5 animate-signal-3; }
  .signal-loader span:nth-child(4) { @apply h-6 animate-signal-4; }

  .card-surface {
    @apply bg-paper-soft dark:bg-night-soft rounded-card shadow-card border border-black/5 dark:border-white/5;
  }
}