/* ════════════════════════════════════════════════════════════════
   scc — Scoped Cascade CSS
   No build · no magic · native primitives (@layer, @scope, custom properties).

   This is the only file you need to import:
       <link rel="stylesheet" href="scc.css">

   The cascade order is declared ONCE below. Each file assigns itself to its
   layer (it carries its own `@layer ...`), so the order of the @import rules
   doesn't affect the cascade: it's deterministic and auditable.
   ════════════════════════════════════════════════════════════════ */

@layer reset, theme, tokens, base, components, utilities;

@import url("reset.css");
@import url("theme.css");   /* ← the knobs: edit this for your site */
@import url("tokens.css");  /* ← derived from theme.css; no need to touch it */
@import url("base.css");
@import url("animations.css");  /* shared @keyframes (no layer; referenced by components) */

@import url("components/button.css");
@import url("components/hero.css");
@import url("components/card.css");
@import url("components/input.css");
@import url("components/select.css");
@import url("components/field.css");
@import url("components/nav.css");
@import url("components/dialog.css");
@import url("components/table.css");
@import url("components/badge.css");
@import url("components/alert.css");
@import url("components/tabs.css");
@import url("components/tooltip.css");
@import url("components/menu.css");
@import url("components/breadcrumb.css");
@import url("components/pagination.css");
@import url("components/accordion.css");
@import url("components/choice.css");
@import url("components/switch.css");
@import url("components/progress.css");
@import url("components/meter.css");
@import url("components/avatar.css");
@import url("components/toast.css");
@import url("components/chip.css");
@import url("components/skeleton.css");
@import url("components/spinner.css");
@import url("components/kbd.css");
@import url("components/divider.css");
@import url("components/icon.css");

@import url("utilities.css");