/* ==========================================================================
   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/film-screen.css') layer(components);
@import url('components/empty-state.css') layer(components);
@import url('components/pressable.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/tag.css') layer(components);
@import url('components/auth-card.css') layer(components);
@import url('components/tip.css') layer(components);
@import url('components/otp.css') layer(components);
@import url('components/resend.css') layer(components);
@import url('components/header.css') layer(components);
@import url('components/sidebar.css') layer(components);
@import url('components/filter-pills.css') layer(components);
@import url('components/pagination.css') layer(components);
@import url('components/metric.css') layer(components);
@import url('components/attention.css') layer(components);
@import url('components/request-row.css') layer(components);
@import url('components/review.css') layer(components);
@import url('components/grading.css') layer(components);
@import url('components/account-panel.css') layer(components);
@import url('components/account-subscription.css') layer(components);
@import url('components/payment-card.css') layer(components);
@import url('components/course.css') layer(components);
@import url('components/course-exams.css') layer(components);
@import url('components/course-workspace.css') layer(components);
@import url('components/course-page.css') layer(components);
@import url('components/chapter-tabs.css') layer(components);
@import url('components/rich-editor.css') layer(components);
@import url('components/student-course.css') layer(components);
@import url('components/student-lecture-list.css') layer(components);
@import url('components/student-lesson-grid.css') layer(components);
@import url('components/student-file-grid.css') layer(components);
@import url('components/student-exam-intro.css') layer(components);
@import url('components/preview.css') layer(components);
@import url('components/mobile-nav.css') layer(components);