/* Token facade + cascade layer order. This is the single file index.html links
 * for tokens; it @imports the individual token modules. Add a new token to the
 * matching module in css/tokens/ — no extra <link> needed.
 *
 * Layer order is declared once here. Tokens themselves stay UNLAYERED so the
 * custom properties are globally available regardless of layer.
 * See CLAUDE.md → Harte Regeln: "Styles nur in public/css/". */

/* `vendor` liegt VOR base: das einzige Fremd-Stylesheet der App (uPlot, aus
 * node_modules nach public/vendor/ kopiert) wird unten in diesen Layer importiert,
 * damit unsere eigenen Regeln (css/components/uplot.css, @layer components) es
 * überschreiben können — ungelayertes CSS würde sonst jede gelayerte Regel schlagen.
 *
 * `entities` liegt zwischen components und utilities. Eine Ansicht (css/entities/)
 * überschreibt damit einen geteilten Baustein (css/components/) über die
 * LAYER-Ordnung statt über Spezifität und Quellreihenfolge. Vorher lagen beide
 * Hälften in @layer components; welche gewann, entschied allein die Reihenfolge der
 * <link>-Zeilen in index.html — von Hand gehalten und durch nichts gegated. Wer eine
 * neue Komponenten-CSS unten anhängte (die naheliegende Bewegung; der
 * drift-reminders-Hook erinnert nur, DASS ein <link> fehlt, nicht WO), landete hinter
 * allen Ansichten und schlug still deren Overrides — nichts wird rot, eine Ansicht
 * sieht nur falsch aus. Jetzt ist die Präzedenz von der Ladereihenfolge entkoppelt,
 * was das faule Nachladen der Entity-CSS (app/view-loader.js) überhaupt erst sicher
 * macht: ein <link>, der erst beim Zeigen einer View dazukommt, hängt zwangsläufig
 * hinter allem — ohne eigenen Layer gewänne er gegen jede Komponente.
 * Gated by tests/unit/css-layers.test.mjs. */
@layer vendor, base, components, entities, utilities;

@import url('/vendor/uplot.css') layer(vendor);

@import url('/css/tokens/colors.css');
@import url('/css/tokens/chart.css');
@import url('/css/tokens/spacing.css');
@import url('/css/tokens/type.css');
@import url('/css/tokens/motion.css');
@import url('/css/tokens/z-index.css');