/* ============================================================
 * DevQuiz — styles.css
 * Single entry point loaded by popup.html and onboarding.html.
 * Only @imports — every rule lives in a focused file under
 * styles/{layout,components,features}/ plus variables.css,
 * base.css, and reduced-motion.css at this level.
 *
 * Import order matters (cascade: later wins on equal specificity):
 *   variables → base → layout/* → components/* → features/* → reduced-motion
 * reduced-motion.css is loaded LAST so its !important overrides always
 * apply for users with prefers-reduced-motion: reduce.
 * ============================================================ */

@import url('./variables.css');
@import url('./base.css');

@import url('./layout/app-shell.css');
@import url('./layout/header.css');
@import url('./layout/navigation.css');

@import url('./components/buttons.css');
@import url('./components/flashcard.css');
@import url('./components/markdown.css');
@import url('./components/modal.css');
@import url('./components/toast.css');
@import url('./components/progress.css');
@import url('./components/skeleton.css');
@import url('./components/feedback.css');

@import url('./features/game.css');
@import url('./features/settings.css');
@import url('./features/account.css');
@import url('./features/review.css');
@import url('./features/add.css');
@import url('./features/all-games.css');
@import url('./features/search.css');
@import url('./features/onboarding.css');

@import url('./reduced-motion.css');