/* North Node Design System — single entry point
   One <link> pulls in the whole system:

     <link rel="stylesheet" href="src/nn-main.css">

   Nothing else to link. The typefaces ship with the system — Inter and
   Barlow Condensed are self-hosted from src/assets/fonts/ and declared in
   nn-root.css, so there is no Google Fonts tag, no third-party request, and
   nothing for a CSP to block.

   ── Cascade layers decide, not load order — RESOLVED 2026-07-28 ──
   @layer names the priority order once, on the first line below. After
   that a rule's LAYER decides who wins, not its specificity and not which
   file loaded first:

     reset        element defaults. Lowest, so everything overrides them.
     root         nn-root.css — every literal in the system: color, space,
                  type, motion, z-order. Primitives then roles, light then
                  dark. Replaces the old palette + theme + size + type +
                  motion five-file split. Layered so a consumer can
                  redefine --nn-brand-hue from their own sheet.
     components   read roles only, never a primitive.
     utilities    nn-layout.css, nn-space.css, nn-typo.css. Last, so they win.

   The @import order below no longer affects the cascade — it stays in
   dependency order purely so the file reads sensibly. The two orders being
   independent IS the feature.

   A component file contains no literal values: every value in one is var(),
   and every var resolves to a :root declaration in nn-root.css. That
   indirection is what lets the theme swap.

   ── Why layers and not just ordering ──
   The earlier note here proposed putting utilities last and calling it
   done. That is necessary but not sufficient: source order only breaks
   TIES, and seventeen component rules are not ties. They use compound
   selectors —

     .nn-input--sm .nn-input__control   0,2,0
     .nn-p-24                           0,1,0   loses, at any load order

   Ordering alone could never make .nn-p-24 reach that control. A layer can,
   because layer precedence is evaluated before specificity is consulted at
   all. Verified in-browser: the utility resolves to 24px.

   ── The consumer wins by default ──
   Unlayered CSS beats ALL layered CSS. Because every rule this system ships
   is inside a layer, a consuming project's ordinary stylesheet overrides
   North Node with no !important and no specificity fight:

     .my-app-card { padding: 2rem; }    <- wins, it is unlayered

   For a system distributed as files you drop into someone else's project,
   that is the behaviour you want.
   ══════════════════════════════════════════════════════════════════════ */

@layer reset, root, components, utilities;

@import url('nn-root.css') layer(root);
@import url('reset.css')   layer(reset);

@import url('nn-animation.css') layer(components);

/* The fill sits in components rather than utilities because components BUILD
   ON it — at the same precedence a component can adjust the fill, where a
   utility would win over both.

   ── Component stylesheets ARE imported here — RESOLVED 2026-08-17 ──
   This reverses the 2026-08-04 decision, which had each component's .js adopt
   its own sheet at runtime via

     import styles from './nn-tag.css' with {type: 'css'};
     document.adoptedStyleSheets.push(styles);

   WebKit does not implement CSS module scripts. Not "renders differently" —
   the import THROWS, the module aborts before its last line, and the
   customElements.define() at the foot of the file never runs. Every component
   in the system stayed an unupgraded element on every iPhone, iPad and Mac
   Safari in the world, while Chromium showed nothing wrong. The site shipped
   that way. bugs.webkit.org 227967 is open and unassigned as of 2026-08, an
   Interop request every year since 2023. Chromium has had it since 93 and
   Firefox since 147, which is the whole trap: by mid-2026 it reads as
   settled everywhere a developer is likely to be looking.

   Note what makes this class of bug expensive: iOS requires every browser to
   use WebKit, so Chrome, Firefox, Edge and Brave on an iPhone all failed
   identically. There was no iOS browser to check it in that would have shown
   it working, and no iOS browser that escaped it.

   The layering that the old note worried about is not a reason to adopt at
   runtime. Each component sheet opens with its own `@layer components {`, so
   it lands in the order named above whether it arrives by @import or by
   adoption — the unlayered-by-default hazard only applies to a sheet that
   does NOT name a layer, and none of these do. A plain @import here shares
   this file's layer namespace and resolves to the same `components`.

   Importing them buys two things beyond the browser support. Styling no
   longer depends on JavaScript at all, so there is no window in which the
   markup paints unstyled while a module is still in flight — the reset.css
   note about a drawer painting "as a block of links in the flow" describes a
   state that is now unreachable. And it is one request chain rather than
   thirteen fetches fanning out after the modules land.

   What a component's .js still owns is behaviour. The pairing is now: the
   sheet ships with the system, the class ships with the script.

   Only the thirteen sheets with content are listed. The empty placeholders —
   nn-card, nn-icon, nn-highlight, nn-button-icon, nn-container-page,
   nn-container-section, nn-field-label, nn-field-radiogroup — stay out until
   they have a rule in them. */

@import url('components/nn-button.css');
@import url('components/nn-character.css');
@import url('components/nn-container-drawer.css');
@import url('components/nn-container-nav.css');
@import url('components/nn-container-notification.css');
@import url('components/nn-container-tooltip.css');
@import url('components/nn-field-checkbox.css');
@import url('components/nn-field-dropdown.css');
@import url('components/nn-field-input.css');
@import url('components/nn-field-radio.css');
@import url('components/nn-link.css');
@import url('components/nn-link-asbutton.css');
@import url('components/nn-link-ascard.css');
@import url('components/nn-link-astab.css');
@import url('components/nn-table.css');
@import url('components/nn-tag.css');

@import url('nn-layout.css') layer(utilities);
@import url('nn-space.css')  layer(utilities);
@import url('nn-typo.css')   layer(utilities);
@import url('nn-color.css')  layer(utilities);


/* ══════════════════════════════════════════════════════════════════════
   THE OLD TOKEN LAYER — commented out 2026-07-28

   These files moved to legacy/nn-legacy/ during the nn-root rebuild. Nothing
   under src/ imports them any more, so the system renders on nn-root.css
   alone. Four are gone as of 2026-07-29; the rest stay because the migration
   is not finished and each still holds names nn-root does not.

     palette.css   superseded — hex not oklch, inverted step convention
     theme.css     superseded — roles now live in nn-root §2/§3
     old-size.css  DO NOT DELETE. Sole definition site for 48 names that
                   src/components/*.css and src/reset.css still reference,
                   --nn-focus-width and --nn-focus-offset among them. RAW
                   scales are superseded; the control-height and focus-*
                   roles have not landed in root, and COMPONENT GEOMETRY has
                   not been distributed to the component files
     motion.css    mostly ported to nn-animation.css 2026-07-31 — the fill
                   interaction and the reduced-motion / forced-colors blocks.
                   The five shared @keyframes are all that remain, and they
                   travel with the spinner, skeleton and toast that use them
     compat.css    ~13 entries wear the live --nn- prefix, so they are
                   collisions rather than legacy mappings
     a11y.css      visually-hidden, skip link, hit targets — needs four
                   renames, then it can come back

   Deleted, with anything unported salvaged into TODO.md §3 first:

     type.css        superseded by nn-root §2 + nn-typo.css + reset.css
     layout.css      superseded by nn-layout.css + nn-space.css
     fonts-cdn.css   never worked — see the fonts note at the foot of this file
     fonts-local.css pointed at a directory that did not exist yet

   Consequences of switching them off, both known and tracked in TODO.md:

     · reset.css reads --nn-color-focus, --nn-focus-width and
       --nn-focus-offset. nn-root defines none of the three, so the global
       focus ring is currently absent.
     · a11y.css is off, so .nn-visually-hidden and the skip link are gone.
     · ~100 names the components reference are still undefined — the full
       list is in TODO.md §2.
   ══════════════════════════════════════════════════════════════════════ */

/* @import url('tokens/palette.css'); */
/* @import url('tokens/theme.css');   */
/* @import url('old-size.css');       */
/* @import url('motion.css');         */
/* @import url('base/a11y.css');      */

/* base/reset.css simply moved to src/reset.css — it was never legacy. */


/* ── Fonts — self-hosted, resolved 2026-07-29 ────────────────────────────
   Inter (text) and Barlow Condensed (display) ship in src/assets/fonts/ as
   16 woff2 files, declared @font-face at the top of nn-root.css. Nothing to
   link and no third-party request.

   Only 3 or 4 files cross the wire on a given page: each face is split
   latin / latin-ext by unicode-range, and Barlow Condensed is per-weight, so
   the browser fetches exactly the subsets and weights the page uses.

   Both former loaders are deleted. Why fonts-cdn.css is worth remembering:
   it requested wght@100..800 for Barlow and Barlow Condensed, neither of
   which has a variable build on Google Fonts, so the response came back 200
   with both families silently dropped — only IBM Plex Mono loaded. Every
   page built against it rendered headings in a system fallback while looking
   like it worked. A 200 does not mean a font loaded, and document.fonts.check()
   does not either — it returns true whenever text is renderable, fallback
   included. Measure a glyph's width against the expected face. */