/* ePharmacy design tokens — colours, radius, shadow, glass. Load first.

   Breakpoints (same as Bootstrap 4/5, desktop-first; CSS variables can't be used inside @media, so use these exact values):
     xs  phone         @media (max-width:575.98px)
     sm  large phone   @media (max-width:767.98px)   <- phone layout: bottom tab bar, swipe rails, bottom sheets
     md  tablet        @media (max-width:991.98px)   <- header search wraps, account sidebar becomes chips
     lg  small laptop  @media (max-width:1199.98px)  <- tablet layout: fewer columns, hero art hidden
     xl  desktop       @media (max-width:1399.98px)  <- side section dots hidden below this
   Bootstrap column classes for reference: col-sm-* >=576, col-md-* >=768, col-lg-* >=992, col-xl-* >=1200, col-xxl-* >=1400. */
:root{--brand:#0f9d58; --brand-600:#0b8549; --brand-50:#e9f7ef; --navy:#0b2545; --navy-700:#13315c; --accent:#ff8a3d; --accent-50:#fff2e8; --ink:#0f172a; --muted:#5b6b7f; --line:#e6ebf1; --bg:#f5f7fa; --card:#ffffff; --radius:18px; --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);}
:root{--glass-fill:rgba(255,255,255,.58); --glass-rim:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.25) 38%,rgba(255,255,255,.1) 62%,rgba(255,255,255,.7)); --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25),0 10px 34px rgba(11,37,69,.14); --glass-blur:blur(22px) saturate(185%);}