/* =============================================================================
   Marketing System — single CSS entry (professional layer stack)
   Order matters: foundation → utilities → design system → app shell → patterns

   Folder map (all paths relative to public/css/):
   ├── styles-new.css          ← you are here (entry; keep @import order stable)
   ├── skeleton.css
   ├── offline.css             ← offline.html only (not imported here)
   ├── utilities/
   │   ├── _variables.css        tokens (:root)
   │   ├── _spacing.css, _typography.css, _layout.css, _common.css
   │   ├── _extended.css       legacy helpers (large; shrink over time)
   │   ├── _tables.css         wallet / shared table utility classes
   │   ├── _profile.css
   │   ├── _motion-tables.css, _utilities-aliases.css
   ├── components/
   │   ├── _app-layout.css     shell, side menu, dashboard (~6k lines; main refactor target)
   │   ├── _ui-template.css    .header / .section / .page-header / .ui-panel
   │   ├── _page-shell-unify.css  aligns .dashboard vs .page-content-wrapper
   │   ├── _page-patterns-core.css, _page-patterns-scoped.css
   │   ├── _buttons.css, _forms.css, _modals.css, _tables.css
   │   ├── _toast.css, _pwa-install-banner.css, _wa-conversation-modal.css
   │   └── _ui-template-data.css
   └── pages/
       └── _pricing-offer.css  pricing.html only (linked from that page)

   HTML: every app screen uses <link href="css/styles-new.css"> except offline.html.
   ============================================================================= */

/* --- Layer 1: Design tokens ------------------------------------------------ */
@import url('./utilities/_variables.css');

/* --- Layer 2: Global skeletons (loading placeholders) ------------------------ */
@import url('./skeleton.css');

/* --- Layer 3: Motion & micro-interactions ----------------------------------- */
@import url('./utilities/_motion-tables.css');

/* --- Layer 4: Utility aliases (flex, display, filter helpers) ---------------- */
@import url('./utilities/_utilities-aliases.css');

/* --- Layer 5: Spacing, type, layout primitives ------------------------------- */
@import url('./utilities/_spacing.css');
@import url('./utilities/_typography.css');
@import url('./utilities/_layout.css');
@import url('./utilities/_common.css');
@import url('./utilities/_extended.css');
@import url('./utilities/_tables.css');
@import url('./utilities/_profile.css');
@import url('./utilities/_campaign-colors.css');
@import url('./utilities/_enhanced-ui.css');

/* --- Layer 6: App shell (navigation, dashboard, page chrome) ------------------ */
@import url('./components/_app-layout.css');

/* --- Layer 7: UI template (tokenized .header / .section / .ui-panel) -------- */
@import url('./components/_ui-template.css');

/* --- Layer 8: Design-system components (override shell where needed) ---------- */
@import url('./components/_buttons.css');
@import url('./components/_forms.css');
@import url('./components/_modals.css');
@import url('./components/_tables.css');
@import url('./components/_toast.css');
@import url('./components/_pwa-install-banner.css');
@import url('./components/_wa-conversation-modal.css');
@import url('./components/_date-picker.css');
@import url('./components/_ui-template-data.css');
@import url('./components/_empty-states.css');

/* --- Layer 9: Page patterns & shell unification ------------------------------- */
@import url('./components/_page-patterns-core.css');
@import url('./components/_page-patterns-scoped.css');
@import url('./components/_page-shell-unify.css');

/* --- Layer 10: Semantic data surfaces (tx amounts, charts) ------------------- */
@import url('./components/_ui-template-data.css');

/* --- Layer 11: Feedback & overlays ------------------------------------------- */
@import url('./components/_toast.css');
@import url('./components/_pwa-install-banner.css');
@import url('./components/_wa-conversation-modal.css');

/* --- Layer 12: App-level helpers (page-specific CSS → link from that HTML only) */
/* pricing.html: css/pages/_pricing-offer.css after this file. */

.ui-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
}

.ui-container-sm { max-width: 640px; }
.ui-container-md { max-width: 768px; }
.ui-container-lg { max-width: 1024px; }
.ui-container-xl { max-width: 1280px; }

@media (max-width: 768px) {
    .ui-container {
        padding: 0 0.75rem;
    }
}

@media (max-width: 480px) {
    .ui-container {
        padding: 0 0.5rem;
    }
}

/* Accessibility: Respect reduced motion preferences */
@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;
    }
    
    .spinner,
    .table-loading-spinner {
        animation: none !important;
        will-change: auto !important;
    }
}