/* ============================================================
   vision-sim.css — Vision Simulator Main App Styles
   ─────────────────────────────────────────────────────────────
   PURPOSE: Imports all modular component styles to maintain
            a clean, professional, and scalable architecture.

   ORDER MATTERS. Three layers, in this sequence:

     1. tokens           _variables
     2. components       everything in between, each owning its own
                         desktop rules and its own media queries
     3. compact + motion _phone then _motion, LAST, so a phone or
                         reduced-motion override wins a tie without
                         needing extra specificity

   Adding an import after _phone.css will silently take the phone
   layout apart — the same trap documented for the refraction and
   retinoscopy pages. Responsive contract:
   docs/vision-simulator-mobile-layout.md

   Token rule: every --vs-* token is defined in
   components/_variables.css. The only outside tokens referenced
   anywhere under css/vision-sim/ are ones css/shared/design-tokens.css
   defines. An undefined var() resolves silently to the initial
   value and has shipped the wrong colour on this site before.
   ============================================================ */

/* ── 1. Tokens ── */
@import url("components/_variables.css");

/* ── 2. Components ── */
@import url("components/_layout.css");
@import url("components/_header.css");
@import url("components/_ribbon.css");
@import url("components/_workspace.css");
@import url("components/_stage.css");
@import url("components/_compare.css");
@import url("components/_panels.css");
@import url("components/_inputs.css");
@import url("components/_sliders.css");
@import url("components/_toggles.css");
@import url("components/_buttons.css");
@import url("components/_readouts.css");
@import url("components/_disclaimer.css");
@import url("components/_modal.css");
@import url("components/_calibration.css");

/* ── 3. Compact layouts, then motion. Keep these last. ── */
@import url("components/_phone.css");
@import url("components/_motion.css");