/* ============================================================
   HardByte Design System — global entry point.
   Consumers link THIS file only. Import order matters:
   fonts → tokens → base.

   colors.css, typography.css, spacing.css, effects.css and base.css are the
   design system's 2.1.0, byte for byte as it ships them in its tokens/. This
   file and fonts.css are the site's own: their paths
   start in tokens/, and fonts.css declares the faces itself (it says why).

   THE PAGES ARE DARK BY ATTRIBUTE. Every page opens <html data-theme="dark">,
   which is how the system themes a dark surface: :root carries its light
   values, and the dark ones - the semantic colours, the focus ring - apply only
   under that attribute. Without it the focus ring is blue-500, the light
   theme's, and base.css sets body text in the light theme's ink. The attribute
   also sets color-scheme: dark, which changes no colour the page draws: its
   scrollbars and its visible colours are set in css/site.css (measured
   2026-10-04 on the four pages, every element and pseudo-element with the
   attribute and without it, dialogs open and closed). The page's light
   members carry data-theme="light" in turn, for the focus ring the dark
   theme gives them; css/site.css says why, beside .sec-light.

   WHY MOST OF THIS IS NOT USED YET — read before deleting anything.

   tokens/*.css declares 206 custom properties. 119 of them appear in no var(),
   getPropertyValue() or setProperty() anywhere in css/, js/, the pages,
   data/copy.json or tokens/, comments stripped; 127 once a token read only by
   other unread tokens counts as unread too, base.css's rules counting as
   readers (counted 2026-10-04 at 2.1.0; 146, 75 and 79 before it). That
   measurement is correct and it is also the wrong conclusion to act on.

   These tokens are deliberate. The intent is that every section has a
   design-system-conformant variant for BOTH a light and a dark background, so
   that extending the site is a matter of choosing tokens rather than inventing
   colours. The semantic layer in colors.css is exactly that: --surface-card,
   --text-body, --border-default and their siblings each carry a :root value and
   a [data-theme="dark"] override, so one attribute on a wrapper re-themes a
   whole subtree. The same reasoning covers the shadow pairs in effects.css and
   the unused steps of the spacing and type scales - a scale with holes in it is
   worse than a complete one. It covers base.css's component classes too,
   .hb-eyebrow, .hb-tick and .hb-num, which no page uses yet: the site's
   overlines are .hub-label, and its ticks its own.

   So "read by nothing" here means NOT YET REDEEMED, not superfluous. Deleting
   them would trade about 8 KB of unminified CSS for the speed of the next
   rebuild, which is a bad trade and the opposite of why they were written.

   What IS worth knowing before you build a new section:
     - colors.css themes AUTOMATICALLY: var(--surface-card) is correct in both
       themes because [data-theme="dark"] overrides it.
     - effects.css does NOT, but for --focus-outline. It themes by separate
       NAME (--shadow-md vs --shadow-dark-md), a documented design position -
       the dark UI leans on borders and glow rather than drop shadow. Reaching
       for var(--shadow-md) inside a dark section will silently give you the
       light shadow.
   That difference is the one thing here that can cost you time. It is spelled
   out again at the top of effects.css.
   ============================================================ */

@import url("./fonts.css");
@import url("./colors.css");
@import url("./typography.css");
@import url("./spacing.css");
@import url("./effects.css");
@import url("./base.css");