/* =============================================================================
   MELP DESIGN SYSTEM — single source of design truth  (barrel / index)
   -----------------------------------------------------------------------------
   This file no longer contains rules itself — it imports the design system in
   dependency order. Keep linking THIS file (before main.css / darkMode.css) on
   every page; the parts below load automatically. Do not link the parts directly.

   Origin: merged from css/custom/main.css, extracted/colors_and_type.css,
   css/custom/design-system.css and css/design-system/layout-system.css, then
   deduplicated, normalised to one step spacing scale, and reduced to the
   canonical semantic colour palette.

   MODULES (load order matters — tokens MUST come first; everything else draws
   from the --color-* / --space-* / --radius-* … tokens it defines):

     tokens.css ............. base + semantic colour/type/space/radius/shadow tokens
                              (+ dark-mode overrides, brand-primary compat alias)
     typography.css ......... type-scale classes + font-size/weight/style/tracking/align
     utilities.css .......... spacing, layout, sizing, flexbox, grid, colour, border,
                              radius, shadow atomic utilities
     components.css ......... buttons, cards, forms, alerts, badges + the full JS
                              component layer (icon/spinner/modal/popup/nav/…)
     effects.css ............ transitions, transforms, keyframes, hover animation
     layout-system.css ...... containers, grid positioning, layout patterns, cursor
     responsive.css ......... breakpoint-prefixed utilities (sm/md/lg/xl/2xl)
     bootstrap-compat.css ... legacy grid and component mechanics (no visual theme)

   CONVENTIONS
     • 1rem = 10px (html font-size 62.5%). Use rem, never magic px.
     • Numeric spacing/size utilities use ONE step scale: number × 0.4rem
       (e.g. .p-4 = 1.6rem = 16px, .gap-2 = 0.8rem = 8px). No pixel-literal scale.
     • Colours come ONLY from the semantic --color-* tokens in tokens.css (matching
       extracted/colors_and_type.css). No -50…900 ramps. Brand red is never an error;
       error red (--color-error) is intentionally distinct.
     • Each selector is declared once — no duplicate entries. Add a new token/utility
       to the matching module above, keeping this file the single source of truth.

   NOTE on caching: the page links design-system.css?v=<version>, but @import cannot
   carry that query, so the parts are cached by filename. Bump/rename a part (or add a
   ?v= to its @import) when you need to bust its cache.
   ============================================================================= */

@import url("tokens.css?v=4.7.8");
@import url("../../assets/fonts/fonts.css?v=4.7.8");
@import url("../../assets/fonts/material-symbols/material-symbols.css");
@import url("typography.css");
@import url("utilities.css");
/* ?v= per the caching note above: @import cannot inherit design-system.css's query, so
   an edited part stays cached by filename. Bump this when components.css changes. */
@import url("components.css?v=4.7.8");
@import url("effects.css");
@import url("layout-system.css");
@import url("responsive.css");
@import url("bootstrap-compat.css");