/* ============================================================
   Echopad Design System — global entry point. Consumers link this
   one file and get the whole contract.

   THREE LAYERS, in cascade order:
     1. tokens/*.css      custom properties — the source of truth,
                          product-agnostic. Never styled here.
     2. classes/*.css     the ep- class layer — THE SHARED CONTRACT.
                          Identical in static HTML and in React; the
                          React components are thin wrappers over it.
     3. products/*.css    per-product override layer, opt-in. Linked
                          AFTER this file by the product that needs it.

   Layer 3 rule (binding): a product layer may vary structure, content
   layout, density and chrome, and may RE-DECLARE an existing token's
   value. It may never introduce a new token, a new colour, or redefine
   a Layer 2 class. Products are differentiated by icon, imagery and
   structure — never by hue. See guidelines/theming-layers.html.
   ============================================================ */

/* Layer 1 — tokens */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/effects.css");
@import url("tokens/motion.css");

/* Layer 2 — the class contract */
@import url("classes/base.css");
@import url("classes/layout.css");
@import url("classes/controls.css");
@import url("classes/surfaces.css");
@import url("classes/feedback.css");