/* ═══════════════════════════════════════════════════════════════════
   OctalBits — library entry point

   Link this one file. It is imports only, in cascade order.
   Architecture is CUBE (Composition, Utility, Block, Exception) with
   Every Layout primitives supplying the composition layer.

   ── Using this as a starting point for another project ──────────────
   Two layers are left empty on purpose, so a project can extend the
   system without editing it and without a specificity fight:

     theme      — retune the tokens. Repoint --ob-brand, swap a ramp,
                  change the type families or the space curve. Sits
                  directly above tokens, below everything that uses
                  them, so every block and exception follows along.

     overrides  — the project's last word. Anything declared here wins
                  over blocks and exceptions regardless of specificity,
                  so a one-off does not need !important or a longer
                  selector.

   Add them after this file, or uncomment the hooks below:

     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="my-project.css">   <!-- @layer theme { … } -->

   Rebranding is usually the theme layer alone — the blocks read only
   semantic aliases and ramp steps, never literal colours.
   ═══════════════════════════════════════════════════════════════════ */

@layer reset, tokens, theme, composition, utilities, blocks, exceptions, overrides;

@import url("tokens/colors.css") layer(tokens);
@import url("tokens/scale.css") layer(tokens);

/* Project token overrides. Uncomment and point at your own file.
   @import url("my-theme.css") layer(theme); */

@import url("css/reset.css") layer(reset);
@import url("css/base.css") layer(blocks);
@import url("css/composition.css") layer(composition);
@import url("css/utilities.css") layer(utilities);

@import url("css/blocks/button.css") layer(blocks);
@import url("css/blocks/badge.css") layer(blocks);
@import url("css/blocks/callout.css") layer(blocks);
@import url("css/blocks/form.css") layer(blocks);
@import url("css/blocks/card.css") layer(blocks);
@import url("css/blocks/table.css") layer(blocks);
@import url("css/blocks/nav.css") layer(blocks);
@import url("css/blocks/tabs.css") layer(blocks);
@import url("css/blocks/disclosure.css") layer(blocks);
@import url("css/blocks/dialog.css") layer(blocks);
@import url("css/blocks/overlay.css") layer(blocks);
@import url("css/blocks/toast.css") layer(blocks);
@import url("css/blocks/pagination.css") layer(blocks);
@import url("css/blocks/progress.css") layer(blocks);
@import url("css/blocks/prose.css") layer(blocks);

@import url("css/exceptions.css") layer(exceptions);

/* Project-specific last word.
   @import url("my-overrides.css") layer(overrides); */

@import url("css/print.css");

/* ── Page field · deliberately unlayered ──────────────────────────────
   Unlayered author declarations outrank every @layer, so a host page or
   embed shipping its own "html, body { background: transparent }" reset
   would otherwise win against anything declared in layer(blocks) — the
   tokens flip but the canvas never repaints. Declared here, after all the
   imports, so source order settles the tie in our favour. Keep it last and
   keep it out of a layer.

   To change the page field in a project, repoint --ob-bg in the theme
   layer rather than writing a competing rule here. */
html,
body {
  background: var(--ob-bg);
}
body { color: var(--ob-text); }