globals.css

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

:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #2563eb;
  --radius: 0.5rem;
  --surface: #f8fafc;

  /* Status/badge tokens (a11y/theming-27): used by StatusBadge and the
     toast badges. Light-mode values match the existing Tailwind pastel
     chips (emerald/sky/rose/amber-100 + 800) so the light theme is visually
     unchanged. See docs/components/Accessibility.md for audited ratios. */
  --status-success-bg: #d1fae5;
  --status-success-foreground: #065f46;
  --status-info-bg: #e0f2fe;
  --status-info-foreground: #075985;
  --status-error-bg: #ffe4e6;
  --status-error-foreground: #9f1239;
  --status-warning-bg: #fef3c7;
  --status-warning-foreground: #92400e;

  /* Neutral fallback for any status value outside the StatusType union.
     Light-mode choice: slate-100 + slate-700 — sits between the four
     coloured tokens so the unknown badge is unmistakably desaturated. */
  --status-neutral-bg: #f1f5f9;
  --status-neutral-foreground: #334155;
}

[data-theme='dark'] {
  --background: #020617;
  --foreground: #f8fafc;
  --card: #020617;
  --card-foreground: #f8fafc;
  --popover: #020617;
  --popover-foreground: #f8fafc;
  --primary: #3b82f6;
  --primary-foreground: #020617;
  --secondary: #1e293b;
  --secondary-foreground: #f8fafc;
  --muted: #1e293b;
  --muted-foreground: #94a3b8;
  --accent: #1e293b;
  --accent-foreground: #f8fafc;
  --destructive: #7f1d1d;
  --destructive-foreground: #f8fafc;
  --border: #1e293b;
  --input: #1e293b;
  --ring: #3b82f6;
  --surface: #0f172a;

  /* Dark-mode status/badge tokens: swapped from light pastel chips
     (emerald/sky/rose/amber-100) to deep tinted backgrounds with bright
     tinted text. Verified two things, not just one:
       1. text-foreground vs its own chip-bg meets AA 4.5:1 (all 4 pass,
          5.3:1-6.3:1).
       2. chip-bg vs --surface (#0f172a) has enough separation to read as
          a distinct chip rather than blending into the dark panel
          (all 4 land at ~1.8-2.0:1, clearly visible).
     Ratios recorded in docs/components/Accessibility.md. */
  --status-success-bg: #14532d;
  --status-success-foreground: #6ee7b7;
  --status-info-bg: #0c4a6e;
  --status-info-foreground: #7dd3fc;
  --status-error-bg: #7f1d1d;
  --status-error-foreground: #fda4af;
  --status-warning-bg: #78350f;
  --status-warning-foreground: #fcd34d;

  /* Dark-mode neutral fallback: slate-800 background + slate-200 text.
     Pairs sit at ~10.5:1 contrast against each other and stay clearly
     desaturated versus the four coloured tokens. */
  --status-neutral-bg: #1e293b;
  --status-neutral-foreground: #e2e8f0;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-feature-settings: "rlig" 1, "calt" 1;
}

/* prefers-reduced-motion: halt all animations and transitions for users
   who have requested reduced motion via their OS/browser settings.
   - animate-spin (and any Tailwind animation utility) is stopped by
     setting animation to none.
   - All CSS transitions are collapsed to instant (duration 0ms) so
     elements snap to their end state without motion.
   - scroll-behavior is set to auto to prevent smooth scrolling.
   Elements that serve as static loading indicators (e.g. the spinner SVG
   inside WalletConnectButton) remain visible in the DOM; only the
   rotation is halted so the indicator is still perceivable. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Explicitly stop Tailwind's animate-spin so the spinner SVG becomes
     a static circle rather than a continuously rotating element. The
     element remains in the DOM and is still visible as a loading cue. */
  .animate-spin {
    animation: none !important;
  }

  /* Freeze the shimmer skeleton animation. The block remains visible as
     a static grey placeholder so users with reduced-motion still perceive
     the loading state without any movement. */
  .animate-shimmer {
    animation: none !important;
    background-image: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Shimmer keyframe for LoadingSkeleton
 *
 * Creates a left-to-right highlight sweep using a CSS gradient and
 * background-position animation. The gradient is positioned so the bright
 * band starts off-screen to the left (-200% background-position) and
 * travels to the right (200%). background-size is set to 200% so the sweep
 * covers the full element width exactly once per cycle.
 *
 * This class is intentionally defined inside @layer utilities so Tailwind's
 * purge process does not strip it, and so it can be overridden by any
 * Tailwind utility class at the same specificity layer.
 * --------------------------------------------------------------------------- */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@layer utilities {
  .animate-shimmer {
    background-image: linear-gradient(
      90deg,
      #e2e8f0 0%,
      #f1f5f9 40%,
      #e2e8f0 60%,
      #e2e8f0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
  }
}