/*
  ==========================================================================
  GLOBAL THEME SYSTEM - Modular Architecture with CSS Cascade Layers
  ==========================================================================

  CSS Layer Priority (lowest to highest):
  1. tailwind (properties, theme, base, components, utilities)
  2. app-base      - CSS variables, reset, utilities
  3. app-components - Generic UI components
  4. app-pages     - Page-specific styles
  5. pixel         - Pixel art theme (overrides Tailwind)
  6. theme-override - Professional theme overrides (highest priority)

  This eliminates the need for !important declarations.

  ==========================================================================
*/

/* ==========================================================================
   LAYER ORDER DECLARATION
   Must be first to establish cascade priority
   ========================================================================== */
@layer app-base, app-components, app-pages, pixel, theme-override;

/* ==========================================================================
   APP BASE LAYER - Variables, Reset, Utilities
   ========================================================================== */
@import 'base/_variables.css' layer(app-base);
@import 'base/_reset.css' layer(app-base);
@import 'base/_utilities.css' layer(app-base);

/* ==========================================================================
   APP COMPONENTS LAYER
   ========================================================================== */
@import 'components/_buttons.css' layer(app-components);
@import 'components/_navigation.css' layer(app-components);
@import 'components/_forms.css' layer(app-components);
@import 'components/_batch-entry.css' layer(app-components);
@import 'components/_calendar.css' layer(app-components);
@import 'components/_dropdowns.css' layer(app-components);
@import 'components/_shadows.css' layer(app-components);

/* ==========================================================================
   ANIMATIONS - Outside layers (always applies)
   ========================================================================== */
@import 'animations/_keyframes.css';

/* ==========================================================================
   APP PAGES LAYER
   ========================================================================== */
@import 'pages/_landing.css' layer(app-pages);
@import 'pages/_auth.css' layer(app-pages);

/* ==========================================================================
   PIXEL THEME LAYER - Overrides Tailwind utilities
   ========================================================================== */
@import 'pixel/_home.css' layer(pixel);
@import 'pixel/components/_forms.css' layer(pixel);
@import 'pixel/components/_cards.css' layer(pixel);
@import 'pixel/components/_modals.css' layer(pixel);
@import 'pixel/components/_badges.css' layer(pixel);
@import 'pixel/components/_navigation.css' layer(pixel);
@import 'pixel/components/_rpg-cards.css' layer(pixel);
@import 'pixel/components/_bottom-sheet.css' layer(pixel);
@import 'pixel/pages/_landing.css' layer(pixel);
@import 'pixel/pages/_ledger-table.css' layer(pixel);
@import 'pixel/pages/_ledger-cards.css' layer(pixel);
@import 'pixel/pages/_ledger-detail.css' layer(pixel);
@import 'pixel/pages/_ledger-mobile.css' layer(pixel);
@import 'pixel/pages/_dashboard.css' layer(pixel);
@import 'pixel/pages/_notifications.css' layer(pixel);
@import 'pixel/pages/_ai-jobs.css' layer(pixel);
@import 'pixel/pages/_chat.css' layer(pixel);
@import 'pixel/pages/_settings.css' layer(pixel);
@import 'pixel/pages/_native-overrides.css' layer(pixel);
@import 'pixel/pages/_entry-form.css' layer(pixel);
@import 'pixel/components/_collaborators.css' layer(pixel);
@import 'pixel/components/_custom-dropdown.css' layer(pixel);
@import 'pixel/pages/_planner.css' layer(pixel);
@import 'pixel/pages/_planner-ideas.css' layer(pixel);
@import 'pixel/pages/_ledger_day_view.css' layer(pixel);

/* ==========================================================================
   THEME OVERRIDE LAYER - Professional theme (highest priority)
   NOTE: Files contain their own @layer theme-override wrapper because
   esbuild doesn't properly handle @import ... layer() for local files.
   ========================================================================== */
@import 'themes/_professional-variables.css';
@import 'themes/_professional-overrides.css';