/* ==========================================================================
   App stylesheet — the single entry point every page links.

   Cascade layers make the order explicit, so a component never needs a
   more specific selector (or !important) to beat a lower layer:
     tokens → reset → base → layout → components → utilities
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities;

@import url('tokens.css') layer(tokens);
@import url('icons.css') layer(tokens);
@import url('reset.css') layer(reset);
@import url('base.css') layer(base);
@import url('layout.css') layer(layout);
@import url('utilities.css') layer(utilities);

/* ---- Components ---- */
@import url('components/icon.css') layer(components);
@import url('components/modal.css') layer(components);
@import url('components/toast.css') layer(components);
@import url('components/skeleton.css') layer(components);
@import url('components/empty-state.css') layer(components);
@import url('components/film-screen.css') layer(components);
@import url('components/pressable.css') layer(components);
@import url('components/nav-progress.css') layer(components);
@import url('components/section-title.css') layer(components);
@import url('components/button.css') layer(components);
@import url('components/field.css') layer(components);
@import url('components/select-field.css') layer(components);
@import url('components/otp.css') layer(components);
@import url('components/resend.css') layer(components);
@import url('components/chip.css') layer(components);
@import url('components/tag.css') layer(components);
@import url('components/auth-card.css') layer(components);
@import url('components/header.css') layer(components);
@import url('components/search.css') layer(components);
@import url('components/notifications.css') layer(components);
@import url('components/account-panel.css') layer(components);
@import url('components/header-auth.css') layer(components);
@import url('components/sidebar.css') layer(components);
@import url('components/hero-banner.css') layer(components);
@import url('components/progress.css') layer(components);
@import url('components/course-card.css') layer(components);
@import url('components/stat-card.css') layer(components);
@import url('components/watched-list.css') layer(components);
@import url('components/teacher-row.css') layer(components);
@import url('components/filter-pills.css') layer(components);
@import url('components/filter-dropdown.css') layer(components);
@import url('components/pagination.css') layer(components);
@import url('components/sub-banner.css') layer(components);
@import url('components/teacher-profile.css') layer(components);
@import url('components/course-detail.css') layer(components);
@import url('components/lecture-list.css') layer(components);
@import url('components/plan-card.css') layer(components);
@import url('components/chapter-tabs.css') layer(components);
@import url('components/lesson-grid.css') layer(components);
@import url('components/file-grid.css') layer(components);
@import url('components/exam-intro.css') layer(components);
@import url('components/exam.css') layer(components);
@import url('components/pay.css') layer(components);