@navecss/core 0.2.0 → 0.3.0

package/dist/standalone.css

@@ -0,0 +1,1137 @@
+/*
+ * Nave Design System — the @layer order statement, alone.
+ *
+ * Import this first, before any other stylesheet. CSS fixes a layer's
+ * position the first time the page declares it, so if a stylesheet of yours
+ * that declares a layer loads before this statement, that layer's position is
+ * fixed first and Nave's order inverts with no error. Imported first, this one
+ * line keeps the order wherever the rest of Nave and your own stylesheets land
+ * in the import graph. Importing '@navecss/core' afterwards is correct: its
+ * own copy of this statement is identical and changes nothing.
+ *
+ * Full contract:
+ * https://github.com/navecss/navecss/blob/main/docs/04-adr/0003-layer-cascade-contract.md
+ */
+@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;
+
+/*
+ * Nave Design System — core entry point
+ * Import this once in your app, before any stylesheet of yours that
+ * declares a layer.
+ *
+ * The @layer statement below is the cascade contract: seven names across five
+ * top-level layers (tokens, reset, atomic, components, overrides), each name
+ * beating every name before it. Do not reorder. The contract holds only if
+ * this statement is the first @layer declaration the document sees: a layer
+ * your CSS declares earlier keeps that earlier position, and the order
+ * inverts. Author into a sublayer, never into a bare parent (a parent
+ * outranks its own sublayers). Unlayered CSS beats every layer. All of this
+ * is for normal declarations: !important reverses layer order, which the
+ * reset uses on purpose. Full contract:
+ * https://github.com/navecss/navecss/blob/main/docs/04-adr/0003-layer-cascade-contract.md
+ *
+ *   tokens.defaults     → CSS custom properties (read-only, set by @navecss/tokens)
+ *   tokens.presets      → RESERVED: 0.1.0 ships zero presets, but the
+ *                         slot is declared now so a preset always beats the defaults
+ *                         regardless of import order, and a consumer's `overrides`
+ *                         always beats a preset. Retrofitting this slot later would be
+ *                         a breaking change to the published cascade contract.
+ *                         A project's own `navecss-tokens build` output lands here too.
+ *   reset               → Cross-browser normalisation
+ *   atomic              → Global atom classes that cx() names: defaults, below
+ *                         component CSS (@nave inlines into your own rule instead)
+ *   components.nave     → Components Nave publishes
+ *   components.consumer → Your component CSS: @layer components.consumer { … }
+ *   overrides           → Your deliberate exceptions to everything above
+ */
+@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;
+
+/* Token layer — all CSS custom properties.
+ * Imported plain: tokens.css declares its own `@layer tokens.defaults` so that
+ * consumers importing @navecss/tokens/css directly are layered correctly too.
+ * Adding layer(tokens.defaults) here would nest it a second time. */
+/* Nave Design System — generated, do not edit */
+@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;
+
+/**
+ * @property declarations provide:
+ *   - Type safety (browsers reject invalid values)
+ *   - CSS transitions on custom properties (e.g. color tokens)
+ *   - IDE autocomplete in supported editors
+ *
+ * Only tokens whose initial-value is computationally independent are
+ * registered. Font-relative values (rem/em) cannot be, so those tokens
+ * ship as plain custom properties below.
+ */
+  @property --nave-font-weight-regular {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 400;
+  }
+
+  @property --nave-font-weight-medium {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 500;
+  }
+
+  @property --nave-font-weight-semibold {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 600;
+  }
+
+  @property --nave-font-weight-bold {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 700;
+  }
+
+  @property --nave-line-height-none {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 1;
+  }
+
+  @property --nave-line-height-tight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 1.2;
+  }
+
+  @property --nave-line-height-snug {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 1.375;
+  }
+
+  @property --nave-line-height-base {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 1.5;
+  }
+
+  @property --nave-line-height-relaxed {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 1.625;
+  }
+
+  @property --nave-line-height-loose {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 2;
+  }
+
+  @property --nave-spacing-content-xs {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --nave-spacing-content-sm {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --nave-spacing-content-md {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --nave-spacing-content-lg {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 24px;
+  }
+
+  @property --nave-spacing-content-xl {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 32px;
+  }
+
+  @property --nave-spacing-layout-xs {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 48px;
+  }
+
+  @property --nave-spacing-layout-sm {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 64px;
+  }
+
+  @property --nave-spacing-layout-md {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 96px;
+  }
+
+  @property --nave-spacing-layout-lg {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 128px;
+  }
+
+  @property --nave-spacing-control-xs {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --nave-spacing-control-sm {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --nave-spacing-control-md {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --nave-spacing-control-lg {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --nave-border-width-none {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --nave-border-width-sm {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  @property --nave-border-width-focus {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --nave-border-width-mark {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --nave-border-width-lg {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --nave-radius-none {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --nave-radius-sm {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --nave-radius-control {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --nave-radius-card {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --nave-radius-overlay {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --nave-radius-full {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 9999px;
+  }
+
+  @property --nave-opacity-disabled {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.4;
+  }
+
+  @property --nave-layer-base {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --nave-layer-dropdown {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 100;
+  }
+
+  @property --nave-layer-sticky {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 200;
+  }
+
+  @property --nave-layer-overlay {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 300;
+  }
+
+  @property --nave-layer-modal {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 400;
+  }
+
+  @property --nave-layer-toast {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 500;
+  }
+
+  @property --nave-layer-tooltip {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 600;
+  }
+
+  @property --nave-motion-duration-instant {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 0ms;
+  }
+
+  @property --nave-motion-duration-fast {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 100ms;
+  }
+
+  @property --nave-motion-duration-base {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 200ms;
+  }
+
+  @property --nave-motion-duration-slow {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 400ms;
+  }
+
+/**
+ * Token values scoped under @layer tokens.defaults.
+ * Override in @layer overrides — no specificity battles, ever.
+ */
+@layer tokens.defaults {
+  :root {
+    --nave-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --nave-font-family-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --nave-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
+    --nave-font-size-xs: 0.75rem;
+    --nave-font-size-sm: 0.875rem;
+    --nave-font-size-md: 1rem;
+    --nave-font-size-lg: 1.125rem;
+    --nave-font-size-xl: 1.25rem;
+    --nave-font-size-2xl: 1.5rem;
+    --nave-font-size-3xl: 1.875rem;
+    --nave-font-size-4xl: 2.25rem;
+    --nave-font-weight-regular: 400;
+    --nave-font-weight-medium: 500;
+    --nave-font-weight-semibold: 600;
+    --nave-font-weight-bold: 700;
+    --nave-line-height-none: 1;
+    --nave-line-height-tight: 1.2;
+    --nave-line-height-snug: 1.375;
+    --nave-line-height-base: 1.5;
+    --nave-line-height-relaxed: 1.625;
+    --nave-line-height-loose: 2;
+    --nave-letter-spacing-tight: -0.025em;
+    --nave-letter-spacing-normal: 0em;
+    --nave-letter-spacing-wide: 0.075em;
+    --nave-spacing-content-xs: 4px;
+    --nave-spacing-content-sm: 8px;
+    --nave-spacing-content-md: 16px;
+    --nave-spacing-content-lg: 24px;
+    --nave-spacing-content-xl: 32px;
+    --nave-spacing-layout-xs: 48px;
+    --nave-spacing-layout-sm: 64px;
+    --nave-spacing-layout-md: 96px;
+    --nave-spacing-layout-lg: 128px;
+    --nave-spacing-control-xs: 4px;
+    --nave-spacing-control-sm: 6px;
+    --nave-spacing-control-md: 8px;
+    --nave-spacing-control-lg: 12px;
+    --nave-size-control-xs: 1.5rem;
+    --nave-size-control-sm: 2rem;
+    --nave-size-control-md: 2.5rem;
+    --nave-size-control-lg: 3rem;
+    --nave-size-icon-xs: 0.75rem;
+    --nave-size-icon-sm: 1rem;
+    --nave-size-icon-md: 1.25rem;
+    --nave-size-icon-lg: 1.5rem;
+    --nave-size-icon-xl: 2rem;
+    --nave-size-avatar-sm: 1.5rem;
+    --nave-size-avatar-md: 2rem;
+    --nave-size-avatar-lg: 3rem;
+    --nave-border-width-none: 0px;
+    --nave-border-width-sm: 1px;
+    --nave-border-width-focus: 2px;
+    --nave-border-width-mark: 2px;
+    --nave-border-width-lg: 4px;
+    --nave-radius-none: 0px;
+    --nave-radius-sm: 4px;
+    --nave-radius-control: 6px;
+    --nave-radius-card: 12px;
+    --nave-radius-overlay: 12px;
+    --nave-radius-full: 9999px;
+    --nave-shadow-none: none;
+    --nave-shadow-raised: 0px 0.0625rem 0.1875rem 0px oklch(0 0 0 / 0.08), 0px 0.0625rem 0.125rem 0px oklch(0 0 0 / 0.06);
+    --nave-shadow-overlay: 0px 0.25rem 0.75rem 0px oklch(0 0 0 / 0.1), 0px 0.125rem 0.375rem 0px oklch(0 0 0 / 0.08);
+    --nave-shadow-modal: 0px 1rem 2rem 0px oklch(0 0 0 / 0.15), 0px 0.5rem 1rem 0px oklch(0 0 0 / 0.1);
+    --nave-opacity-disabled: 0.4;
+    --nave-layer-base: 0;
+    --nave-layer-dropdown: 100;
+    --nave-layer-sticky: 200;
+    --nave-layer-overlay: 300;
+    --nave-layer-modal: 400;
+    --nave-layer-toast: 500;
+    --nave-layer-tooltip: 600;
+    --nave-motion-duration-instant: 0ms;
+    --nave-motion-duration-fast: 100ms;
+    --nave-motion-duration-base: 200ms;
+    --nave-motion-duration-slow: 400ms;
+    --nave-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --nave-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+    --nave-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  }
+
+  /**
+   * Collapse all motion durations for users who prefer reduced motion.
+   * Any component using --nave-motion-duration-* gets this for free.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --nave-motion-duration-fast: 0.01ms;
+      --nave-motion-duration-base: 0.01ms;
+      --nave-motion-duration-slow: 0.01ms;
+    }
+  }
+}
+
+/* Nave theming — generated, do not edit. See the @navecss/tokens README ("Theming"). */
+
+@property --nave-color-tint {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.7859 0.1316 186.17);
+}
+
+@layer tokens.defaults {
+  :root {
+    /* color-scheme lives here, not in @navecss/core's reset, so
+     * light-dark() resolves even for a tokens-only consumer. */
+    color-scheme: light dark;
+    /* Tint seed: Changing this changes everything Nave derives from it. The contrast of the resulting palette follows from what you set, and checking it is yours. */
+    --nave-color-tint: oklch(0.7859 0.1316 186.17);
+    --nave-color-surface-base: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    --nave-color-surface-raised: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.225 0.0067 h / 1));
+    --nave-color-surface-overlay: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1));
+    --nave-color-surface-sunken: light-dark(oklch(from var(--nave-color-tint) 0.985 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.12 0.0067 h / 1));
+    --nave-color-surface-inverse: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1));
+    --nave-color-content-primary: light-dark(oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1));
+    --nave-color-content-secondary: light-dark(oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-content-tertiary: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.72 0.0067 h / 1));
+    --nave-color-content-disabled: light-dark(oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1));
+    --nave-color-content-inverse: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    --nave-color-content-link: light-dark(oklch(0.47 0.0748 186.17), oklch(0.835 0.123 186.17));
+    --nave-color-border-default: light-dark(oklch(from var(--nave-color-tint) 0.905 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.37 0.0067 h / 1));
+    --nave-color-border-strong: light-dark(oklch(from var(--nave-color-tint) 0.72 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1));
+    --nave-color-border-control: light-dark(oklch(from var(--nave-color-tint) 0.59 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.59 0.0067 h / 1));
+    --nave-color-border-disabled: light-dark(oklch(from var(--nave-color-tint) 0.94 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1));
+    --nave-color-border-focus: light-dark(oklch(0.59 0.0939 186.17), oklch(0.59 0.0939 186.17));
+    --nave-color-action-primary: light-dark(oklch(0.47 0.0748 186.17), oklch(0.835 0.123 186.17));
+    --nave-color-action-primary-hover: light-dark(oklch(0.37 0.0589 186.17), oklch(0.905 0.1106 186.17));
+    --nave-color-action-primary-active: light-dark(oklch(0.27 0.0398 186.17), oklch(0.94 0.0574 186.17));
+    --nave-color-on-action-primary: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    --nave-color-action-secondary: light-dark(oklch(from var(--nave-color-tint) 0.965 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.27 0.0067 h / 1));
+    --nave-color-feedback-danger: light-dark(oklch(0.47 0.1455 15.02), oklch(0.835 0.0661 15.02));
+    --nave-color-feedback-danger-foreground: light-dark(oklch(0.47 0.1455 15.02), oklch(0.835 0.0661 15.02));
+    --nave-color-on-feedback-danger: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    /* Feedback tokens: warning, success and info, and their -foreground variants, resolve to one shared value here; only danger differs. Colour alone therefore cannot tell those three states apart, so wherever a feedback token carries meaning, give it a text label naming the state and a distinct icon or shape that differs per state. */
+    --nave-color-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-feedback-warning-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-on-feedback-warning: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    --nave-color-feedback-success: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-feedback-success-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-on-feedback-success: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+    --nave-color-feedback-info: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-feedback-info-foreground: light-dark(oklch(from var(--nave-color-tint) 0.47 0.0067 h / 1), oklch(from var(--nave-color-tint) 0.835 0.0067 h / 1));
+    --nave-color-on-feedback-info: light-dark(oklch(from var(--nave-color-tint) 1 0 h / 1), oklch(from var(--nave-color-tint) 0.18 0.0067 h / 1));
+  }
+}
+
+/* Reset layer. Imported plain: dist/reset.css now declares its own
+ * `@layer reset` so that consumers importing ./reset directly are layered
+ * correctly too. Adding layer(reset) here would nest it a second time. */
+/*
+ * Self-layered under @layer reset: this file ships as a published
+ * subpath export (./reset) and is imported directly by some consumers, so
+ * the layer guarantee has to be a property of the artifact rather than of
+ * index.css's import site.
+ */
+@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;
+
+@layer reset {
+  /*
+   * Nave Reset — opinionated modern cross-browser reset.
+   * Every rule fixes a real, documented cross-browser inconsistency.
+   * Tokens are available here because @layer tokens is declared first.
+   */
+
+  /* ── Box model ───────────────────────────────────────────────────────────────
+   * Border-box everywhere. The alternative is layout math errors.
+   */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* ── Root ────────────────────────────────────────────────────────────────────
+   * 1. Stop Safari on iPhone enlarging body text by itself (for example on an orientation
+   *    change), so a Nave layout renders at the size it declares. Safari reads only the
+   *    -webkit- prefixed property; the unprefixed one is the standard spelling. This does not
+   *    take away a reader's own text-size setting in Safari, in Chrome from version 143, in
+   *    Android WebView from version 145, or in Firefox: each applies that setting whatever the
+   *    value here. Chrome no longer autosizes text, and Firefox for Android accepts only auto
+   *    or none here, so it ignores this declaration. -moz-text-size-adjust is left out on
+   *    purpose: none, its only opt-out value, would switch off Firefox's own font inflation.
+   *    The value is 100%, the convention normalize.css set; on iPad and in Firefox, none
+   *    would not behave the same.
+   * 2. Smooth scroll — reduced motion override is at the bottom of this file.
+   * 3. hanging-punctuation: Safari only, progressive enhancement.
+   *    Punctuation hangs outside the text box correctly.
+   * 4. Font smoothing: prefer grayscale AA on macOS/iOS.
+   *    subpixel-antialiased is less consistent across displays.
+   * 5. text-rendering: optimizelegibility — enables kerning and ligatures in Firefox and
+   *    Safari; a no-op elsewhere. Unrelated to font-size inflation (1); kept as its own number.
+   */
+  html {
+    -webkit-font-smoothing: antialiased; /* 4 */
+    -moz-osx-font-smoothing: grayscale; /* 4 */
+    hanging-punctuation: first last; /* 3 */
+    scroll-behavior: smooth; /* 2 */
+    text-rendering: optimizelegibility; /* 5 */
+    -webkit-text-size-adjust: 100%; /* 1 */
+    text-size-adjust: 100%; /* 1 */
+  }
+
+  /* ── Body ────────────────────────────────────────────────────────────────────
+   * min-height: 100dvh — dynamic viewport height.
+   * Fixes iOS Safari bottom bar eating into 100vh layouts.
+   * dvh is Baseline 2023, safe for all modern browsers.
+   */
+  body {
+    background-color: var(--nave-color-surface-base);
+    color: var(--nave-color-content-primary);
+    font-family: var(--nave-font-family-base);
+    font-size: var(--nave-font-size-md);
+    line-height: var(--nave-line-height-base);
+    margin: 0;
+    min-height: 100dvh;
+  }
+
+  /* ── Remove default margins ──────────────────────────────────────────────────
+   * Browsers apply inconsistent margins to these elements.
+   * Spacing is a layout concern, not an element default.
+   */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd,
+  pre {
+    margin: 0;
+  }
+
+  /* ── Lists ───────────────────────────────────────────────────────────────────
+   * Only remove list styles when role="list" is present.
+   * VoiceOver (Safari) removes list semantics when list-style is removed.
+   * Adding role="list" signals intentional non-list usage to the browser.
+   * Pattern: Scott O'Hara / Andy Bell.
+   */
+  ul[role='list'],
+  ol[role='list'] {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ── Headings ─────────────────────────────────────────────────────────────────
+   * 1. Tighter line-height — body line-height is too loose for headings.
+   * 2. text-wrap: balance — prevents single orphan words on the last line.
+   *    Baseline since May 2024 (Chrome 114, Firefox 121, Safari 17.5), so it is
+   *    inside the browser floor (ADR 0005) and applies everywhere Nave supports.
+   */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--nave-font-family-display);
+    font-weight: var(--nave-font-weight-bold);
+    line-height: var(--nave-line-height-tight); /* 1 */
+    overflow-wrap: break-word;
+    text-wrap: balance; /* 2 */
+  }
+
+  /* ── Paragraphs ───────────────────────────────────────────────────────────────
+   * text-wrap: pretty — optimises last 4 lines, prevents orphans.
+   * Chrome and Edge 117+, Safari 26+, not yet Firefox. Past the browser floor, so
+   * progressive enhancement: without it, paragraphs wrap normally (ADR 0005).
+   */
+  p {
+    overflow-wrap: break-word;
+    text-wrap: pretty;
+  }
+
+  /* ── Overflow wrap ────────────────────────────────────────────────────────────
+   * Prevents long words / URLs from breaking layouts.
+   */
+  li,
+  figcaption,
+  dt,
+  dd {
+    overflow-wrap: break-word;
+  }
+
+  /* ── Replaced elements ────────────────────────────────────────────────────────
+   * display: block removes phantom baseline space under images.
+   *   Caused by inline baseline alignment — one of CSS's oldest layout bugs.
+   * height: auto maintains aspect ratio when width is constrained.
+   */
+  img,
+  picture,
+  video,
+  canvas {
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
+
+  /* ── SVG ──────────────────────────────────────────────────────────────────────
+   * SVGs without an explicit fill inherit the parent text color.
+   * Controls icon color via CSS color — no fill attribute required.
+   */
+  svg {
+    display: block;
+  }
+
+  svg:not([fill]) {
+    fill: currentcolor;
+  }
+
+  /* ── Figcaption ───────────────────────────────────────────────────────────────
+   * Safari applies font-style: italic to figcaption by default.
+   */
+  figcaption {
+    font-style: normal;
+  }
+
+  /* ── Forms ───────────────────────────────────────────────────────────────────
+   * font: inherit — all browsers apply their own font to form controls,
+   *   ignoring the cascade. This is the most important form reset rule.
+   * letter-spacing / word-spacing: inherit — Safari ignores these on inputs.
+   */
+  input,
+  button,
+  textarea,
+  select,
+  optgroup {
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    word-spacing: inherit;
+  }
+
+  /* ── Buttons ──────────────────────────────────────────────────────────────────
+   * Strip all browser button chrome, from <button> and every button-like <input>.
+   * The text-input rule below also unsets appearance/background for
+   * input[type=submit|reset|button] (it excludes only checkbox/radio/range), but leaves the
+   * UA's own outset border since it never targeted the button rule's selector; listed here too
+   * so all four get the same border: none.
+   * The three input types are wrapped in :where() so they carry zero specificity, same as a
+   * bare `button` selector: without it, `input[type='submit']` etc. sit at (0,1,1), which beats
+   * the Disabled rule's `[disabled], [aria-disabled='true']` at (0,1,0) and makes this rule's
+   * `cursor: pointer` win on a disabled button-like input even though the Disabled rule runs
+   * later in the file. :where() keeps this rule at (0,0,1), so the Disabled rule's cursor still
+   * wins, and a consumer overriding button chrome never needs a specificity escalation either.
+   * This rule is placed before the text-input rule below (rather than after, its previous
+   * position) because a (0,0,1) selector following a (0,1,1) one that can match the same element
+   * (a submit/reset/button input matches both) is a descending-specificity smell the linter
+   * flags; placing the lower-specificity rule first avoids that without changing which
+   * declaration wins for any element — specificity, not source order, still decides.
+   * Nave component styles define all button appearance explicitly.
+   */
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']) {
+    appearance: none;
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    padding: 0;
+  }
+
+  /* ── Text inputs & textareas ──────────────────────────────────────────────────
+   * 1. Removes iOS Safari grey background on inputs.
+   * 2. appearance: none removes Safari's rounded pill input style. Unprefixed
+   *    (Baseline) rather than -webkit-appearance.
+   * 3. border-radius: 0 — iOS Safari rounds inputs regardless of appearance.
+   * Scoped to text-like inputs and textarea only (excludes checkbox, radio,
+   * range, and select) — a bare `input` or `select` selector here would strip
+   * native rendering from checkboxes/radios (invisible empty boxes) and the
+   * select dropdown indicator.
+   */
+  input:not([type='checkbox'], [type='radio'], [type='range']),
+  textarea {
+    /* 2 */
+    appearance: none; /* 2 */
+    background-color: transparent; /* 1 */
+    border-radius: 0; /* 3 */
+  }
+
+  /* ── Links ────────────────────────────────────────────────────────────────────
+   * color: inherit — link color is a design decision, not a browser default.
+   * text-decoration-skip-ink: prevents underline from clipping descenders (g, y, p).
+   */
+  a {
+    color: inherit;
+    text-decoration-skip-ink: auto;
+  }
+
+  /* ── Tables ───────────────────────────────────────────────────────────────────
+   * border-collapse: collapse removes double borders between cells.
+   * border-color: inherit — Firefox bug where table borders don't inherit color.
+   */
+  table {
+    border-collapse: collapse;
+    border-color: inherit;
+  }
+
+  /* ── Code ─────────────────────────────────────────────────────────────────────
+   * font-size: 1em — browsers render code at ~13px by default. This overrides it.
+   */
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--nave-font-family-mono);
+    font-size: 1em;
+  }
+
+  /* ── Horizontal rule ──────────────────────────────────────────────────────────
+   * Chrome and Firefox disagree on hr height and border rendering.
+   * border: none clears the UA default first — Chrome leaves border-bottom-width: 1px,
+   * border-left-width: 1px and border-bottom-style: inset when only border-top is set,
+   * rendering a three-sided box under the token-coloured top border. border-top then
+   * normalises to a single 1px line.
+   */
+  hr {
+    border: none;
+    border-top: var(--nave-border-width-sm) solid var(--nave-color-border-default);
+    color: inherit;
+    height: 0;
+  }
+
+  /* ── Hidden attribute ─────────────────────────────────────────────────────────
+   * display: flex / grid overrides [hidden] in some browsers.
+   * !important is correct here — [hidden] must always mean hidden — except
+   * hidden="until-found": excluded via :where() (contributes zero specificity, so the
+   * selector stays exactly as specific as plain [hidden]), so find-in-page can still reveal it.
+   * The `i` flag makes the attribute-value match case-insensitive: `hidden` is an HTML
+   * enumerated attribute, whose keywords (including "until-found") are matched ASCII
+   * case-insensitively by the spec, and a browser resolving hidden="UNTIL-FOUND" into the
+   * until-found state must not fall through to this !important display: none.
+   */
+  [hidden]:where(:not([hidden='until-found' i])) {
+    display: none !important;
+  }
+
+  /* ── Disabled ─────────────────────────────────────────────────────────────────
+   * Consistent disabled cursor across all interactive elements.
+   */
+  [disabled],
+  [aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  /* ── Focus ───────────────────────────────────────────────────────────────────
+   * The reset does not remove the user agent's focus indicator, and it does
+   * not replace it either. That is a statement about what Nave declines to
+   * do: no rule here strips outline from a selector that is not itself gated
+   * on :focus-visible, and no rule here ships an author-styled indicator at
+   * document scope. The user-agent default is the baseline. Consumers who
+   * want a different treatment override it via the @layer contract (reset
+   * sits early; every consumer layer wins over it).
+   */
+
+  /* ── Color scheme ─────────────────────────────────────────────────────────────
+   * `color-scheme` is now emitted by the TOKENS layer (`@navecss/tokens`, which
+   * ships full light+dark values via `light-dark()`), not by this reset. A
+   * declaration here would win over anything the tokens package emits
+   * (`@layer tokens` loads before `@layer reset`), which would make
+   * `light-dark()` inert and leave a tokens-only consumer (a documented tier) with
+   * no dark mode at all. Do not reintroduce a `color-scheme` declaration here.
+   */
+
+  /* ── Reduced motion ───────────────────────────────────────────────────────────
+   * Belt-and-suspenders alongside the token-level reduced motion in tokens.css.
+   * Catches animations not using Nave tokens (third-party, consumer code).
+   * 0.01ms, not 0ms — avoids triggering animationend event bugs in some browsers.
+   * The four !important flags are DELIBERATE. Important declarations reverse
+   * cascade-layer order, so these beat a consumer's own !important in any later
+   * layer; without them a universal-selector rule in an early layer loses to
+   * almost anything, and the collapse would be inert over exactly the
+   * third-party and consumer motion it exists to reach. The cost is accepted
+   * knowingly: a consumer who wants a GENTLER reduced-motion treatment rather
+   * than none cannot have one here, because their shorter duration is
+   * clobbered too. This is a deliberate exception to Nave's otherwise-
+   * overridable defaults, not an oversight. Do not remove the flags; if you
+   * think the trade is wrong, open an issue rather than editing them out.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* Atomic layer. Imported plain: dist/atomic.css now declares its own
+ * `@layer atomic` so that consumers importing ./atomic directly are
+ * layered correctly too. Adding layer(atomic) here would nest it a second
+ * time. */
+/*
+ * Nave atomic utilities — generated from src/atoms.ts
+ * Do not edit directly. Run `pnpm build` in packages/core to regenerate.
+ *
+ * Primary path:  .root { @nave interactive focusRing; }  (postcss plugin)
+ * Escape hatch:  `${cx('interactive', 'focusRing')} ${styles.root}`
+ *
+ * Classes are global, namespaced with nave- prefix.
+ * Consumer atoms (navePlugin extend) are NOT included —
+ * they are resolved inline by the PostCSS plugin only.
+ *
+ * Self-layered under @layer atomic: this file ships as a published subpath
+ * export (./atomic) and is imported directly by some consumers, so the
+ * layer guarantee has to be a property of the artifact rather than of
+ * index.css's import site.
+ */
+
+@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;
+
+@layer atomic {
+  .nave-flex {
+    display: flex;
+  }
+
+  .nave-inline-flex {
+    display: inline-flex;
+  }
+
+  .nave-grid {
+    display: grid;
+  }
+
+  .nave-block {
+    display: block;
+  }
+
+  .nave-inline-block {
+    display: inline-block;
+  }
+
+  .nave-hidden {
+    display: none;
+  }
+
+  .nave-flex-col {
+    flex-direction: column;
+  }
+
+  .nave-flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .nave-items-center {
+    align-items: center;
+  }
+
+  .nave-items-start {
+    align-items: flex-start;
+  }
+
+  .nave-items-end {
+    align-items: flex-end;
+  }
+
+  .nave-justify-center {
+    justify-content: center;
+  }
+
+  .nave-justify-between {
+    justify-content: space-between;
+  }
+
+  .nave-justify-end {
+    justify-content: flex-end;
+  }
+
+  .nave-flex-grow {
+    flex-grow: 1;
+  }
+
+  .nave-flex-shrink0 {
+    flex-shrink: 0;
+  }
+
+  .nave-gap {
+    gap: var(--nave-spacing-content-md);
+  }
+
+  .nave-relative {
+    position: relative;
+  }
+
+  .nave-absolute {
+    position: absolute;
+  }
+
+  .nave-inset-full {
+    inset: 0;
+  }
+
+  .nave-w-full {
+    width: 100%;
+  }
+
+  .nave-h-full {
+    height: 100%;
+  }
+
+  .nave-min-w0 {
+    min-width: 0;
+  }
+
+  .nave-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nave-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .nave-sr-only-focusable {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+
+    &:focus-visible {
+      position: static;
+      width: auto;
+      height: auto;
+      margin: 0;
+      overflow: visible;
+      clip-path: none;
+      white-space: normal;
+    }
+
+    &:focus-within {
+      position: static;
+      width: auto;
+      height: auto;
+      margin: 0;
+      overflow: visible;
+      clip-path: none;
+      white-space: normal;
+    }
+  }
+
+  .nave-no-wrap {
+    white-space: nowrap;
+  }
+
+  .nave-break-word {
+    overflow-wrap: break-word;
+  }
+
+  .nave-text-left {
+    text-align: left;
+  }
+
+  .nave-text-center {
+    text-align: center;
+  }
+
+  .nave-text-right {
+    text-align: right;
+  }
+
+  .nave-interactive {
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .nave-focus-ring {
+    outline: none;
+
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: var(--nave-border-width-focus, 2px);
+      outline-color: var(--nave-color-border-focus, currentColor);
+      outline-offset: 2px;
+    }
+  }
+
+  .nave-disabled-state {
+    &:disabled, &[aria-disabled="true"] {
+      color: var(--nave-color-content-disabled);
+      border-color: var(--nave-color-border-disabled);
+      pointer-events: none;
+    }
+  }
+
+  .nave-rounded {
+    border-radius: var(--nave-radius-control);
+  }
+
+  .nave-rounded-card {
+    border-radius: var(--nave-radius-card);
+  }
+
+  .nave-rounded-full {
+    border-radius: var(--nave-radius-full);
+  }
+
+  .nave-border {
+    border: var(--nave-border-width-sm) solid var(--nave-color-border-default);
+  }
+
+  .nave-overflow-hidden {
+    overflow: hidden;
+  }
+
+  .nave-overflow-auto {
+    overflow: auto;
+  }
+
+  .nave-transition {
+    transition-property: color, background-color, border-color, opacity, box-shadow;
+    transition-duration: var(--nave-motion-duration-base);
+    transition-timing-function: var(--nave-motion-easing-standard);
+  }
+
+  .nave-container {
+    container-type: inline-size;
+  }
+
+  .nave-hide-phone-only {
+    @media (width < 37.5em) {
+      & {
+        display: none;
+      }
+    }
+  }
+
+  .nave-hide-tablet-portrait-up {
+    @media (width >= 37.5em) {
+      & {
+        display: none;
+      }
+    }
+  }
+
+  .nave-hide-tablet-landscape-up {
+    @media (width >= 56.25em) {
+      & {
+        display: none;
+      }
+    }
+  }
+
+  .nave-hide-desktop-up {
+    @media (width >= 75em) {
+      & {
+        display: none;
+      }
+    }
+  }
+
+  .nave-stack-phone-only {
+    @media (width < 37.5em) {
+      & {
+        flex-direction: column;
+      }
+    }
+  }
+
+  .nave-w-full-phone-only {
+    @media (width < 37.5em) {
+      & {
+        width: 100%;
+      }
+    }
+  }
+}