actual-css 0.9.2 → 0.10.0

package/dist/actual.css

@@ -1,876 +0,0 @@
-/* Core — the minimal Actual language. Every module depends on this order. */
-/* Mild reset: useful defaults without classless magic. */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  -webkit-text-size-adjust: 100%;
-}
-
-body {
-  margin: 0;
-}
-
-button,
-input,
-textarea,
-select {
-  font: inherit;
-}
-
-[hidden]:not([hidden="until-found"]) {
-  display: none !important;
-}
-
-:where(img, svg, video) {
-  max-inline-size: 100%;
-  block-size: auto;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto !important;
-  }
-
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-delay: 0s !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    transition-delay: 0s !important;
-  }
-}
-
-:root {
-  /*
-   * Global framework tokens.
-   *
-   * Public: properties in the named groups below are public API (typography,
-   * spacing, shape, motion, focus, controls, viewport, z-index, icons) unless
-   * a group is explicitly marked Internal or Derived.
-   *
-   * Derived: "Theme-derived aliases" and "State tokens" reference intent and
-   * surface tokens and follow the theme; do not hard-code values into them.
-   * Internal: indicator offsets, --disabled-opacity and the like are
-   * consumed by components, not authored.
-   *
-   * Component-local hooks and internal state relays live with their
-   * components. See docs/pages/foundations/tokens.md for the public/internal
-   * token contract.
-   */
-
-  /* Typography */
-  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --font-width: 100%;
-  --font-width-dense: 95%;
-  --line-height: 1.5;
-  --line-height-tight: 1.25;
-  --line-height-relaxed: 1.75;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* Typography scale */
-  --font-size-xs: 0.8125rem;
-  --font-size-sm: 0.875rem;
-  --font-size-md: 1rem;
-  --font-size-lg: 1.125rem;
-
-  /* Spacing — official steps are named in tens so the scale stays open.
-     Actual CSS will never define a --space-* that is not a multiple of 10:
-     the intermediate names (--space-15, --space-45…) are reserved for
-     applications, and no future framework step can collide with them. */
-  --gap: 0.75rem;
-  --density-space: var(--space-40);
-  --space-10: 0.25rem;
-  --space-20: 0.5rem;
-  --space-30: 0.75rem;
-  --space-40: 1rem;
-  --space-50: 1.5rem;
-  --space-60: 2rem;
-
-  /* Shape */
-  --border-width: 1px;
-  --radius-full: 9999px;
-  --shadow: 0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04);
-  --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
-
-  /* Motion — see reset.css for the prefers-reduced-motion hard reset.
-     --duration scales component transitions (hover/focus); the dedicated
-     animation rates below tune one-shot open/close and decorative loops.
-     Generic state/interaction motion uses the CSS default `ease` directly
-     (registered nowhere). --ease-enter/--ease-exit express the character of
-     one-shot presence changes, owned by the open/closed state rules that
-     separate them (status-bar, drawer, modal). The pair follows the standard
-     M3 rhythm; the more aggressive emphasized-decelerate entrance is
-     deliberately not offered because it only pays off on 250–400ms motions,
-     beyond this vocabulary. Toggles that share one transition list at
-     --duration-fast (flyout, tooltip) and pure-opacity backdrops stay on
-     `ease`: at 100ms the curve has almost no resolving time, and a scrim is
-     not traveling anywhere. Animation policy: reset.css is the global safety
-     net; every meaningful @keyframes is explicitly gated behind
-     prefers-reduced-motion: no-preference; ordinary transitions rely on the
-     reset alone. */
-  --duration: 150ms;
-  --duration-fast: 100ms;
-  --duration-slow: 200ms;
-  --duration-spin: 0.75s;
-  --duration-shimmer: 1.2s;
-  --ease-enter: cubic-bezier(0.2, 0, 0, 1);
-  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
-
-  /* Focus ring — shared by every interactive component's :focus-visible */
-  --focus-outline-color: currentColor;
-  --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color);
-  --focus-outline-offset: 2px;
-  --focus-ring-width: 3px;
-
-  /* Status dot positioning — used by .avatar > .badge:empty. The offset is
-     the circle-aware inset (1 - 1/√2) / 2 ≈ 14.65%; the ring surrounds the
-     dot with the parent surface color. */
-  --indicator-offset: 14.65%;
-
-  /* Shared backdrop — consumed by modal, drawer, and mobile flyout sheets. */
-  --backdrop-color: rgb(0 0 0);
-  --backdrop-opacity: 0.45;
-  --backdrop-fill: rgb(0 0 0 / var(--backdrop-opacity));
-
-  /* Bar thickness shared by .progress and .meter — two conceptual variants of
-     the same geometry. Public: set it on the element or on an application
-     class rather than reaching for a size variant. */
-  --bar-height: 0.65rem;
-
-  /* Controls — inputs and buttons share --control-size so heights always match.
-     .compact/.spacious (variants.css) switch geometry without changing
-     --control-font-size. Local .sm/.lg component sizes switch all three.
-
-     Inline choices (checkbox, radio, switch) are typographic, not field-sized:
-     they sit on a line of text, so they follow --control-font-size through
-     --choice-control-size instead of --control-size. Being an em value in
-     :root is deliberate — an unregistered custom property resolves its units
-     at the element that consumes it, so one declaration tracks whatever font
-     size the choice actually renders at.
-
-     --control-pad-x is the opposite kind of token: a resolved geometry length,
-     not an em ratio. Every part of one control must see the same horizontal
-     distance, so it is stated in the typographic tokens rather than an em
-     whose value would change on a descendant with its own font size (the
-     input-icon glyph, made larger by --input-icon-size). It mirrors
-     --control-font-size and is rebound beside it at the .sm/.lg boundaries
-     (variants.css); declaring it only in :root would freeze the md value,
-     because a var() inside a custom property resolves where it is declared. */
-  --control-size-sm: 2rem;
-  --control-size-md: 2.375rem;
-  --control-size-lg: 2.75rem;
-  --control-size: var(--control-size-md);
-  --control-pad-x: var(--font-size-md);
-  --control-font-size: var(--font-size-md);
-  --choice-control-size: 1.125em;
-  --disabled-opacity: 0.65;
-}
-
-/* Theme-derived aliases. These reference intent/surface tokens, so they must
-   be re-declared on every theme boundary: a custom property resolves its
-   var() references at computed-value time on the element that declares it,
-   so an alias declared only on :root is inherited as an already-resolved
-   value and would not follow a [data-theme] island's overridden tokens.
-   Themes that want a distinct alias override it explicitly afterwards. */
-:root,
-[data-theme] {
-  /* State tokens — semantic colors for selected/pressed/current and disabled.
-     Components consume these instead of hard-wiring --primary/--text-subtle
-     so forced-colors can override them in one place. */
-  --state-selected: var(--primary);
-  --state-selected-fg: var(--primary-fg);
-  --state-disabled: var(--text-subtle);
-
-  /* Status dot ring — follows the island's surface. */
-  --indicator-ring: var(--surface);
-}
-
-:root {
-  /* Variant tuning — themes may adjust generated soft surfaces without
-     replacing the component rules. */
-  --soft-bg-mix: 88%;
-  --soft-border-mix: 65%;
-  --soft-hover-alpha: 12%;
-  /* Soft foreground: the share of raw intent in soft text. 100% keeps the
-     pure intent color; lower values rebate it toward --text, which vivid or
-     light intent palettes need to stay legible on their own soft surface.
-     The default palette ships per-role --*-soft-fg hooks calibrated against
-     the hovered soft fill instead (theme.css); this mix is the fallback a
-     theme without hooks falls back to. */
-  --soft-fg-mix: 100%;
-
-  /* Shared icon assets. Override these URLs when a strict CSP disallows data:. */
-  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
-  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
-
-  /* Viewport size tokens — fallback vh/vw with dvh/vi enhancement.
-     Consumed by full-viewport components (app-shell, drawer, modal, flyout).
-     Custom properties keep the fallback explicit while allowing modern units
-     to enhance the same public tokens. */
-  --viewport-block: 100vh;
-  --viewport-inline: 100vw;
-
-  /* Z-index scale — orders document-layer components only. Native top-layer
-     elements, dialogs and popovers alike, do not participate in this ordering:
-     they always paint above the document, and their order among themselves is
-     their top-layer promotion order. No z-index value here can reach them.
-     Actual CSS reserves multiples of 10 for framework layers; applications may
-     use intermediate values for local layering. */
-  --z-sticky: 10;
-  --z-menu: 20;
-  --z-status: 60;
-}
-
-@media (forced-colors: active) {
-  :root,
-  [data-theme] {
-    --state-disabled: GrayText;
-    --disabled-opacity: 1;
-  }
-}
-
-@supports (block-size: 100dvh) {
-  :root {
-    --viewport-block: 100dvh;
-  }
-}
-
-@supports (inline-size: 100vi) {
-  :root {
-    --viewport-inline: 100vi;
-  }
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  :root,
-  [data-theme] {
-    /* Shadows derive from --shadow-color (theme.css) — re-declared on every
-       theme boundary so islands follow their own shadow-color. */
-    --shadow:
-      0 1px 3px color-mix(in oklch, var(--shadow-color) 5%, transparent),
-      0 4px 12px color-mix(in oklch, var(--shadow-color) 4%, transparent);
-    --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent);
-  }
-
-  /* Theme-derived like the shadows above, so it is declared on the same
-     boundaries: an alias resolved only on :root is inherited already composed,
-     and a [data-theme] island overriding --backdrop-color or
-     --backdrop-opacity would not change the scrim of a dialog inside it. */
-  :root,
-  [data-theme] {
-    --backdrop-fill: color-mix(
-      in oklch,
-      var(--backdrop-color) calc(var(--backdrop-opacity) * 100%),
-      transparent
-    );
-  }
-}
-
-/*
- * Theme tokens — the palette, surfaces, text, borders, radius and shadow
- * color. Named themes (themes/*.css) override this file; authors can set the
- * same tokens on :root or on [data-theme="…"] islands.
- *
- * Public: Intent colors, Surfaces, Text, Lines and focus, Radius scale,
- * Shadow color, Focus ring derivation.
- * Derived: "Theme-derived aliases", Tone subsystem, Backdrop fill — reference
- * other tokens; hard-coded overrides on a custom theme will break the intent.
- * Internal: --hgroup-gap.
- */
-:root {
-  color-scheme: light dark;
-}
-
-[data-theme="light"] {
-  color-scheme: light;
-}
-
-[data-theme="dark"] {
-  color-scheme: dark;
-}
-
-/* Dark mode is progressive enhancement via light-dark(). Older browsers get
-   the light fallback rather than a partially dark native color scheme over
-   light tokens. */
-@supports not (color: light-dark(red, blue)) {
-  :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
-    color-scheme: light;
-  }
-}
-
-/* Default palette — "ink & terra": aubergine primary, terracotta secondary,
-   pigment-toned statuses (sage, ochre, brick) tuned to equal perceived weight.
-   The neutral ramp (text, borders, subtle surfaces) is tinted toward the
-   primary hue (~260) so the whole page carries the identity, quietly. */
-
-/* Light fallback — also the default on browsers without light-dark() support. */
-:root,
-[data-theme="light"] {
-  /* Intent colors */
-  --primary: hsl(268 32% 33%);
-  --primary-fg: hsl(0 0% 98%);
-
-  --secondary: hsl(16 38% 38%);
-  --secondary-fg: hsl(0 0% 98%);
-
-  --success: hsl(150 40% 31%);
-  --success-fg: hsl(0 0% 98%);
-
-  --warning: hsl(36 68% 34%);
-  --warning-fg: hsl(0 0% 98%);
-
-  --danger: hsl(5 58% 43%);
-  --danger-fg: hsl(0 0% 98%);
-
-  --neutral: hsl(258 7% 43%);
-  --neutral-fg: hsl(0 0% 98%);
-
-  /* Surfaces */
-  --surface: hsl(0 0% 100%);
-  --surface-raised: hsl(0 0% 100%);
-  --surface-subtle: hsl(262 24% 96%);
-  --surface-solid: hsl(261 16% 13%);
-
-  /* Text */
-  --text: hsl(261 20% 13%);
-  --text-muted: hsl(259 9% 42%);
-  --text-subtle: hsl(258 7% 57%);
-
-  /* Lines and focus */
-  --border: hsl(260 15% 88%);
-  --focus: var(--neutral);
-  /* Pre-color-mix fallback only — superseded below by a derivation from
-     --focus so overriding --neutral/--focus never leaves a stale ring. */
-  --focus-ring: hsl(258 7% 43% / 0.3);
-  --hover-overlay: hsl(260 20% 10% / 0.04);
-
-  /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
-  --radius: 0.5rem;
-  --radius-sm: 0.25rem;
-  --radius-lg: 0.75rem;
-
-  /* Shadow color — consumed by --shadow / --shadow-popout in tokens.css */
-  --shadow-color: hsl(260 25% 10%);
-
-  /* hgroup internal gap */
-  --hgroup-gap: 0.25em;
-}
-
-/* Theme-derived aliases — re-declared on every theme boundary (see tokens.css
-   for the custom-property resolution rationale): islands recompute these from
-   their own tokens instead of inheriting :root's resolved values. */
-:root,
-[data-theme] {
-  --heading: var(--text);
-  --selection-bg: var(--primary);
-  --selection-fg: var(--primary-fg);
-  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-}
-
-/* Soft foreground hooks — the soft ink is the intent rebated toward the local
-   text so it keeps 4.5:1 against the soft hover fill (the resting fill carries
-   the extra margin; variants.css soft recipe). Deliberately scoped to the
-   default theme: a custom property bakes its var() references where it is
-   declared, so these resolve against root/light/dark tokens on every boundary.
-   Presets and custom islands keep their --soft-fg-mix / raw-intent ink unless
-   they declare hooks themselves — :where() keeps this reset from outranking a
-   theme's own declaration (e.g. brutalist's 45% soft-fg-mix). */
-:where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) {
-  --primary-soft-fg: initial;
-  --secondary-soft-fg: initial;
-  --success-soft-fg: initial;
-  --warning-soft-fg: initial;
-  --danger-soft-fg: initial;
-  --neutral-soft-fg: initial;
-}
-
-:root,
-[data-theme="light"],
-[data-theme="dark"] {
-  --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%);
-  --success-soft-fg: color-mix(in oklab, var(--text) 15%, var(--success) 85%);
-  --warning-soft-fg: color-mix(in oklab, var(--text) 25%, var(--warning) 75%);
-  --danger-soft-fg: color-mix(in oklab, var(--text) 15%, var(--danger) 85%);
-  --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%);
-}
-
-/* Native platform controls (checkbox, radio, range, progress) that are not
-   restyled by a component class still follow the theme accent. Declared on
-   every island: accent-color inherits as a computed value, so islands must
-   recompute it from their own --primary (same resolution rule as above).
-   Unsupported browsers ignore it; forced-colors keeps browser control. */
-:root,
-[data-theme] {
-  accent-color: var(--primary);
-}
-
-/* Tone subsystem — fixed-backdrop foreground for components placed over media
-   or other surfaces outside the theme token stack. Use data-theme islands for
-   full dark/light subtree inversion. */
-[data-tone="dark"] {
-  --tone-fg: white;
-}
-
-[data-tone="light"] {
-  --tone-fg: var(--text);
-}
-
-/* Focus ring derivation — color-mix tier. Runs whether or not light-dark()
-   is also supported, so it covers the color-mix-without-light-dark browser
-   tier on its own; the light-dark block below refines it further with the
-   light/dark alpha split once both features are available. Declared on every
-   [data-theme] island (not just the built-in light/dark pair) so custom
-   islands recolor the ring for free; a preset that re-declares --focus-ring
-   later in source order intentionally pins its own ring instead. */
-@supports (color: color-mix(in oklch, red, white)) {
-  :root,
-  [data-theme] {
-    --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
-  }
-}
-
-/* Auto dark mode via light-dark(). Resolves based on the element's color-scheme:
-    :root (light dark) follows the OS, [data-theme="light"] forces light,
-    [data-theme="dark"] forces dark by overriding color-scheme.
-    Dark pastels sit a little lower and more chromatic (L 70-76, sat 38-45)
-    than usual so the palette stays warm rather than washed gray. */
-@supports (color: light-dark(red, blue)) {
-  :root,
-  [data-theme="light"] {
-    --primary: light-dark(hsl(268 32% 33%), hsl(268 42% 76%));
-    --primary-fg: light-dark(hsl(0 0% 98%), hsl(268 30% 12%));
-
-    --secondary: light-dark(hsl(16 38% 38%), hsl(18 45% 72%));
-    --secondary-fg: light-dark(hsl(0 0% 98%), hsl(18 32% 11%));
-
-    --success: light-dark(hsl(150 40% 31%), hsl(150 38% 62%));
-    --success-fg: light-dark(hsl(0 0% 98%), hsl(150 35% 8%));
-
-    --warning: light-dark(hsl(36 68% 34%), hsl(40 62% 64%));
-    --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%));
-
-    --danger: light-dark(hsl(5 58% 43%), hsl(4 60% 70%));
-    --danger-fg: light-dark(hsl(0 0% 98%), hsl(4 35% 10%));
-
-    --neutral: light-dark(hsl(258 7% 43%), hsl(258 10% 72%));
-    --neutral-fg: light-dark(hsl(0 0% 98%), hsl(260 18% 10%));
-
-    --surface: light-dark(hsl(0 0% 100%), hsl(263 17% 9%));
-    --surface-raised: light-dark(hsl(0 0% 100%), hsl(263 15% 12%));
-    --surface-subtle: light-dark(hsl(262 24% 96%), hsl(263 13% 16%));
-    --surface-solid: light-dark(hsl(261 16% 13%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(261 20% 13%), hsl(260 12% 95%));
-    --text-muted: light-dark(hsl(259 9% 42%), hsl(259 9% 67%));
-    --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%));
-
-    --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%));
-    --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28));
-    --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%));
-  }
-}
-
-@supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) {
-  :root,
-  [data-theme] {
-    --focus-ring: light-dark(
-      color-mix(in oklch, var(--focus) 30%, transparent),
-      color-mix(in oklch, var(--focus) 28%, transparent)
-    );
-  }
-}
-
-@media (prefers-contrast: more) {
-  :root,
-  /* The repeated attribute intentionally outranks single-attribute preset
-     palettes, including a preset stylesheet loaded after the core. */
-  [data-theme][data-theme] {
-    --border-width: 2px;
-    --focus-outline-offset: 3px;
-    --focus-ring-width: 4px;
-    --text-muted: var(--text);
-    --text-subtle: var(--text);
-  }
-}
-
-/*
- * Base element styles for native HTML semantics.
- *
- * Sits between reset (browser defaults) and prose (rich content scope).
- * These styles apply everywhere — cards, dialogs, heroes — not only in prose.
- *
- * Public hooks:
- * --link
- * --hr-space
- * --font-width / --font-width-dense (see variants.css for the dense application)
- */
-
-body {
-  background: var(--surface);
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-stretch: var(--font-width);
-  line-height: var(--line-height);
-}
-
-/* Bare links inherit their ink by default, so nothing changes unless a theme
-   opts in by setting --link. Because this is an element selector, any component
-   rule that colors its own anchors still wins. */
-a {
-  color: var(--link, inherit);
-  text-underline-offset: 0.18em;
-}
-
-a:hover {
-  text-decoration-thickness: 0.12em;
-}
-
-/* Global heading chrome: color (--heading or inherit), a tight line-height,
-   and progressive text-wrap. No font-size or font-weight is set globally —
-   components and .prose own the per-context scale. */
-:where(h1, h2, h3, h4, h5, h6) {
-  color: var(--heading, inherit);
-  line-height: var(--line-height-tight);
-  text-wrap: balance;
-}
-
-/* Compact heading groups. Structural only: display, gap, internal margin reset.
-   No font-size, color, or weight is applied here. */
-hgroup {
-  display: grid;
-  gap: var(--hgroup-gap);
-}
-
-hgroup > * {
-  margin-block: 0;
-}
-
-/* Section break.
-
-   margin-inline: 0 overrides the UA's `margin: 0.5em auto`. In block flow the
-   auto margins resolve to zero and nothing changes, but as a flex or grid item
-   an inline auto margin replaces the stretch — an <hr> in a .stack computed to
-   width 0 and vanished. .stack deliberately leaves the inline axis free, so
-   the reset belongs here.
-
-   --hr-space tunes the block rhythm on the instance: a rule closing a page
-   section and a rule separating two rows in a panel are the same element at
-   very different scales. It applies to an hr in document flow; inside .stack
-   or .prose the parent owns the spacing between siblings and wins. */
-hr {
-  border: 0;
-  border-block-start: var(--border-width) solid var(--border);
-  margin-block: var(--hr-space, var(--space-60));
-  margin-inline: 0;
-}
-
-code,
-kbd,
-samp,
-pre {
-  font-family: var(--font-mono);
-}
-
-/* Overflow containment only. One unbreakable line — a URL, a minified token, a
-   wide ASCII table — otherwise widens the whole page, and an author cannot see
-   it coming from the markup. Background, padding and radius stay out: those
-   belong to .prose or to an application code-block component. */
-pre {
-  overflow-x: auto;
-}
-
-small {
-  font-size: 0.875em;
-}
-
-::selection {
-  background: var(--selection-bg, var(--primary));
-  color: var(--selection-fg, var(--primary-fg));
-}
-
-/*
- * Intent classes do not style elements directly.
- * They only expose --intent, --intent-fg, and the optional per-intent soft
- * foreground --intent-soft-fg, relayed from the per-role --*-soft-fg hooks.
- * The default theme declares those hooks for its soft ink (see theme.css);
- * a theme without them lets the relay resolve to an invalid value, so the soft
- * recipe falls back to its --soft-fg-mix derivation and a theme opts in one
- * role at a time (docs/pages/foundations/tokens.md). Components and variants
- * decide how to consume them. Each component that consumes --intent,
- * --intent-soft-fg or --ui-* opens a local intent boundary in a :where() block
- * that resets exactly the tokens it consumes to initial. Parent intents do not
- * leak into nested components. Local intent classes (.primary, .danger, etc.)
- * still apply because they have higher specificity than :where().
- */
-.primary {
-  --intent: var(--primary);
-  --intent-fg: var(--primary-fg);
-  --intent-soft-fg: var(--primary-soft-fg);
-}
-.secondary {
-  --intent: var(--secondary);
-  --intent-fg: var(--secondary-fg);
-  --intent-soft-fg: var(--secondary-soft-fg);
-}
-.success {
-  --intent: var(--success);
-  --intent-fg: var(--success-fg);
-  --intent-soft-fg: var(--success-soft-fg);
-}
-.warning {
-  --intent: var(--warning);
-  --intent-fg: var(--warning-fg);
-  --intent-soft-fg: var(--warning-soft-fg);
-}
-.danger {
-  --intent: var(--danger);
-  --intent-fg: var(--danger-fg);
-  --intent-soft-fg: var(--danger-soft-fg);
-}
-.neutral {
-  --intent: var(--neutral);
-  --intent-fg: var(--neutral-fg);
-  --intent-soft-fg: var(--neutral-soft-fg);
-}
-
-/* Paint an inherited or local intent on a simple foreground element without
-   turning the intent classes into general-purpose color utilities. */
-.intent-color {
-  color: var(--intent);
-}
-
-/*
- * Cross-cutting variant token mapping.
- *
- * Variant scope: .solid/.soft/.outline/.surface set --ui-* for components that
- * opt into shared variants. .inverted is a surface modifier, not a variant: it paints
- * the element directly (background/color/border-color) so it works on any bare
- * block, and remaps the shared --ui-* tokens so participating components
- * (.card, .navbar, .alert, .badge) invert through their own rules. Loaded
- * before components, so a component with its own explicit surface (e.g.
- * .accordion) naturally keeps that surface — .inverted never forces a
- * non-participant.
- * Component-specific defaults (.btn solid-by-default, .badge
- * soft-by-default, .alert soft-by-default) live with their components:
- *   components/button.css — .btn default solid + .btn.ghost + .btn.link
- *   components/badge.css   — .badge default soft behind explicit --ui-*
- *   components/alert.css   — .alert default soft behind explicit --ui-*
- *
- * .compact/.spacious set inherited density tokens: spacing rhythm and geometry
- * only, plus a slight typographic width bonus. Density never changes font size
- * or icon size. Controls consume --control-size; non-control components may
- * consume --density-* when the context should affect their local rhythm.
- * .compact applies --font-width-dense through font-stretch (a variable wdth
- * axis when available, otherwise normal width-face matching); layout must
- * never depend on the narrowing being available. .spacious restores
- * --font-width, so a spacious island inside a compact context returns to the
- * normal width exactly as it restores its own gap, spacing, and control size.
- * Themes whose typeface has no useful width axis opt out with
- * --font-width-dense: 100%.
- *
- * .sm/.lg are local size roles, not shared measurements. Shared control
- * participants below map both typography and geometry; components with
- * bespoke geometry (badge, spinner, avatar, rating, key, prose) own those
- * mappings locally. Components without an explicit mapping do not participate.
- *
- * Intent list source of truth: intents.css. Components consume --intent* tokens
- * instead of re-listing intent classes.
- */
-.solid {
-  --ui-bg: var(--intent, var(--neutral));
-  --ui-fg: var(--intent-fg, var(--neutral-fg));
-  --ui-border: transparent;
-}
-
-.soft {
-  --ui-bg: var(--surface-subtle);
-  --ui-border: var(--border);
-  --ui-fg: var(--intent, var(--text));
-}
-
-.outline {
-  --ui-bg: transparent;
-  --ui-fg: var(--intent, currentColor);
-  --ui-border: var(--intent, currentColor);
-}
-
-/* Neutral chrome, intent only in the ink: the page surface with the theme
-   border. .soft is the intent-tinted treatment (its baseline fallback uses
-   --surface-subtle) and .outline has no fill at all, so neither can express
-   it. Deliberately literal — no color-mix enhancement — so this stays the one
-   variant that reads exactly as the theme's own surface. */
-.surface {
-  --ui-bg: var(--surface);
-  --ui-fg: var(--intent, var(--text));
-  --ui-border: var(--border);
-}
-
-/* Inverse surface treatment. Paints the element directly (so it works on any
-   bare block) and remaps the shared --ui-* tokens so opt-in components
-   (.card, .navbar) invert through their own rules. Because this loads before
-   component base surfaces, components with their own explicit surface
-   (e.g. .accordion) keep it — participation is opt-in, never forced. --heading
-   is set so global headings (var(--heading, inherit)) do not inherit an outside
-   heading color onto the dark surface; surface-owning descendants derive
-   their contextual aliases from their own local surface. */
-.inverted {
-  --ui-bg: var(--surface-solid);
-  --ui-fg: var(--surface);
-  --ui-border: transparent;
-  --ui-hover-bg: var(--surface-solid);
-
-  --heading: var(--surface);
-  --busy-overlay-bg: var(--surface-solid);
-
-  background: var(--ui-bg);
-  color: var(--ui-fg);
-  border-color: var(--ui-border);
-}
-
-.compact {
-  --gap: var(--space-20);
-  --density-space: var(--space-20);
-  --control-size: var(--control-size-sm);
-  font-stretch: var(--font-width-dense);
-}
-
-.spacious {
-  --gap: var(--space-50);
-  --density-space: var(--space-50);
-  --control-size: var(--control-size-lg);
-  font-stretch: var(--font-width);
-}
-
-/* Shared control scale. Wrappers are listed when their descendants form one
-   component (field, choice-card, floating-field, input-icon, join, pagination,
-   tabs, flyout). A local size declaration beats inherited density because it
-   is declared on the sized component itself. */
-:where(
-  .btn,
-  .input,
-  .textarea,
-  .select,
-  .color,
-  .file,
-  .field,
-  .choice,
-  .choice-card,
-  .input-icon,
-  .floating-field,
-  .otp,
-  .join,
-  .pagination,
-  .tabs,
-  .tab,
-  .flyout
-).sm {
-  --control-size: var(--control-size-sm);
-  --control-font-size: var(--font-size-sm);
-  --control-pad-x: var(--font-size-sm);
-}
-
-:where(
-  .btn,
-  .input,
-  .textarea,
-  .select,
-  .color,
-  .file,
-  .field,
-  .choice,
-  .choice-card,
-  .input-icon,
-  .floating-field,
-  .otp,
-  .join,
-  .pagination,
-  .tabs,
-  .tab,
-  .flyout
-).lg {
-  --control-size: var(--control-size-lg);
-  --control-font-size: var(--font-size-lg);
-  --control-pad-x: var(--font-size-lg);
-}
-
-/* Modern color enhancement. Baseline variant values above remain usable
-   everywhere. Interactive states live in the components that consume them. */
-@supports (color: color-mix(in oklch, red, white)) {
-  .soft {
-    /* @sync soft-recipe */
-    --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
-    --ui-border: color-mix(
-      in oklab,
-      var(--surface) var(--soft-border-mix),
-      var(--intent, var(--neutral))
-    );
-    --ui-fg: var(
-      --intent-soft-fg,
-      color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
-    );
-    /* @sync soft-recipe */
-  }
-
-  .inverted {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black);
-  }
-}
-
-/* Interactive hover recipes live in the components that consume them:
-     components/button.css and components/badge.css. */
-
-/* Focus baseline — a visible outline is the guaranteed focus affordance. The
-   :focus outline covers legacy browsers; modern browsers hide it for
-   pointer/mouse focus and interactive components layer their ring on top.
-
-   Invariant: an interactive component must never rely on box-shadow alone
-   for its keyboard focus indicator. Components that remove the native
-   outline on :focus-visible replace it with a transparent outline — invisible
-   normally, forced to the system focus color under forced-colors. */
-:focus {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
-}
-
-@supports selector(:focus-visible) {
-  :focus:not(:focus-visible) {
-    outline: none;
-  }
-}
-
-@media print {
-  :root,
-  /* The doubled attribute intentionally outranks single-attribute preset
-     islands (data-theme="dark", paired themes) loaded after the core. */
-  [data-theme][data-theme],
-  body {
-    /* Save some ink in dark mode */
-    color-scheme: light;
-    background: #fff;
-    color: #000;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    break-after: avoid;
-  }
-}