/*
 * Layer order is load-bearing — it maps to the Astryx cascade:
 *   reset → tailwind base → astryx component styles → our theme tokens →
 *   app components → tailwind utilities (must win last).
 *
 * NOTE: we import OUR built theme, not @astryxdesign/theme-neutral/theme.css.
 * Astryx theme CSS is @scope-gated on the theme *name*, so neutral's rules
 * would match nothing under [data-astryx-theme="loyaly"]. loyaly.css already
 * contains everything it inherits from neutral.
 */

@layer reset, theme, base, astryx-base, astryx-theme, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import '@astryxdesign/core/reset.css';
@import '@astryxdesign/core/astryx.css';
@import '../theme/loyaly.css';
@import '@astryxdesign/core/tailwind-theme.css';
@import 'tailwindcss/utilities.css' layer(utilities);

/*
 * Paint the canvas before React mounts. AppShell sets these itself once it
 * renders, but this guarantees the very first frame — and any non-shell route
 * such as an error boundary — is already black rather than white.
 */
html {
  background-color: var(--color-background-body);
  color-scheme: dark;
}

@layer components {
  /* Kill switch for our own CSS transitions. Framer Motion is handled by
     <MotionConfig reducedMotion="user">, recharts by useChartMotion(). */
  @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;
    }
  }
}
