/* ============================================================
   lensometer.css — Lensometer 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 vision,
   refraction and retinoscopy pages. Responsive contract:
   docs/lensometer-mobile-layout.md

   Token rule: every --lm-* token is defined in
   components/_variables.css. The only outside tokens referenced
   anywhere under css/lensometer/ 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.

   Contrast rule: --lm-faint #5f6963 is the lightest any TEXT may
   go. --lm-amber and --lm-coral are FILL-ONLY; coloured text uses
   --lm-amber-ink / --lm-coral-ink. Verified from real pixels, the
   way it was done on the 3D anatomy page.

   Direction rule: no physical left/right anywhere in this folder.
   The page runs in Arabic RTL, so box sides are logical
   (inset-inline-*, border-inline-*, padding-inline-*). The two
   CANVASES are the deliberate exception and do not mirror at all —
   an axis of 60° is 60° in both languages — which is why they are
   marked dir="ltr" rather than being flipped by CSS.
   ============================================================ */

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

/* ── 2. Components ── */
@import url("components/_layout.css");
@import url("components/_workspace.css");
@import url("components/_stage.css");
@import url("components/_eyepiece.css");
@import url("components/_readouts.css");
@import url("components/_wheels.css");
@import url("components/_mount.css");
@import url("components/_guide.css");
@import url("components/_controls.css");

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