/* styles.css — the token + aesthetic entry for Grayscale Glass.
 *
 * Every page links exactly TWO stylesheets, in this order:
 *     <link rel="stylesheet" href="_ds_bundle.css">   compiled HeroUI core
 *     <link rel="stylesheet" href="styles.css">       ← this file
 * Nothing is loaded twice: the core lives only in _ds_bundle.css, the aesthetic
 * only in the four imports below. The aesthetic is unlayered and the core is
 * entirely inside @layer, so the aesthetic wins regardless of link order —
 * but keep the order above so every page reads the same.
 *
 * Order of the imports matters: tokens first (upstream values), then the
 * aesthetic overrides, then glass (the --glass-* material), then modes
 * (density / touch / display type), then motion (the --dur-* / --motion-*
 * timing scale). Each token has exactly one owner. */
@import "./fonts/inter.css";  /* Inter, self-hosted (was fonts.googleapis.com) */
@import "./_ds_tokens.css";
@import "./aesthetic.css";
@import "./glass.css";
@import "./modes.css";
@import "./motion.css";