/*! SLASHED v0.7.30 — slashed.optimal.css | MIT License | github.com/codeslash-dev/SLASHED */

/* ─── core/layers.css ─── */
/* SLASHED — core/layers.css
   Global cascade order for every SLASHED layer.
   Import before all framework modules. */

@layer
  slashed.tokens,
  slashed.reset,
  slashed.base,
  slashed.forms,
  slashed.components,
  slashed.layout,
  slashed.macros,
  slashed.utilities,
  slashed.states,
  slashed.themes,
  slashed.motion,
  slashed.accessibility,
  slashed.print,
  slashed.legacy,
  slashed.overrides;

/* ─── core/tokens.css ─── */
/* SLASHED — core/tokens.css
   @layer slashed.tokens
   Core design tokens: color sources, semantic colors, type, spacing, radii, shadows, motion, z-index.
   Prefix: --sf-*; brand theming starts with six -source-light tokens. */

@layer slashed.tokens {

  /* ============================================================
     @property — BRAND COLORS (-source-light source tokens, animatable)
     Override these 6 tokens to rebrand — dark mode auto-derives.
     Optionally set --sf-color-X-source-dark for full control.
     ============================================================ */

  @property --sf-color-primary-source-light   { syntax: "<color>"; inherits: true; initial-value: oklch(0.47 0.27 264); }
  @property --sf-color-secondary-source-light { syntax: "<color>"; inherits: true; initial-value: oklch(0.22 0.04 264); }
  @property --sf-color-tertiary-source-light  { syntax: "<color>"; inherits: true; initial-value: oklch(0.42 0.22 295); }
  @property --sf-color-action-source-light    { syntax: "<color>"; inherits: true; initial-value: oklch(0.50 0.22 235); }
  @property --sf-color-neutral-source-light   { syntax: "<color>"; inherits: true; initial-value: oklch(0.52 0.025 260); }
  /* initial-value is 0.96 (not 0.99) so the +0.02/+0.04 surface offsets produce
     visually distinct levels in light mode. At 0.99 all lighter surfaces clamp
     to pure white and become indistinguishable. 0.96 gives: bg=0.98, inset=0.94,
     raised=1.0→white — all distinct. Consumers using near-1.0 values should rely
     on shadows rather than lightness for elevation. */
  @property --sf-color-base-source-light  { syntax: "<color>"; inherits: true; initial-value: oklch(0.96 0.006 250); }

  /* @property — STATUS COLORS (-source-light source tokens) */

  @property --sf-color-success-source-light { syntax: "<color>"; inherits: true; initial-value: oklch(0.50 0.16 145); }
  @property --sf-color-warning-source-light { syntax: "<color>"; inherits: true; initial-value: oklch(0.75 0.17 80);  }
  @property --sf-color-info-source-light    { syntax: "<color>"; inherits: true; initial-value: oklch(0.48 0.18 235); }
  @property --sf-color-danger-source-light  { syntax: "<color>"; inherits: true; initial-value: oklch(0.48 0.22 12);  }

  /* Plain :root mirrors — character-for-character identical to each @property
     initial-value above. Engines lacking @property support read the token value
     from here. Do NOT edit these independently from the initial-value strings. */
  :root {
    --sf-color-primary-source-light:   oklch(0.47 0.27 264);
    --sf-color-secondary-source-light: oklch(0.22 0.04 264);
    --sf-color-tertiary-source-light:  oklch(0.42 0.22 295);
    --sf-color-action-source-light:    oklch(0.50 0.22 235);
    --sf-color-neutral-source-light:   oklch(0.52 0.025 260);
    --sf-color-base-source-light:      oklch(0.96 0.006 250);
    --sf-color-success-source-light:   oklch(0.50 0.16 145);
    --sf-color-warning-source-light:   oklch(0.75 0.17 80);
    --sf-color-info-source-light:      oklch(0.48 0.18 235);
    --sf-color-danger-source-light:    oklch(0.48 0.22 12);
  }

  /* @property — DARK SOURCE TOKENS (-dark, animatable) */
  /* Registers the auto-computed dark counterparts as typed <color> so their
     resolved absolute value is inherited by child elements (e.g. a section
     with [data-theme="dark"]). Without @property these tokens inherit as raw
     text, and the nested var()-in-oklch-from chain fails type-checking on
     registered child properties.
     initial-value = dark-mode value derived from the formula in themes.css
     (clamp(0.65, 0.95 - l*0.5, 0.88) for brand/status; inverted for base).
     Consumers who set --sf-color-X-dark explicitly do not need to register it
     — their override is a plain OKLCH literal and passes type-checking directly. */
  @property --sf-color-primary-source-dark   { syntax: "<color>"; inherits: true; initial-value: oklch(0.715 0.243 264);  }
  @property --sf-color-secondary-source-dark { syntax: "<color>"; inherits: true; initial-value: oklch(0.84 0.036 264);   }
  @property --sf-color-tertiary-source-dark  { syntax: "<color>"; inherits: true; initial-value: oklch(0.74 0.198 295);   }
  @property --sf-color-action-source-dark    { syntax: "<color>"; inherits: true; initial-value: oklch(0.70 0.198 235);   }
  @property --sf-color-neutral-source-dark   { syntax: "<color>"; inherits: true; initial-value: oklch(0.69 0.0225 260);  }
  @property --sf-color-base-source-dark      { syntax: "<color>"; inherits: true; initial-value: oklch(0.22 0.003 250);   }
  @property --sf-color-success-source-dark   { syntax: "<color>"; inherits: true; initial-value: oklch(0.70 0.144 145);   }
  @property --sf-color-warning-source-dark   { syntax: "<color>"; inherits: true; initial-value: oklch(0.65 0.153 80);    }
  @property --sf-color-info-source-dark      { syntax: "<color>"; inherits: true; initial-value: oklch(0.71 0.162 235);   }
  @property --sf-color-danger-source-dark    { syntax: "<color>"; inherits: true; initial-value: oklch(0.71 0.198 12);    }

  /* @property — COMPUTED COLOR TOKENS (brand + status)
     Registers the computed tokens as typed <color> so CSS transitions can
     interpolate between light and dark values when [data-theme] changes.
     initial-value = light-mode value (safe fallback if nothing sets the token).
     Child-element theming works because [data-theme="dark"] in themes.css
     assigns var(--sf-color-X-dark) — now a registered typed <color> whose
     absolute value is inherited, so no multi-level var() resolution is needed. */
  @property --sf-color-primary   { syntax: "<color>"; inherits: true; initial-value: oklch(0.47 0.27 264); }
  @property --sf-color-secondary { syntax: "<color>"; inherits: true; initial-value: oklch(0.22 0.04 264); }
  @property --sf-color-tertiary  { syntax: "<color>"; inherits: true; initial-value: oklch(0.42 0.22 295); }
  @property --sf-color-action    { syntax: "<color>"; inherits: true; initial-value: oklch(0.50 0.22 235); }
  @property --sf-color-neutral   { syntax: "<color>"; inherits: true; initial-value: oklch(0.52 0.025 260); }
  @property --sf-color-base      { syntax: "<color>"; inherits: true; initial-value: oklch(0.96 0.006 250); }
  @property --sf-color-success   { syntax: "<color>"; inherits: true; initial-value: oklch(0.50 0.16 145); }
  @property --sf-color-warning   { syntax: "<color>"; inherits: true; initial-value: oklch(0.75 0.17 80);  }
  @property --sf-color-info      { syntax: "<color>"; inherits: true; initial-value: oklch(0.48 0.18 235); }
  @property --sf-color-danger    { syntax: "<color>"; inherits: true; initial-value: oklch(0.48 0.22 12);  }

  /* Plain :root mirrors for computed tokens — resolve to the -source-light source token
     so user overrides to --sf-color-X-source-light are respected in all browsers.
     Overridden by the @supports block in themes.css whenever dark mode is active. */
  :root {
    --sf-color-primary:   var(--sf-color-primary-source-light);
    --sf-color-secondary: var(--sf-color-secondary-source-light);
    --sf-color-tertiary:  var(--sf-color-tertiary-source-light);
    --sf-color-action:    var(--sf-color-action-source-light);
    --sf-color-neutral:   var(--sf-color-neutral-source-light);
    --sf-color-base:      var(--sf-color-base-source-light);
    --sf-color-success:   var(--sf-color-success-source-light);
    --sf-color-warning:   var(--sf-color-warning-source-light);
    --sf-color-info:      var(--sf-color-info-source-light);
    --sf-color-danger:    var(--sf-color-danger-source-light);
  }

  /* Mode flag — INTERNAL, not a public hook (SL-003: same "--sf-is-*" naming
     pattern as the public flags below, opposite contract — read here, don't
     set). Drives formula direction for non-color dark overrides. Set only by
     themes.css via [data-theme="dark"] and the prefers-color-scheme media
     query; every other read site (core/tokens.css, the configurator's power
     knobs) only reads it inside calc() expressions. Setting it directly
     desyncs it from color-scheme/[data-theme] and produces an inconsistent
     theme. */
  @property --sf-is-dark { syntax: "<integer>"; inherits: true; initial-value: 0; }

  /* No --sf-is-active/-current/-pressed/-open here: they registered an
     INTERACTION STATE FLAGS mechanism (inheritable custom properties set by
     .sf-is-active/.sf-is-open/etc for a consumer's own calc() to branch on)
     with zero consumers anywhere in this codebase, its demo, or the
     configurator beyond its own preview toggle — speculative surface,
     removed. Style off [aria-current]/[aria-expanded]/[aria-pressed]
     instead; see docs/states.md § "Prefer native state". */

  /* ============================================================
     FLUID SCALE ENGINE — generative inputs
     ------------------------------------------------------------
     The fluid type / space / display scales are computed at runtime
     from these scalars. Override any of them on :root and every
     clamp() recalibrates — no build step, no token regeneration.

       --sf-fluid-min-vw / --sf-fluid-max-vw   viewport range (rem, unitless)
                                               over which values interpolate.
       --sf-text-ratio-min / -max              modular ratio of the TYPE scale
                                               at min / max viewport (dual-ratio:
                                               subtler on mobile, larger on desktop).
       --sf-text-base-min / -max               --sf-text-m endpoints (rem, unitless).
       --sf-text-display-base-min / -max       --sf-text-display-s endpoints.
       --sf-space-ratio-min / -max             modular ratio of the SPACE scale.
       --sf-space-base-min / -max              --sf-space-m endpoints (rem, unitless).
       --sf-fluid-width                        the length every fluid clamp()
                                               interpolates against. Defaults to
                                               100vw (viewport-relative). Override
                                               to 100cqi on a container scope to make
                                               the type + space + display scales
                                               container-relative — see .sf-fluid-cq
                                               in core/layout.css (issue #497).

     Registered as <number> so they can be used as pow() exponents/operands
     and multiplied by 1rem in calc(). Requires CSS pow() (Chrome 125+,
     Safari 15.4+, Firefox 118+); the effective SLASHED floor is higher
     (Chrome 125 / Safari 18.0 / Firefox 129), set by the colour system —
     see browser floor. Plain :root mirrors
     below keep values readable; do NOT edit them independently. */
  @property --sf-fluid-min-vw          { syntax: "<number>"; inherits: true; initial-value: 22.5; }
  @property --sf-fluid-max-vw          { syntax: "<number>"; inherits: true; initial-value: 90; }
  @property --sf-text-ratio-min        { syntax: "<number>"; inherits: true; initial-value: 1.25; }
  @property --sf-text-ratio-max        { syntax: "<number>"; inherits: true; initial-value: 1.333; }
  @property --sf-text-base-min         { syntax: "<number>"; inherits: true; initial-value: 1; }
  @property --sf-text-base-max         { syntax: "<number>"; inherits: true; initial-value: 1.25; }
  @property --sf-text-display-base-min { syntax: "<number>"; inherits: true; initial-value: 2.4; }
  @property --sf-text-display-base-max { syntax: "<number>"; inherits: true; initial-value: 3; }
  @property --sf-space-ratio-min       { syntax: "<number>"; inherits: true; initial-value: 1.25; }
  @property --sf-space-ratio-max       { syntax: "<number>"; inherits: true; initial-value: 1.333; }
  @property --sf-space-base-min        { syntax: "<number>"; inherits: true; initial-value: 1; }
  @property --sf-space-base-max        { syntax: "<number>"; inherits: true; initial-value: 2; }

  /* Fluid interpolation driver — the length term every fluid clamp() below
     measures against. Universal syntax ("*") not "<length>": a registered
     <length> requires a computationally-independent initial-value, and 100vw
     (viewport-dependent) is not one. The real default lives on :root; an
     opt-in scope (e.g. .sf-fluid-cq) overrides it to 100cqi so the whole
     generative scale becomes container-relative without duplicating a single
     formula. */
  @property --sf-fluid-width           { syntax: "*"; inherits: true; }

  /* ── Output token @property registrations ──────────────────────────────────
     Radius + space: <length> syntax enables CSS transitions on layout values —
     border-radius/padding/gap etc. now interpolate instead of snapping.
     Shadow: syntax:"*" (no <shadow> type in spec); inherits:true so :root values
     cascade normally; registers the properties formally for DevTools inspection.

     initial-value ≠ :root default (by spec): a registered <length> requires a
     computationally-independent initial-value, so these carry `initial-value: 0`
     while their real defaults are the calc()-derived values set on :root below
     (see --sf-fluid-width above for the same constraint stated at length). One
     consequence worth flagging: once a property is registered, the initial
     value IS a value — so a fallback like `var(--sf-radius-m, 12px)` will NEVER
     fire; an unset --sf-radius-m resolves to the registered `0`, not to "no
     value". Author fallbacks against the token's :root default, not this 0. */

  @property --sf-radius-none  { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-2xs   { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-xs    { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-s     { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-m     { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-l     { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-xl    { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-2xl   { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-3xl   { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-4xl   { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-radius-full  { syntax: "<length>"; inherits: true; initial-value: 9999px; }
  @property --sf-radius-pill  { syntax: "<length>"; inherits: true; initial-value: 9999px; }
  @property --sf-radius-outer { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-media-radius { syntax: "<length>"; inherits: true; initial-value: 0; }

  @property --sf-space-none       { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-space-px         { syntax: "<length>"; inherits: true; initial-value: 1px; }
  @property --sf-space-2xs        { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-space-xs         { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-space-s          { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-space-m          { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-space-l          { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-space-xl         { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-space-2xl        { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-space-3xl        { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-space-4xl        { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-gap              { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-content-gap      { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-gutter           { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-component-pad    { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-field-block      { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-section-pad--xs  { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-section-pad--s   { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-section-pad--m   { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-section-pad--l   { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-section-pad--xl  { syntax: "<length>"; inherits: true; initial-value: 0; }
  @property --sf-section-pad--2xl { syntax: "<length>"; inherits: true; initial-value: 0; }

  @property --sf-shadow-none      { syntax: "*"; inherits: true; }
  @property --sf-shadow-xs        { syntax: "*"; inherits: true; }
  @property --sf-shadow-s         { syntax: "*"; inherits: true; }
  @property --sf-shadow-m         { syntax: "*"; inherits: true; }
  @property --sf-shadow-l         { syntax: "*"; inherits: true; }
  @property --sf-shadow-xl        { syntax: "*"; inherits: true; }
  @property --sf-shadow-2xl       { syntax: "*"; inherits: true; }
  @property --sf-shadow-inner     { syntax: "*"; inherits: true; }
  @property --sf-text-shadow-none { syntax: "*"; inherits: true; }
  @property --sf-text-shadow-xs   { syntax: "*"; inherits: true; }
  @property --sf-text-shadow-s    { syntax: "*"; inherits: true; }
  @property --sf-text-shadow-m    { syntax: "*"; inherits: true; }
  @property --sf-text-shadow-l    { syntax: "*"; inherits: true; }
  @property --sf-text-shadow-xl   { syntax: "*"; inherits: true; }
  @property --sf-drop-shadow-xs   { syntax: "*"; inherits: true; }
  @property --sf-drop-shadow-s    { syntax: "*"; inherits: true; }
  @property --sf-drop-shadow-m    { syntax: "*"; inherits: true; }
  @property --sf-drop-shadow-l    { syntax: "*"; inherits: true; }
  @property --sf-drop-shadow-xl   { syntax: "*"; inherits: true; }
  @property --sf-shadow-glow      { syntax: "*"; inherits: true; }

  :root {
    --sf-fluid-min-vw:          22.5;
    --sf-fluid-max-vw:          90;
    --sf-fluid-width:           100vw;  /* interpolation driver; 100cqi on a container scope → container-relative fluid (#497) */
    --sf-text-ratio-min:        1.25;
    --sf-text-ratio-max:        1.333;
    --sf-text-base-min:         1;
    --sf-text-base-max:         1.25;
    --sf-text-display-base-min: 2.4;
    --sf-text-display-base-max: 3;
    --sf-space-ratio-min:       1.25;
    --sf-space-ratio-max:       1.333;
    --sf-space-base-min:        1;
    --sf-space-base-max:        2;
  }

  /* ============================================================
     DERIVED SEMANTIC TOKENS
     ============================================================ */

  :root {

    /* ----------------------------------------------------------
       Color scheme
       ---------------------------------------------------------- */
    --sf-color-scheme: light dark;

    /* ----------------------------------------------------------
       LumLocker — OKLCH L value used by the
       :root[data-lumlocker] override in core/themes.css.
       Locks the 4 brand colors (primary, secondary, tertiary, action)
       to one shared lightness while keeping their individual hue and
       chroma. Neutral and base are excluded — neutral is a desaturated
       grey (locking it to a brand L would make it chromatic) and base
       must remain near-white in light mode for the page background.

       --sf-lumlocker is the LIGHT-mode target. Dark mode uses
       --sf-lumlocker-dark, which defaults to the mirror of the light L
       around 0.59 — the midpoint between the light (~0.96) and dark
       (~0.22) page backgrounds — i.e. calc(1.18 - L). Mirroring around
       the background midpoint (not 0.5) is what keeps the lock's
       contrast against the surface equal in both themes; a naive 1 - L
       would leave the dark lock too dark to read. Clamped to a visible
       band. A single knob that works in both themes. Override either:
         :root { --sf-lumlocker: 0.55 }          (light)
         :root { --sf-lumlocker-dark: 0.82 }     (dark, breaks the mirror)
       ---------------------------------------------------------- */
    --sf-lumlocker: 0.65;
    --sf-lumlocker-dark: clamp(0.5, calc(1.18 - var(--sf-lumlocker)), 0.92);

    /* ----------------------------------------------------------
       Resolved color tokens — auto-switch via light-dark().
       Components reference these. Override the -source-light / -source-dark
       source tokens above to customise; or override these directly
       with your own light-dark() expression.
       ---------------------------------------------------------- */
    /* Surface alias (plain var — no IACVT, stays ungated) */
    --sf-color-surface: var(--sf-color-base);

    /* ----------------------------------------------------------
       Text — plain var aliases (ungated)
       ---------------------------------------------------------- */

    /* ----------------------------------------------------------
       Text-on-color — plain var aliases (ungated)
       ---------------------------------------------------------- */
    --sf-color-text--on-base:    var(--sf-color-text);

    /* Static fallbacks for engines that support oklch(from …) but not sign()
       (Chrome 125–137, Firefox 128–130). The sign() gate below overrides these
       with the exact auto-contrast formula when the engine supports it.
       Derived from the default palette at threshold 0.6: surfaces with L < 0.6
       get near-white text (0.95); warning (L 0.75) and code (on light inset)
       get near-black (0.1). Custom palettes must override --sf-color-text--on-*
       manually if their surface colours differ from the defaults. */
    --sf-color-text--on-primary:   oklch(0.95 0 0);
    --sf-color-text--on-secondary: oklch(0.95 0 0);
    --sf-color-text--on-tertiary:  oklch(0.95 0 0);
    --sf-color-text--on-action:    oklch(0.95 0 0);
    --sf-color-text--on-neutral:   oklch(0.95 0 0);
    --sf-color-text--on-success:   oklch(0.95 0 0);
    --sf-color-text--on-warning:   oklch(0.1  0 0);
    --sf-color-text--on-info:      oklch(0.95 0 0);
    --sf-color-text--on-danger:    oklch(0.95 0 0);
    --sf-color-text--on-inverse:   oklch(0.95 0 0);
    --sf-color-code-text:          oklch(0.1  0 0);

    /* ----------------------------------------------------------
       Borders — plain var aliases (ungated)
       ---------------------------------------------------------- */
    --sf-color-border--focus: var(--sf-color-action);

    /* ----------------------------------------------------------
       Links — plain var aliases and geometry (ungated)
       ---------------------------------------------------------- */
    --sf-color-link--disabled:  var(--sf-color-text--disabled);
    /* Underline geometry — consumed by a:link in core/base.css and by
       the .sf-link--* macros. `auto` defers to the font's own metrics;
       set an explicit length (e.g. 0.08em) for a uniform rule. */
    --sf-link-underline-offset:    0.15em;
    --sf-link-underline-thickness: auto;

    /* ----------------------------------------------------------
       Interactive states — plain var aliases (ungated)
       ---------------------------------------------------------- */
    --sf-color-bg--disabled: var(--sf-color-inset);
    --sf-color-code-bg:      var(--sf-color-inset);

    /* ----------------------------------------------------------
       Selection & backdrop — static values (ungated)
       ---------------------------------------------------------- */
    --sf-color-selection-text: inherit;
    --sf-color-mark-text:      inherit;
    /* Dim: classic semi-transparent black for modal backdrops, distinct from --sf-color-overlay */
    --sf-color-dim:            oklch(0 0 0 / 0.5);
    --sf-color-white:          oklch(100% 0 0);
    --sf-color-black:          oklch(0% 0 0);

    /* ----------------------------------------------------------
       Scrollbar
       ---------------------------------------------------------- */
    --sf-scrollbar-thumb: var(--sf-color-neutral);
    --sf-scrollbar-track: transparent;

    /* ----------------------------------------------------------
       Shadow strength — base opacity for light mode; auto-boosted by
       +0.17 in dark mode via --sf-is-dark. Override with a calc() to
       preserve the adaptation: calc(0.1 + var(--sf-is-dark) * 0.17).
       ---------------------------------------------------------- */
    --sf-shadow-strength:   calc(0.08 + var(--sf-is-dark) * 0.17);
    /* Shadow lightness: 0.15 is the default density. Independent token allows
       tuning shadow depth globally across light/dark and surfaces. */
    --sf-shadow-lightness:  0.15;
    /* ----------------------------------------------------------
       Shadow glow color — tint used by --sf-shadow-glow. Override to
       retint glows; opacity/dark-mode adaptation is controlled by
       --sf-shadow-strength.
       ---------------------------------------------------------- */
    --sf-shadow-glow-color: var(--sf-color-primary);

    /* ----------------------------------------------------------
       Opacity — disabled state effects
       ---------------------------------------------------------- */
    --sf-opacity-disabled:  0.45;

    /* ----------------------------------------------------------
       Focus / form colors
       ---------------------------------------------------------- */
    --sf-focus-ring-color:  var(--sf-color-action);
    --sf-focus-ring-shadow: 0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg, var(--sf-color-base-source-light, #fff)),
                            0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color);
    --sf-caret-color:       var(--sf-color-action);

  }
  /* ── @supports gate: light-dark() + oklch(from …) ──
     Safari 15.4 supports light-dark() but only adds oklch(from) in 16.4.
     Gating on both prevents Safari 15.x/16.x from parsing the derived
     color tokens and silently failing all base colors. */
  @supports (color: light-dark(white, black)) and (color: oklch(from red l c h)) {
    :root {

      /* ----------------------------------------------------------
         Resolved color tokens — auto-switch via light-dark().
         Dark auto-derivation formula (brand + status):
         clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source.
         Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark.
         Override any --sf-color-X-dark to take full per-mode control.
         SL-001: this same clamp() formula is re-declared flat in themes.css
         (SECTION-LEVEL THEMING) so [data-theme] overrides on non-:root elements
         still resolve correctly — light-dark() only bakes at :root. Keep both
         copies in sync if the formula ever changes. */
      --sf-color-primary:   light-dark(var(--sf-color-primary-source-light),   var(--sf-color-primary-source-dark,   oklch(from var(--sf-color-primary-source-light)   clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
      --sf-color-secondary: light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
      --sf-color-tertiary:  light-dark(var(--sf-color-tertiary-source-light),  var(--sf-color-tertiary-source-dark,  oklch(from var(--sf-color-tertiary-source-light)  clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
      --sf-color-action:    light-dark(var(--sf-color-action-source-light),    var(--sf-color-action-source-dark,    oklch(from var(--sf-color-action-source-light)    clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
      --sf-color-neutral:   light-dark(var(--sf-color-neutral-source-light),   var(--sf-color-neutral-source-dark,   oklch(from var(--sf-color-neutral-source-light)   clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
      --sf-color-base:      light-dark(var(--sf-color-base-source-light),      var(--sf-color-base-source-dark,      oklch(from var(--sf-color-base-source-light)      clamp(0.16, calc(1.18 - l),        0.24) calc(c * 0.5) h)));

      --sf-color-success: light-dark(var(--sf-color-success-source-light), var(--sf-color-success-source-dark, oklch(from var(--sf-color-success-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
      --sf-color-warning: light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));

      --sf-color-info:    light-dark(var(--sf-color-info-source-light),    var(--sf-color-info-source-dark,    oklch(from var(--sf-color-info-source-light)    clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
      --sf-color-danger:  light-dark(var(--sf-color-danger-source-light),  var(--sf-color-danger-source-dark,  oklch(from var(--sf-color-danger-source-light)  clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));

      /* ----------------------------------------------------------
         Text — light and dark require opposite formula directions,
         so each side of light-dark() references its source token.
         ---------------------------------------------------------- */
      --sf-color-text: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h),
        oklch(from var(--sf-color-neutral)       clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1)    c h)
      );
      --sf-color-text--muted: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.35, calc(l - var(--sf-contrast-bias)), 0.62) c h),
        oklch(from var(--sf-color-neutral)       clamp(0.48, calc(l + var(--sf-contrast-bias)), 0.74) c h)
      );
      --sf-color-text--subtle: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h),
        oklch(from var(--sf-color-neutral)       clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h)
      );
      --sf-color-text--placeholder: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h),
        oklch(from var(--sf-color-neutral)       clamp(0.35, calc(l - 0.1),  0.65) c h)
      );
      --sf-color-text--disabled: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h),
        oklch(from var(--sf-color-neutral)       clamp(0.25, calc(l - 0.2),  0.55) c h)
      );
      --sf-color-text--inverse: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4), 0.98) c h),
        oklch(from var(--sf-color-neutral)       clamp(0.05, calc(l - 0.4), 0.35) c h)
      );
      --sf-color-heading: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h),
        oklch(from var(--sf-color-neutral)       clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1)    c h)
      );

      /* ----------------------------------------------------------
         Borders — direction-dependent, reference source tokens.
         Light: borders are lighter than neutral (l + offset).
         Dark:  borders are darker  than neutral (l - offset).
         ---------------------------------------------------------- */
      --sf-color-border: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h),
        oklch(from var(--sf-color-neutral)       clamp(0.25, calc(l - 0.3),  0.55) 0.005 h)
      );
      --sf-color-border--subtle: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.75, calc(l + 0.4),  0.97) 0.005 h),
        oklch(from var(--sf-color-neutral)       clamp(0.20, calc(l - 0.38), 0.45) 0.005 h)
      );
      --sf-color-border--strong: light-dark(
        oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.1),  0.85) 0.02  h),
        oklch(from var(--sf-color-neutral)       clamp(0.38, calc(l - 0.1),  0.65) 0.02  h)
      );

      /* ----------------------------------------------------------
         Links — derived from --sf-color-action (auto-adapts)
         ---------------------------------------------------------- */
      /* Links keep the action hue but CLAMP lightness toward a contrast-safe
         band — a ceiling in light mode, a floor in dark mode — so link text
         clears WCAG AA (4.5:1) on the page background for the default palette
         AND the large majority of brand overrides (a fixed offset alone only
         fixed the default). Lightness dominates OKLCH contrast but doesn't
         fully determine it: very high-chroma hues (saturated yellow/green) can
         still fall short even at a safe lightness — those remain the consumer's
         responsibility (see docs/theming.md → "Link contrast").

         NOTE: the consumer-facing :link rule in core/base.css uses
         `a:link` (not bare `a`) so its specificity matches WebKit's UA
         stylesheet `a:link { color: -webkit-link }`. Without that
         pseudo-class the framework's `--sf-color-link` value is
         silently ignored on unvisited anchors in WebKit and
         `-webkit-link` (≈ #00728f in dark mode) paints instead —
         regardless of how this token is computed. PR #73 and several
         follow-up attempts mistakenly chased the formula. */
      --sf-color-link:            light-dark(
        oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h),
        oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h)
      );
      --sf-color-link--hover:     light-dark(
        oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h),
        oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h)
      );
      --sf-color-link--active:    light-dark(
        oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h),
        oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h)
      );
      /* Visited link — 60° hue shift from action gives clearly distinct
         chroma without colliding with default tertiary (h ≈ 310). Same
         lightness clamp as the base link. If your brand puts action and
         tertiary close in hue, override directly:
           :root { --sf-color-link--visited: #6b46c1; } */
      --sf-color-link--visited:   light-dark(
        oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)),
        oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60))
      );

      /* ----------------------------------------------------------
         Selection
         ---------------------------------------------------------- */
      --sf-color-selection-bg:   light-dark(
        oklch(from var(--sf-color-action-source-light) l c h / 0.28),
        oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55)
      );

      /* Alt selection — the opposite scheme's treatment, for a surface
         that deliberately inverts colours relative to the page (e.g. a
         dark card on a light page) where the default pairing above
         would land with poor contrast. Consumed by .sf-selection--alt
         (optional/utilities.css). */
      --sf-color-selection-bg--alt: light-dark(
        oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55),
        oklch(from var(--sf-color-action-source-light) l c h / 0.28)
      );
      --sf-color-selection-text--alt: inherit;

      /* ----------------------------------------------------------
         Status triplets — strong (direction-dependent, uses light-dark)
         danger = destructive actions, form validation errors, negative states
         ---------------------------------------------------------- */
      --sf-color-success-strong: light-dark(
        oklch(from var(--sf-color-success-source-light) calc(l - 0.15) c h),
        oklch(from var(--sf-color-success)       clamp(0.70, calc(l + 0.15), 1) c h)
      );
      --sf-color-warning-strong: light-dark(
        oklch(from var(--sf-color-warning-source-light) calc(l - 0.25) c h),
        oklch(from var(--sf-color-warning)       clamp(0.70, calc(l + 0.05), 1) c h)
      );
      --sf-color-info-strong: light-dark(
        oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h),
        oklch(from var(--sf-color-info)       clamp(0.70, calc(l + 0.15), 1) c h)
      );
      --sf-color-danger-strong: light-dark(
        oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h),
        oklch(from var(--sf-color-danger)       clamp(0.70, calc(l + 0.15), 1) c h)
      );

    }
  }
  /* ── @supports gate: oklch(from …) relative color ── */
  @supports (color: oklch(from red l c h)) {
    :root {

      /* ----------------------------------------------------------
         Surfaces — derived from --sf-color-base (auto-adapts)
         ---------------------------------------------------------- */
      --sf-color-bg:      oklch(from var(--sf-color-base) calc(l + 0.02) c h);
      --sf-color-inset:   oklch(from var(--sf-color-base) calc(l - 0.02) c h);
      --sf-color-raised:  oklch(from var(--sf-color-base) calc(l + 0.04) c h);
      /* Overlay: high-opacity wash of the base color for light/dark mode safe layers */
      --sf-color-overlay: oklch(from var(--sf-color-base) l c h / 0.9);
      --sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);

      /* ----------------------------------------------------------
         Border alpha tokens
         ---------------------------------------------------------- */
      --sf-color-border--disabled: oklch(from var(--sf-color-border--subtle) l 0 h / 0.5);
      --sf-color-border--translucent: oklch(from var(--sf-color-neutral) l c h / 0.15);

      /* ----------------------------------------------------------
         Link alpha token
         ---------------------------------------------------------- */
      --sf-color-link--underline: oklch(from var(--sf-color-action) l c h / 0.3);

      /* ----------------------------------------------------------
         Interactive states — derived from --sf-color-neutral (auto-adapts)
         ---------------------------------------------------------- */
      --sf-color-bg--hover:    oklch(from var(--sf-color-neutral) l c h / 0.08);
      --sf-color-bg--active:   oklch(from var(--sf-color-neutral) l c h / 0.12);
      --sf-color-bg--selected: oklch(from var(--sf-color-action) l c h / 0.1);
      --sf-color-bg--focus:    oklch(from var(--sf-color-action) l c h / 0.06);

      /* ----------------------------------------------------------
         Selection & mark
         ---------------------------------------------------------- */
      --sf-color-mark-bg: oklch(from var(--sf-color-warning) l c h / 0.25);

      /* ----------------------------------------------------------
         Status triplets — subtle/muted/tint (alpha variants)
         bg/border use same formula both modes. -tint is the 5%
         near-transparent rung, mirroring the brand families'
         --sf-color-{family}-tint aliases (full 10-family coverage).
         ---------------------------------------------------------- */
      --sf-color-success-subtle: oklch(from var(--sf-color-success) l c h / 0.12);
      --sf-color-success-muted:  oklch(from var(--sf-color-success) l c h / 0.3);
      --sf-color-success-tint:   oklch(from var(--sf-color-success) l c h / 0.05);

      --sf-color-warning-subtle: oklch(from var(--sf-color-warning) l c h / 0.12);
      --sf-color-warning-muted:  oklch(from var(--sf-color-warning) l c h / 0.3);
      --sf-color-warning-tint:   oklch(from var(--sf-color-warning) l c h / 0.05);

      --sf-color-info-subtle:    oklch(from var(--sf-color-info) l c h / 0.12);
      --sf-color-info-muted:     oklch(from var(--sf-color-info) l c h / 0.3);
      --sf-color-info-tint:      oklch(from var(--sf-color-info) l c h / 0.05);

      --sf-color-danger-subtle:  oklch(from var(--sf-color-danger) l c h / 0.12);
      --sf-color-danger-muted:   oklch(from var(--sf-color-danger) l c h / 0.3);
      --sf-color-danger-tint:    oklch(from var(--sf-color-danger) l c h / 0.05);

      /* ----------------------------------------------------------
         Gradients — derived from brand colors (auto-adapt)
         All 4 core brand families (primary/secondary/tertiary/action)
         share the same darkening formula; --sf-gradient-brand is a
         separate decorative hue-shift option, independent of the
         colour axis.
         ---------------------------------------------------------- */
      --sf-gradient-primary:   linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h));
      --sf-gradient-secondary: linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h));
      --sf-gradient-tertiary:  linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h));
      --sf-gradient-action:    linear-gradient(in oklch 135deg, var(--sf-color-action), oklch(from var(--sf-color-action) calc(l - 0.08) c h));
      --sf-gradient-brand:     linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)));
      --sf-gradient-surface:   linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg));

      --sf-gradient-fade--r: linear-gradient(in oklch to right,  transparent, var(--sf-color-bg));
      --sf-gradient-fade--l: linear-gradient(in oklch to left,   transparent, var(--sf-color-bg));
      --sf-gradient-fade--t: linear-gradient(in oklch to top,    transparent, var(--sf-color-bg));
      --sf-gradient-fade--b: linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg));

      /* ----------------------------------------------------------
         Shadow glow
         ---------------------------------------------------------- */
      --sf-shadow-glow: 0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7));

    }
  }

  /* ── @supports gate: oklch(from …) + sign() ──────────────────
     Chrome added oklch(from) in v119 but sign() only in v138
     (Mar 2026). Without this gate, Chrome 119–137 evaluates the
     outer block to true but IACVT-crashes on sign() inside oklch(),
     making all text-on-color and auto-contrast code text invisible. */
  @supports (color: oklch(from red l c h)) and (width: calc(1px * sign(1))) {
    :root {

      /* ----------------------------------------------------------
         Code text — auto-contrasts with --sf-color-code-bg.
         ---------------------------------------------------------- */
      /* Inline-code text colour. Auto-contrasts with --sf-color-code-bg using
         the same luminance formula as --sf-color-text--on-*. This prevents
         invisible text when code appears inside inverted-colour containers
         (e.g. sf-imposter with a dark background where inherited colour is
         near-white). Override with a tint value if desired. */
      --sf-color-code-text: oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);

      /* ----------------------------------------------------------
         Text-on-color — sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic:
         auto-selects light or dark text based on background luminance.
         Uses resolved tokens — works for any user-supplied color.

         CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI).
         Colors in the mid-luminance range (L ≈ 0.52–0.67) may not
         reach 4.5:1 (AA Normal Text) regardless of threshold chosen —
         this is a mathematical limitation of any binary black/white
         decision. The SLASHED configurator will warn users when their
         brand colors fall in this range. For body text on colored
         backgrounds, override --sf-color-text--on-* manually.
         ---------------------------------------------------------- */
      --sf-color-text--on-primary:   oklch(from var(--sf-color-primary)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-tertiary:  oklch(from var(--sf-color-tertiary)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-action:    oklch(from var(--sf-color-action)     clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-neutral:   oklch(from var(--sf-color-neutral)    clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-success:   oklch(from var(--sf-color-success)    clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-warning:   oklch(from var(--sf-color-warning)    clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-info:      oklch(from var(--sf-color-info)       clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-danger:    oklch(from var(--sf-color-danger)     clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-inverse:   oklch(from var(--sf-color-inverse)    clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);

    }
  }

  /* ============================================================
     COLOR PALETTE — numeric ramps, alpha variants + aliases

     Numeric palette steps (-50…-950), alpha variants (-a5…-a80),
     and semantic convenience aliases live in core as the single source
     of truth for the 6 brand colour families. Shade steps mix toward
     --sf-color-surface (tints) or --sf-color-text (shades); the base
     family inverts tint direction so the ramp reads light→dark regardless
     of the base surface value.
     ============================================================ */

  /* ── @supports gate: palette ramps + alpha aliases ── */
  @supports (color: oklch(from red l c h)) {
  :root {

    /* ----------------------------------------------------------
       Palette ramp lightness anchors — PUBLIC-ADVANCED
       Each numeric step is generated in OKLCH by pulling the family
       colour's own lightness a fixed fraction toward an ABSOLUTE target:
       tints (50-400) toward --sf-palette-tint-l, shades (600-950) toward
       --sf-palette-shade-l. 500 = the family colour itself. Because the
       targets are absolute (not the theme's surface/text tokens) and the
       pull is clamped (max()/min()) so a tint can never end darker than
       the base nor a shade lighter, the ramp is MONOTONIC light→dark for
       ANY source colour and any anchor configuration — it cannot fold.
       Per-step pull fractions and chroma taper are baked into each family
       below; these two knobs set how light the lightest / how dark the
       darkest step may reach. The `base` family keeps its own absolute
       ladder (near-white→near-black) and does not read these.
       ---------------------------------------------------------- */
    --sf-palette-tint-l:  0.97;
    --sf-palette-shade-l: 0.1;

    /* ----------------------------------------------------------
       primary
       ---------------------------------------------------------- */
    --sf-color-primary-50: oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h);
    --sf-color-primary-100: oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h);
    --sf-color-primary-200: oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h);
    --sf-color-primary-300: oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h);
    --sf-color-primary-400: oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h);
    --sf-color-primary-500: var(--sf-color-primary);
    --sf-color-primary-600: oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h);
    --sf-color-primary-700: oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h);
    --sf-color-primary-800: oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h);
    --sf-color-primary-900: oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h);
    --sf-color-primary-950: oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h);

    --sf-color-primary-a5:  oklch(from var(--sf-color-primary) l c h / 0.05);
    --sf-color-primary-a10: oklch(from var(--sf-color-primary) l c h / 0.10);
    --sf-color-primary-a30: oklch(from var(--sf-color-primary) l c h / 0.30);
    --sf-color-primary-a50: oklch(from var(--sf-color-primary) l c h / 0.50);
    --sf-color-primary-a80: oklch(from var(--sf-color-primary) l c h / 0.80);

    --sf-color-primary-superlight: var(--sf-color-primary-50);
    --sf-color-primary-xlight:     var(--sf-color-primary-200);
    --sf-color-primary-lighter:    var(--sf-color-primary-400);
    --sf-color-primary-darker:     var(--sf-color-primary-600);
    --sf-color-primary-xdark:      var(--sf-color-primary-800);
    --sf-color-primary-superdark:  var(--sf-color-primary-950);
    --sf-color-primary--hover:     var(--sf-color-primary-darker);
    --sf-color-primary--active:    var(--sf-color-primary-xdark);
    --sf-color-primary-subtle:     var(--sf-color-primary-a10);
    --sf-color-primary-muted:      var(--sf-color-primary-a30);
    --sf-color-primary-tint:      var(--sf-color-primary-a5);



    /* ----------------------------------------------------------
       secondary
       ---------------------------------------------------------- */
    --sf-color-secondary-50: oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h);
    --sf-color-secondary-100: oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h);
    --sf-color-secondary-200: oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h);
    --sf-color-secondary-300: oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h);
    --sf-color-secondary-400: oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h);
    --sf-color-secondary-500: var(--sf-color-secondary);
    --sf-color-secondary-600: oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h);
    --sf-color-secondary-700: oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h);
    --sf-color-secondary-800: oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h);
    --sf-color-secondary-900: oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h);
    --sf-color-secondary-950: oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h);

    --sf-color-secondary-a5:  oklch(from var(--sf-color-secondary) l c h / 0.05);
    --sf-color-secondary-a10: oklch(from var(--sf-color-secondary) l c h / 0.10);
    --sf-color-secondary-a30: oklch(from var(--sf-color-secondary) l c h / 0.30);
    --sf-color-secondary-a50: oklch(from var(--sf-color-secondary) l c h / 0.50);
    --sf-color-secondary-a80: oklch(from var(--sf-color-secondary) l c h / 0.80);

    --sf-color-secondary-superlight: var(--sf-color-secondary-50);
    --sf-color-secondary-xlight:     var(--sf-color-secondary-200);
    --sf-color-secondary-lighter:    var(--sf-color-secondary-400);
    --sf-color-secondary-darker:     var(--sf-color-secondary-600);
    --sf-color-secondary-xdark:      var(--sf-color-secondary-800);
    --sf-color-secondary-superdark:  var(--sf-color-secondary-950);
    --sf-color-secondary--hover:     var(--sf-color-secondary-darker);
    --sf-color-secondary--active:    var(--sf-color-secondary-xdark);
    --sf-color-secondary-subtle:     var(--sf-color-secondary-a10);
    --sf-color-secondary-muted:      var(--sf-color-secondary-a30);
    --sf-color-secondary-tint:      var(--sf-color-secondary-a5);



    /* ----------------------------------------------------------
       tertiary
       ---------------------------------------------------------- */
    --sf-color-tertiary-50: oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h);
    --sf-color-tertiary-100: oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h);
    --sf-color-tertiary-200: oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h);
    --sf-color-tertiary-300: oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h);
    --sf-color-tertiary-400: oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h);
    --sf-color-tertiary-500: var(--sf-color-tertiary);
    --sf-color-tertiary-600: oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h);
    --sf-color-tertiary-700: oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h);
    --sf-color-tertiary-800: oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h);
    --sf-color-tertiary-900: oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h);
    --sf-color-tertiary-950: oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h);

    --sf-color-tertiary-a5:  oklch(from var(--sf-color-tertiary) l c h / 0.05);
    --sf-color-tertiary-a10: oklch(from var(--sf-color-tertiary) l c h / 0.10);
    --sf-color-tertiary-a30: oklch(from var(--sf-color-tertiary) l c h / 0.30);
    --sf-color-tertiary-a50: oklch(from var(--sf-color-tertiary) l c h / 0.50);
    --sf-color-tertiary-a80: oklch(from var(--sf-color-tertiary) l c h / 0.80);

    --sf-color-tertiary-superlight: var(--sf-color-tertiary-50);
    --sf-color-tertiary-xlight:     var(--sf-color-tertiary-200);
    --sf-color-tertiary-lighter:    var(--sf-color-tertiary-400);
    --sf-color-tertiary-darker:     var(--sf-color-tertiary-600);
    --sf-color-tertiary-xdark:      var(--sf-color-tertiary-800);
    --sf-color-tertiary-superdark:  var(--sf-color-tertiary-950);
    --sf-color-tertiary--hover:     var(--sf-color-tertiary-darker);
    --sf-color-tertiary--active:    var(--sf-color-tertiary-xdark);
    --sf-color-tertiary-subtle:     var(--sf-color-tertiary-a10);
    --sf-color-tertiary-muted:      var(--sf-color-tertiary-a30);
    --sf-color-tertiary-tint:      var(--sf-color-tertiary-a5);



    /* ----------------------------------------------------------
       action
       ---------------------------------------------------------- */
    --sf-color-action-50: oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h);
    --sf-color-action-100: oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h);
    --sf-color-action-200: oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h);
    --sf-color-action-300: oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h);
    --sf-color-action-400: oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h);
    --sf-color-action-500: var(--sf-color-action);
    --sf-color-action-600: oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h);
    --sf-color-action-700: oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h);
    --sf-color-action-800: oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h);
    --sf-color-action-900: oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h);
    --sf-color-action-950: oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h);

    --sf-color-action-a5:  oklch(from var(--sf-color-action) l c h / 0.05);
    --sf-color-action-a10: oklch(from var(--sf-color-action) l c h / 0.10);
    --sf-color-action-a30: oklch(from var(--sf-color-action) l c h / 0.30);
    --sf-color-action-a50: oklch(from var(--sf-color-action) l c h / 0.50);
    --sf-color-action-a80: oklch(from var(--sf-color-action) l c h / 0.80);

    --sf-color-action-superlight: var(--sf-color-action-50);
    --sf-color-action-xlight:     var(--sf-color-action-200);
    --sf-color-action-lighter:    var(--sf-color-action-400);
    --sf-color-action-darker:     var(--sf-color-action-600);
    --sf-color-action-xdark:      var(--sf-color-action-800);
    --sf-color-action-superdark:  var(--sf-color-action-950);
    --sf-color-action--hover:     var(--sf-color-action-darker);
    --sf-color-action--active:    var(--sf-color-action-xdark);
    --sf-color-action-subtle:     var(--sf-color-action-a10);
    --sf-color-action-muted:      var(--sf-color-action-a30);
    --sf-color-action-tint:      var(--sf-color-action-a5);



    /* ----------------------------------------------------------
       neutral
       ---------------------------------------------------------- */
    --sf-color-neutral-50: oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h);
    --sf-color-neutral-100: oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h);
    --sf-color-neutral-200: oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h);
    --sf-color-neutral-300: oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h);
    --sf-color-neutral-400: oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h);
    --sf-color-neutral-500: var(--sf-color-neutral);
    --sf-color-neutral-600: oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h);
    --sf-color-neutral-700: oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h);
    --sf-color-neutral-800: oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h);
    --sf-color-neutral-900: oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h);
    --sf-color-neutral-950: oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h);

    --sf-color-neutral-a5:  oklch(from var(--sf-color-neutral) l c h / 0.05);
    --sf-color-neutral-a10: oklch(from var(--sf-color-neutral) l c h / 0.10);
    --sf-color-neutral-a30: oklch(from var(--sf-color-neutral) l c h / 0.30);
    --sf-color-neutral-a50: oklch(from var(--sf-color-neutral) l c h / 0.50);
    --sf-color-neutral-a80: oklch(from var(--sf-color-neutral) l c h / 0.80);

    --sf-color-neutral-superlight: var(--sf-color-neutral-50);
    --sf-color-neutral-xlight:     var(--sf-color-neutral-200);
    --sf-color-neutral-lighter:    var(--sf-color-neutral-400);
    --sf-color-neutral-darker:     var(--sf-color-neutral-600);
    --sf-color-neutral-xdark:      var(--sf-color-neutral-800);
    --sf-color-neutral-superdark:  var(--sf-color-neutral-950);
    --sf-color-neutral--hover:     var(--sf-color-neutral-darker);
    --sf-color-neutral--active:    var(--sf-color-neutral-xdark);
    --sf-color-neutral-subtle:     var(--sf-color-neutral-a10);
    --sf-color-neutral-muted:      var(--sf-color-neutral-a30);
    --sf-color-neutral-tint:      var(--sf-color-neutral-a5);



    /* ----------------------------------------------------------
       base — fixed-lightness ramp (mode-independent, monotonic)
       ────────────────────────────────────────────────────────
       base is a surface-elevation family, not a mid-lightness brand
       colour. The ramp uses oklch() relative syntax with fixed L steps
       spanning 0.97 → 0.06, preserving the base source's hue and chroma.
       50 is always near-white; 950 is always near-black regardless of
       light/dark mode or the source colour's position.

       OKLCH L values (fixed, mode-independent):
         base-50  = 0.97   near-white
         base-100 = 0.94   very light gray
         base-200 = 0.88   light gray
         base-300 = 0.78   medium-light gray
         base-400 = 0.65   medium gray
         base-500 = 0.50   mid gray
         base-600 = 0.37   medium-dark gray
         base-700 = 0.27   dark gray
         base-800 = 0.17   very dark gray
         base-900 = 0.11   near-black
         base-950 = 0.06   near-black

       For mode-adaptive surface differentiation use the surface tokens
       (--sf-color-inset / --sf-color-raised / --sf-color-bg) which derive
       from --sf-color-base via relative oklch and adapt to light/dark mode.
       For overlays use alpha variants (-a10…-a80).
       ---------------------------------------------------------- */
    --sf-color-base-50:  oklch(from var(--sf-color-base) 0.97 c h);
    --sf-color-base-100: oklch(from var(--sf-color-base) 0.94 c h);
    --sf-color-base-200: oklch(from var(--sf-color-base) 0.88 c h);
    --sf-color-base-300: oklch(from var(--sf-color-base) 0.78 c h);
    --sf-color-base-400: oklch(from var(--sf-color-base) 0.65 c h);
    --sf-color-base-500: oklch(from var(--sf-color-base) 0.50 c h);
    --sf-color-base-600: oklch(from var(--sf-color-base) 0.37 c h);
    --sf-color-base-700: oklch(from var(--sf-color-base) 0.27 c h);
    --sf-color-base-800: oklch(from var(--sf-color-base) 0.17 c h);
    --sf-color-base-900: oklch(from var(--sf-color-base) 0.11 c h);
    --sf-color-base-950: oklch(from var(--sf-color-base) 0.06 c h);

    --sf-color-base-a5:  oklch(from var(--sf-color-base) l c h / 0.05);
    --sf-color-base-a10: oklch(from var(--sf-color-base) l c h / 0.10);
    --sf-color-base-a30: oklch(from var(--sf-color-base) l c h / 0.30);
    --sf-color-base-a50: oklch(from var(--sf-color-base) l c h / 0.50);
    --sf-color-base-a80: oklch(from var(--sf-color-base) l c h / 0.80);

    /* No relative aliases (lighter/darker/xlight/…) on base: it is an
       absolute scale, so a step's name would lie depending on where the
       source sits (e.g. "lighter" would be darker than a near-white base
       in light mode). For relative, mode-adaptive surface elevation use
       --sf-color-bg / --sf-color-inset / --sf-color-raised instead. */
    --sf-color-base--hover:     oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.04 + var(--sf-is-dark) * 0.08), 0.99) c h);
    --sf-color-base--active:    oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h);
    --sf-color-base-subtle:     var(--sf-color-base-a10);
    --sf-color-base-muted:      var(--sf-color-base-a30);
    --sf-color-base-tint:      var(--sf-color-base-a5);


  }
  }

  /* ============================================================
     NON-COLOR DESIGN TOKENS
     ============================================================ */

  :root {

    /* ----------------------------------------------------------
       Scale multipliers
       ---------------------------------------------------------- */
    --sf-space-scale:        1;
    --sf-text-scale:         1;
    --sf-text-display-scale: 1;
    --sf-radius-scale:       1;
    --sf-motion-scale:       1;
    --sf-section-scale:      1;

    /* ----------------------------------------------------------
       Font families
       ---------------------------------------------------------- */
    --sf-font-body:    system-ui, -apple-system, sans-serif;
    --sf-font-heading: var(--sf-font-body);
    --sf-font-display: var(--sf-font-heading);
    --sf-font-mono:    ui-monospace, monospace;

    /* Optional system-font stacks (zero-cost, no @import) */
    --sf-font-humanist:  "Seravek", "Gill Sans Nova", "Ubuntu", "Calibri", "DejaVu Sans", source-sans-pro, sans-serif;
    --sf-font-geometric: "Avenir", "Montserrat", "Corbel", "URW Gothic", source-sans-pro, sans-serif;
    --sf-font-slab:      "Rockwell", "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;

    /* Opt-in OpenType / variable-font controls (token-only, not applied by the framework) */
    --sf-font-features:  normal;  /* e.g. "cv11", "ss01" */
    --sf-font-variation: normal;  /* e.g. "wght" 450, "opsz" 32 */
    --sf-optical-sizing: auto;

    /* ----------------------------------------------------------
       Font weights
       ---------------------------------------------------------- */
    /* Base weights — trimmed, recognizable names. For an off-scale weight
       (e.g. 100/900 display work) write font-weight: 100 directly, or re-tune
       a role token below globally — every weight here is overridable. */
    --sf-font-weight-light:    300;
    --sf-font-weight-normal:   400;
    --sf-font-weight-medium:   500;
    --sf-font-weight-semibold: 600;
    --sf-font-weight-bold:     700;

    /* Semantic role aliases — set intent, not a number. Override these to
       reweight the whole site (e.g. --sf-font-weight-body: 300). */
    --sf-font-weight-body:        var(--sf-font-weight-normal);    /* body copy            */
    --sf-font-weight-heading:     var(--sf-font-weight-semibold);  /* h1–h6                */
    --sf-font-weight-display:     var(--sf-font-weight-bold);      /* hero / display       */
    --sf-font-weight-interactive: var(--sf-font-weight-semibold);  /* buttons, badges, nav.
       Note: "interactive" here names a TYPOGRAPHY WEIGHT TIER; .sf-card--interactive
       names a card BEHAVIOUR modifier. Deliberate coexistence (different property
       spaces) — do not introduce a third meaning of "interactive". */
    --sf-font-weight-strong:      var(--sf-font-weight-bold);      /* <strong> / emphasis  */

    /* ----------------------------------------------------------
       Font sizes — fluid
       ---------------------------------------------------------- */
    /* ----------------------------------------------------------
       Font sizes — fluid (generative)
       Computed from --sf-text-ratio-{min,max} + --sf-text-base-{min,max}
       over the --sf-fluid-{min,max}-vw range. Step exponent N is relative
       to --sf-text-m (N=0): 2xs=-3 … 4xl=5. Override the inputs above to
       reshape the whole scale; override an individual --sf-text-* to pin one.
       ---------------------------------------------------------- */
    --sf-text-2xs: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale));
    --sf-text-xs:  calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale));
    --sf-text-s:   calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale));
    --sf-text-m:   calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale));
    --sf-text-l:   calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale));
    --sf-text-xl:  calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale));
    --sf-text-2xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale));
    --sf-text-3xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale));
    --sf-text-4xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale));

    /* Display — reuses the type ratios with its own larger base (s=0, m=1, l=2). */
    --sf-text-display-s: calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale));
    --sf-text-display-m: calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale));
    --sf-text-display-l: calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale));

    /* ----------------------------------------------------------
       Line heights & letter spacing
       ---------------------------------------------------------- */
    --sf-leading-tight:   1.1;
    --sf-leading-snug:    1.3;
    --sf-leading-normal:  1.5;
    --sf-leading-relaxed: 1.625;

    /* Leading taper — progressive tightener for the per-size line-height
       tokens below. Each step up the type scale subtracts
       `step-index × taper` from that step's default leading.
       0 (default) keeps the curated stepped defaults; try 0.02 for a smooth
       metric taper across the scale. */
    --sf-leading-taper: 0;

    /* Display line-heights — display sizes need tighter leading than the
       --sf-leading-* scale provides. Not auto-applied (display sizes have no
       dedicated element); wire alongside font-size:
         h1.hero { font-size: var(--sf-text-display-l);
                   line-height: var(--sf-display-l-line-height); } */
    --sf-display-s-line-height: var(--sf-leading-tight);
    --sf-display-m-line-height: 1.05;
    --sf-display-l-line-height: 1;

    --sf-tracking-tight:   -0.025em;
    --sf-tracking-normal:   0;
    --sf-tracking-wide:     0.025em;
    --sf-tracking-wider:    0.05em;
    --sf-tracking-widest:   0.1em;

    /* Numeric figure style — tabular-nums gives every digit a fixed
       advance width so numbers line up in vertical columns (price
       lists, totals, invoices, dashboards). Consumed by number inputs
       in optional/forms.css and available to BEM components, e.g.
       `.price { font-variant-numeric: var(--sf-font-numeric); }`.
       Universal browser support. */
    --sf-font-numeric: tabular-nums;

    /* ----------------------------------------------------------
       Per-size typography sub-properties
       Not auto-applied — opt-in composable overrides. Wire alongside
       font-size in your own rules:
         .element { line-height: var(--sf-text-xl-line-height); }
       Small text: relaxed leading. Body: normal. Large: progressively
       tighter. --sf-leading-taper (default 0) tightens the whole
       scale at once.
       ---------------------------------------------------------- */

    --sf-text-2xs-line-height:            var(--sf-leading-relaxed);
    --sf-text-2xs-font-weight:            var(--sf-font-weight-body);
    --sf-text-2xs-letter-spacing:         var(--sf-tracking-normal);
    --sf-text-2xs-max-width:              55ch;

    --sf-text-xs-line-height:             calc(var(--sf-leading-relaxed) - 1 * var(--sf-leading-taper));
    --sf-text-xs-font-weight:             var(--sf-font-weight-body);
    --sf-text-xs-letter-spacing:          var(--sf-tracking-normal);
    --sf-text-xs-max-width:               60ch;

    --sf-text-s-line-height:              calc(var(--sf-leading-relaxed) - 2 * var(--sf-leading-taper));
    --sf-text-s-font-weight:              var(--sf-font-weight-body);
    --sf-text-s-letter-spacing:           var(--sf-tracking-normal);
    --sf-text-s-max-width:                65ch;

    --sf-text-m-line-height:              calc(var(--sf-leading-normal) - 3 * var(--sf-leading-taper));
    --sf-text-m-font-weight:              var(--sf-font-weight-body);
    --sf-text-m-letter-spacing:           var(--sf-tracking-normal);
    --sf-text-m-max-width:                65ch;

    --sf-text-l-line-height:              calc(var(--sf-leading-normal) - 4 * var(--sf-leading-taper));
    --sf-text-l-font-weight:              var(--sf-font-weight-body);
    --sf-text-l-letter-spacing:           var(--sf-tracking-normal);
    --sf-text-l-max-width:                none;

    --sf-text-xl-line-height:             calc(var(--sf-leading-snug) - 5 * var(--sf-leading-taper));
    --sf-text-xl-font-weight:             var(--sf-font-weight-body);
    --sf-text-xl-letter-spacing:          var(--sf-tracking-normal);
    --sf-text-xl-max-width:               none;

    --sf-text-2xl-line-height:            calc(var(--sf-leading-snug) - 6 * var(--sf-leading-taper));
    --sf-text-2xl-font-weight:            var(--sf-font-weight-heading);
    --sf-text-2xl-letter-spacing:         var(--sf-tracking-normal);
    --sf-text-2xl-max-width:              none;

    --sf-text-3xl-line-height:            calc(var(--sf-leading-tight) - 7 * var(--sf-leading-taper));
    --sf-text-3xl-font-weight:            var(--sf-font-weight-heading);
    --sf-text-3xl-letter-spacing:         var(--sf-tracking-tight);
    --sf-text-3xl-max-width:              none;

    --sf-text-4xl-line-height:            calc(var(--sf-leading-tight) - 8 * var(--sf-leading-taper));
    --sf-text-4xl-font-weight:            var(--sf-font-weight-heading);
    --sf-text-4xl-letter-spacing:         var(--sf-tracking-tight);
    --sf-text-4xl-max-width:              none;

    /* ----------------------------------------------------------
       Icon sizes — em-based by design.
       Icons are sized in em so they scale with the surrounding
       text: an icon in a button at --sf-text-m renders at 1rem;
       moved into a heading at --sf-text-2xl, the same icon scales
       up automatically.
       Global scaling flows transitively through --sf-text-scale
       (parent text grows → em-icons grow) — there is no separate
       --sf-icon-scale knob by design. clamp() is intentionally
       absent here: making icons fluid INDEPENDENTLY of context
       would break the relationship to surrounding text.
       Capped at --2xl (4em ≈ 64px on default text); above that the
       element ceases to be an icon and becomes an illustration.
       ---------------------------------------------------------- */
    --sf-icon-xs:  0.875em;
    --sf-icon-s:   1em;
    --sf-icon-m:   1.5em;
    --sf-icon-l:   2em;
    --sf-icon-xl:  3em;
    --sf-icon-2xl: 4em;

    /* ----------------------------------------------------------
       Spacing — fixed
       ---------------------------------------------------------- */
    --sf-space-none:   0;
    --sf-space-px:     1px;

    /* Spacing — fluid (generative). Same engine as type; space uses base_max=2
       (more dramatic growth than type's 1.25). Step exponent N relative to
       --sf-space-m (N=0): 2xs=-3 … 4xl=5. */
    --sf-space-2xs: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale));
    --sf-space-xs:  calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale));
    --sf-space-s:   calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale));
    --sf-space-m:   calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale));
    --sf-space-l:   calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale));
    --sf-space-xl:  calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale));
    --sf-space-2xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale));
    --sf-space-3xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale));
    --sf-space-4xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale));

    /* ----------------------------------------------------------
       Density — the compact ↔ comfortable dial for interactive
       control GEOMETRY. 1 = default; <1 packs controls tighter
       (dashboards, data tables, power-user tools), >1 loosens them.
       It is a discrete design/product choice (or a user preference),
       NOT a viewport response — control height must never shrink on
       small screens where touch targets need to be larger, so unlike
       the fluid text and space scales the size ladder stays non-fluid
       and is scaled only by this deliberate knob. Orthogonal to
       --sf-space-scale (overall whitespace) and --sf-section-scale
       (macro section rhythm); combine them for a fully compact UI.
       Accessibility is unaffected: the coarse-pointer floor lives on
       --sf-touch-target (core/accessibility.css), never on a rung, so
       a small --sf-density can't shrink native controls below the
       WCAG target. Like the other global multipliers it is a :root
       dial — the size ladder is computed at :root and inherits, so a
       nested override does not retroactively rescale it (same
       computed-value rule as --sf-space-scale et al.). */
    --sf-density: 1;

    /* ----------------------------------------------------------
       UI sizes — a purely geometric rung ladder (+0.5rem / 8px per
       step: 24 · 32 · 40 · 48 · 56 px at density 1). These are free
       design knobs, scaled by --sf-density; overriding a rung just
       rescales that component height. Accessibility floors live on
       their own tokens (--sf-touch-target), never on a rung.
       ---------------------------------------------------------- */
    --sf-size-xs: calc(1.5rem * var(--sf-density));
    --sf-size-s:  calc(2rem   * var(--sf-density));
    --sf-size-m:  calc(2.5rem * var(--sf-density));
    --sf-size-l:  calc(3rem   * var(--sf-density));
    --sf-size-xl: calc(3.5rem * var(--sf-density));

    /* ----------------------------------------------------------
       Containers
       ---------------------------------------------------------- */
    --sf-container-narrow:  38rem;
    --sf-container-prose:   65ch;
    --sf-container-default: 75rem;
    --sf-container-wide:    90rem;
    --sf-container-full:    100%;

    /* ----------------------------------------------------------
       Aspect ratios
       ---------------------------------------------------------- */
    --sf-ratio-square:   1;
    --sf-ratio-video:    16 / 9;
    --sf-ratio-cinema:   21 / 9;
    --sf-ratio-4-3:      4 / 3;
    --sf-ratio-3-2:      3 / 2;
    --sf-ratio-portrait: 3 / 4;
    --sf-ratio-golden:   1.618 / 1;

    /* ----------------------------------------------------------
       Border widths
       --sf-border-width-hairline: device-pixel-dependent. On 1x DPR
       displays (Windows non-Retina) the browser will round 0.5px up
       to 1px, so it visually matches --sf-border-width-1. On 2x+
       DPR (macOS/iOS Retina, most modern phones) it renders as a
       true half-pixel hairline. Use it for subtle separators where
       1px on low-DPR is acceptable.
       ---------------------------------------------------------- */
    /* --sf-border-scale — global multiplier for border widths. Set to 0 for
       borderless, 2 for heavy borders. Hairline is intentionally excluded
       (it's a device-pixel constant, not a design variable). */
    --sf-border-scale:           1;
    --sf-border-width-hairline: 0.5px;
    --sf-border-width-1:        calc(1px * var(--sf-border-scale, 1));
    --sf-border-width-2:        calc(2px * var(--sf-border-scale, 1));
    --sf-border-width-3:        calc(3px * var(--sf-border-scale, 1));
    --sf-border-width-4:        calc(4px * var(--sf-border-scale, 1));

    /* ----------------------------------------------------------
       Border style — global knob paired with --sf-border-width-* and
       --sf-color-border*. Consumer BEM:
         .my-card { border: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border); }
       Set once on :root to restyle every framework border, or override
       per element. For one-off decorative styles use the CSS keyword
       directly (e.g. `border-style: dashed`).
       ---------------------------------------------------------- */
    --sf-border-style: solid;     /* default */

    /* ----------------------------------------------------------
       Border shorthands — convenience tokens composing width, style,
       and color into a single value for the common cases.
       subtle / strong vary COLOR CONTRAST only — all three use
       --sf-border-width-1 (1px). This matches the IBM Carbon and
       GitHub Primer convention where subtle/strong name a color axis,
       not a weight axis. For a thicker border compose manually:
         border: var(--sf-border-width-2) var(--sf-border-style) var(--sf-color-border--strong)
       Usage: border: var(--sf-border);
              border-bottom: var(--sf-border-subtle);
       ---------------------------------------------------------- */
    --sf-border:        var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border);
    --sf-border-subtle: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle);
    --sf-border-strong: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong);

    /* ----------------------------------------------------------
       Divider — global separator system. Drives `hr` (base) and
       the `.sf-divider` layout primitive.
       ---------------------------------------------------------- */
    --sf-divider-width: var(--sf-border-width-1);
    --sf-divider-style: solid;
    --sf-divider-color: var(--sf-color-border);
    --sf-divider-gap:   var(--sf-space-m);

    /* ----------------------------------------------------------
       Border radius — scale ramp, all multiplied by --sf-radius-scale.
       ---------------------------------------------------------- */
    --sf-radius-none: 0;
    --sf-radius-2xs:  calc(1px  * var(--sf-radius-scale));
    --sf-radius-xs:   calc(2px  * var(--sf-radius-scale));
    --sf-radius-s:    calc(4px  * var(--sf-radius-scale));
    --sf-radius-m:    calc(8px  * var(--sf-radius-scale));
    --sf-radius-l:    calc(12px * var(--sf-radius-scale));
    --sf-radius-xl:   calc(16px * var(--sf-radius-scale));
    --sf-radius-2xl:  calc(24px * var(--sf-radius-scale));
    --sf-radius-3xl:  calc(32px * var(--sf-radius-scale));
    --sf-radius-4xl:  calc(48px * var(--sf-radius-scale));
    /* ----------------------------------------------------------
       Full/pill — topological constants, not scaled by --sf-radius-scale.
       A pill/circle is a topological constant, not a relative size:
       any --sf-radius-scale: 0 ("sharp" design system) should still
       render pill buttons as pills. 9999px is a magic-number convention
       large enough to clip to half the shorter edge for any realistic UI.
       ---------------------------------------------------------- */
    --sf-radius-full: 9999px;
    /* Pill — semantic alias of --sf-radius-full. Reach for this name
       on rectangles you want capsule-shaped (badges, tags, chips); use
       --sf-radius-full when you mean "as round as topologically possible". */
    --sf-radius-pill: var(--sf-radius-full);
    /* Concentric helper — outer radius for a container that wraps
       content padded by --sf-component-pad with inner radius m.
       Keeps inner elements visually proportional inside a padded box.
       Override per use:
         .my-card { border-radius: var(--sf-radius-outer); }
       Maths: outer = inner + padding ⇒ aligned curves at corners. */
    --sf-radius-outer: calc(var(--sf-radius-m) + var(--sf-component-pad));

    /* Opt-in global media radius — 0 by default (off). Set to a
       --sf-radius-* value to round <img>/<figure> globally:
         :root { --sf-media-radius: var(--sf-radius-m); }
       Applied via :where() in core/base.css so it never fights
       .sf-bg-layer or a component's own radius. */
    --sf-media-radius: 0;

    /* ----------------------------------------------------------
       Shadows — BEM consumer API
       Use in your own classes: .card { box-shadow: var(--sf-shadow-m); }
       ---------------------------------------------------------- */


    /* ----------------------------------------------------------
       Blur & opacity
       One frosted-surface default (nav/overlay glass) and one general
       de-emphasis opacity. For other amounts write the value directly:
       backdrop-filter: blur(24px); opacity: .3;
       (--sf-opacity-disabled is defined with the interaction tokens.)
       ---------------------------------------------------------- */
    --sf-blur:          12px;
    --sf-opacity-muted: 0.5;

    /* ----------------------------------------------------------
       Motion & easing
       ---------------------------------------------------------- */
    --sf-duration-none:    0ms;
    --sf-duration-instant: calc(100ms * var(--sf-motion-scale));
    --sf-duration-fast:    calc(150ms * var(--sf-motion-scale));
    --sf-duration-normal:  calc(250ms * var(--sf-motion-scale));
    --sf-duration-slow:    calc(400ms * var(--sf-motion-scale));
    --sf-duration-slower:  calc(600ms * var(--sf-motion-scale));

    /* Opt-in light/dark cross-fade duration — the knob for .sf-theme-transition
       (core/themes.css). Registered <color> tokens make the fade possible;
       this controls how long it takes. */
    --sf-theme-transition-duration: calc(300ms * var(--sf-motion-scale));

    --sf-ease-linear:  linear;
    --sf-ease-out:     cubic-bezier(0.25, 0, 0.15, 1);
    --sf-ease-in:      cubic-bezier(0.5, 0, 0.75, 0.25);
    --sf-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
    --sf-ease-spring:    linear(0, 0.5, 1.1, 0.95, 1.02, 1);
    --sf-ease-elastic:   linear(0, 0.3, 1.2, 0.9, 1.05, 1);
    --sf-ease-bounce:    linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1);
    --sf-ease-overshoot: linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1);

    /* ----------------------------------------------------------
       Animation presets — pair keyframes (core/motion.css) with
       duration + easing. Use directly: animation: var(--sf-animation-fade-in);
       ---------------------------------------------------------- */
    --sf-animation-fade-in:        sf-fade-in        var(--sf-duration-normal) var(--sf-ease-out)       both;
    --sf-animation-fade-out:       sf-fade-out       var(--sf-duration-normal) var(--sf-ease-in)        both;
    --sf-animation-slide-in-up:    sf-slide-in-up    var(--sf-duration-normal) var(--sf-ease-out)       both;
    --sf-animation-slide-in-down:  sf-slide-in-down  var(--sf-duration-normal) var(--sf-ease-out)       both;
    --sf-animation-slide-in-left:  sf-slide-in-left  var(--sf-duration-normal) var(--sf-ease-out)       both;
    --sf-animation-slide-in-right: sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out)       both;
    --sf-animation-scale-up:       sf-scale-up       var(--sf-duration-normal) var(--sf-ease-overshoot) both;
    --sf-animation-scale-down:     sf-scale-down     var(--sf-duration-normal) var(--sf-ease-in)        both;
    --sf-animation-slide-out-up:    sf-slide-out-up    var(--sf-duration-normal) var(--sf-ease-in) both;
    --sf-animation-slide-out-down:  sf-slide-out-down  var(--sf-duration-normal) var(--sf-ease-in) both;
    --sf-animation-slide-out-left:  sf-slide-out-left  var(--sf-duration-normal) var(--sf-ease-in) both;
    --sf-animation-slide-out-right: sf-slide-out-right var(--sf-duration-normal) var(--sf-ease-in) both;
    --sf-animation-color-pulse:    sf-color-pulse    var(--sf-duration-slow)   var(--sf-ease-in-out)    infinite;
    --sf-animation-ping:           sf-ping           var(--sf-duration-slow)   var(--sf-ease-out)       infinite;
    --sf-animation-blink:          sf-blink          calc(1s * var(--sf-motion-scale)) steps(1, end) infinite;
    --sf-animation-float:          sf-float          calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite;
    --sf-animation-spin:    sf-spin var(--sf-duration-slower) linear infinite;
    --sf-animation-shimmer: sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite;

    /* Stagger step — the per-item delay increment consumed by the .sf-stagger
       utility (core/motion.css). One knob retunes the whole choreography; the
       class multiplies it by the child's index and by --sf-motion-scale, so the
       rhythm follows the motion knob without baking the scale in here. */
    --sf-stagger-step: 75ms;

    /* Hover-transform magnitudes — the .sf-hover-* utilities (optional/
       utilities.css) read these so the effect strength is one global knob per
       axis rather than hard-coded per class. --grow/--shrink are scale factors;
       --lift is the float/sink translate distance; --slide is the slide
       distance. */
    --sf-hover-grow-scale:   1.05;
    --sf-hover-shrink-scale: 0.95;
    --sf-hover-lift:         0.25em;
    --sf-hover-slide:        0.5em;

    /* ----------------------------------------------------------
       Scroll-driven animation range — consumer API. Attach these
       to your own scroll-timeline via animation-range. Not consumed
       by the framework itself; intended for BEM component authors.
       ---------------------------------------------------------- */
    --sf-scroll-timeline-range-start: entry 0%;
    --sf-scroll-timeline-range-end:   cover 30%;

    /* Exit counterpart — element is well into view before starting to
       leave, finishing exactly as it scrolls fully out. */
    --sf-scroll-timeline-range-exit-start: cover 70%;
    --sf-scroll-timeline-range-exit-end:   exit 100%;

    /* ----------------------------------------------------------
       Mask scrim — edge-fade stops for scroll reels / overflow.
       Use in a mask-image gradient to fade content near an edge:
         mask-image: linear-gradient(to right,
           transparent 0, #000 var(--sf-mask-scrim-start),
           #000 calc(100% - var(--sf-mask-scrim-end)), transparent 100%);
       ---------------------------------------------------------- */
    --sf-mask-scrim-start: var(--sf-space-l);
    --sf-mask-scrim-end:   var(--sf-space-l);

    /* ----------------------------------------------------------
       Z-index
       ---------------------------------------------------------- */
    /* Semantic z-index ladder — UI roles, not magic integers. Follows the
       Bootstrap/Chakra convention (1000-base, ordered by stacking role) so
       the names are familiar and the gaps leave room to insert custom layers.
       Low-level rungs (below/base/raised) handle local stacking; the named
       roles handle page chrome and overlays.

       Modal / popover / tooltip components render in the browser TOP LAYER
       (native <dialog> / [popover]), ordered above the page independently of
       z-index. The --sf-z-modal / --sf-z-overlay / --sf-z-tooltip rungs are
       the fallback for non-top-layer implementations that must beat the page. */
    --sf-z-below:  -1;
    --sf-z-base:    0;
    --sf-z-raised:  1;
    --sf-z-sticky:   1000;  /* sticky headers / sidebars            */
    --sf-z-fixed:    1010;  /* fixed app chrome (navbar, FAB)       */
    --sf-z-dropdown: 1020;  /* menus — clear sticky + fixed         */
    --sf-z-overlay:  1030;  /* scrims / non-top-layer backdrops     */
    --sf-z-modal:    1040;  /* dialogs (non-top-layer fallback)     */
    --sf-z-toast:    1050;  /* transient notifications              */
    --sf-z-tooltip:  1060;  /* tooltips — above everything          */

    /* ----------------------------------------------------------
       Layout & a11y
       ---------------------------------------------------------- */
    /* Header height fluidly interpolates between the mobile and desktop
       tokens across the framework viewport range (--sf-fluid-{min,max}-vw),
       the same range used by the fluid type/space scales. Override either
       endpoint to retune; set both equal for a fixed height. clamp() keeps the
       result bounded to the endpoints even when they are overridden. */
    --sf-header-height-mobile:  3.5rem;
    --sf-header-height-desktop: 5rem;
    --sf-header-height: clamp(
      var(--sf-header-height-mobile),
      calc((var(--sf-header-height-desktop) - var(--sf-header-height-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-header-height-mobile)),
      var(--sf-header-height-desktop));
    --sf-sticky-offset-mobile:  var(--sf-header-height-mobile);
    --sf-sticky-offset-desktop: var(--sf-header-height-desktop);
    --sf-sticky-offset: clamp(
      var(--sf-sticky-offset-mobile),
      calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)),
      var(--sf-sticky-offset-desktop));
    /* Focus ring dimensions and minimum touch-target size. Governs keyboard
       navigation affordance and WCAG 2.5.5 pointer-target requirements.
       --sf-touch-target owns the 44px WCAG floor as a literal — it is NOT an
       alias of a --sf-size-* rung, so retuning the size scale can never drag
       the accessibility minimum below spec. Override it deliberately if you
       have your own target policy. */
    --sf-focus-ring-width:  2px;
    --sf-focus-ring-offset: 2px;
    --sf-focus-ring-style:  solid;
    --sf-touch-target:      2.75rem;  /* 44px — WCAG 2.5.5 minimum, independent of the size scale */
    /* Global text-contrast knob. Nudges derived reading-text colours
       toward the extremes (darker in light mode, lighter in dark mode).
       Positive = more contrast; 0 = no change. Consumed by
       --sf-color-text, --sf-color-text--subtle, --sf-color-heading. */
    --sf-contrast-bias:     0;
    /* Lightness crossover for text-on-color auto-contrast. Colours with
       L above this value get dark text; below get light text.
       Default 0.6 guarantees ≥ 3:1 for most colours.
       The binary choice (near-black or near-white) cannot guarantee 4.5:1 when
       the background sits in the L ≈ 0.52–0.67 band — both extremes land near
       the crossover. Two escape hatches:
         1. Shift the threshold per surface — lower (e.g. 0.55) if your brand
            lands near 0.6 and you prefer white text on it:
              @layer slashed.overrides {
                .sf-surface--primary { --sf-contrast-threshold: 0.55; }
              }
         2. Override the resolved token directly when an exact colour is needed:
              @layer slashed.overrides {
                .sf-surface--primary { --sf-color-text--on-primary: oklch(0.15 0 0); }
              }
       CSS `contrast-color()` (currently only in the spec, no browser support)
       will replace this formula once it ships. */
    --sf-contrast-threshold: 0.6;

    /* Device safe-area insets (notches, rounded corners, home indicators).
       0px on devices without intrusions. Read these in your own padding/
       margin; the framework consumes them in layout edge spacing. */
    --sf-safe-top:    env(safe-area-inset-top,    0px);
    --sf-safe-bottom: env(safe-area-inset-bottom, 0px);
    --sf-safe-left:   env(safe-area-inset-left,   0px);
    --sf-safe-right:  env(safe-area-inset-right,  0px);

    /* ----------------------------------------------------------
       Print
       ---------------------------------------------------------- */
    --sf-print-page-margin: 2cm;
    --sf-print-page-size:   a4;
    --sf-print-base-size:   11pt;

    /* ----------------------------------------------------------
       Object fit / position — global defaults for replaced elements.
       Applied in core/base.css on img and video. Override per element
       via inline style="--sf-object-position: top" or in BEM CSS.
       ---------------------------------------------------------- */
    --sf-object-fit:      cover;
    --sf-object-position: 50% 50%;

  }

  /* @supports — Shadow ramp (box-shadow, text-shadow, drop-shadow) */
  @supports (color: oklch(from red l c h)) {
    :root {

      /* Shadow tint — near-black derived from the neutral; the tint simply
         inherits the neutral's own chroma/hue, so a colourless neutral yields
         colourless shadows. Forced dark in both modes; --sf-shadow-strength
         handles dark-mode intensity. Override to a brand colour for explicitly
         tinted shadows — keep it dark or you get bright slabs:
         oklch(from var(--sf-color-primary) 0.15 c h). */
      --sf-shadow-color: oklch(from var(--sf-color-neutral) var(--sf-shadow-lightness) c h);

      /* Elevation shadow ramp — box-shadow presets from xs to 2xl.
         Opacity scales with --sf-shadow-strength so dark-mode boost is automatic. */
      --sf-shadow-none:  none;
      --sf-shadow-xs:    0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7));
      --sf-shadow-s:     0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)),
                         0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), 0.7));
      --sf-shadow-m:     0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)),
                         0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7));
      --sf-shadow-l:     0 2px 4px 0   oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)),
                         0 8px 24px 0  oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)),
                         0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7));
      --sf-shadow-xl:    0 2px 8px 0   oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)),
                         0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), 0.7)),
                         0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7));
      --sf-shadow-2xl:   0 4px 12px 0       oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.6), 0.7)),
                         0 20px 60px 0       oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), 0.7)),
                         0 40px 100px -8px   oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), 0.7));
      --sf-shadow-inner: inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7));
  
      /* ----------------------------------------------------------
         Text shadows — share --sf-shadow-color / --sf-shadow-strength
         ---------------------------------------------------------- */
      --sf-text-shadow-none: none;
      --sf-text-shadow-xs: 0 0.5px 1px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1),   0.7));
      --sf-text-shadow-s:  0 1px 2px   oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7));
      --sf-text-shadow-m:  0 2px 4px   oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2),   0.7));
      --sf-text-shadow-l:  0 4px 8px   oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7));
      --sf-text-shadow-xl: 0 8px 16px  oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3),   0.7));

      /* Drop shadows — for filter: drop-shadow() (respects alpha edges) */
      --sf-drop-shadow-xs: drop-shadow(0 0.5px 1px  oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1),   0.7)));
      --sf-drop-shadow-s:  drop-shadow(0 1px 2px    oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7)));
      --sf-drop-shadow-m:  drop-shadow(0 4px 6px    oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2),   0.7)));
      --sf-drop-shadow-l:  drop-shadow(0 8px 16px   oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7)));
      --sf-drop-shadow-xl: drop-shadow(0 16px 32px  oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3),   0.7)));

    }
  }

  /* ============================================================
     TYPOGRAPHY ALIASES — part of the per-style typography bundle
     for a named text role (body, code, heading, h1–h6, display).
     The full bundle spans font-family, size, weight, line-height,
     and letter-spacing across related tokens.
     ============================================================ */

  :root {
    --sf-body-font-size:     var(--sf-text-m);
    --sf-body-line-height:   var(--sf-leading-normal);
    --sf-body-font-weight:   var(--sf-font-weight-body);
    --sf-body-font-family:   var(--sf-font-body);
    --sf-body-color:         var(--sf-color-text);
    --sf-body-text-wrap:     pretty;
    --sf-body-strong-weight: var(--sf-font-weight-strong);
    --sf-body-em-style:      italic;

    --sf-code-font-size:     0.875em;

    --sf-heading-font-family: var(--sf-font-heading);
    --sf-heading-color:       var(--sf-color-heading);
    --sf-heading-text-wrap:   balance;

    --sf-h1-size:           var(--sf-text-4xl);
    --sf-h1-line-height:    var(--sf-leading-tight);
    --sf-h1-font-weight:    var(--sf-font-weight-heading);
    --sf-h1-letter-spacing: var(--sf-tracking-tight);

    --sf-h2-size:           var(--sf-text-3xl);
    --sf-h2-line-height:    var(--sf-leading-tight);
    --sf-h2-font-weight:    var(--sf-font-weight-heading);
    --sf-h2-letter-spacing: var(--sf-tracking-tight);

    --sf-h3-size:           var(--sf-text-2xl);
    --sf-h3-line-height:    var(--sf-leading-snug);
    --sf-h3-font-weight:    var(--sf-font-weight-heading);
    --sf-h3-letter-spacing: var(--sf-tracking-normal);

    --sf-h4-size:           var(--sf-text-xl);
    --sf-h4-line-height:    var(--sf-leading-snug);
    --sf-h4-font-weight:    var(--sf-font-weight-heading);
    --sf-h4-letter-spacing: var(--sf-tracking-normal);

    --sf-h5-size:           var(--sf-text-l);
    --sf-h5-line-height:    var(--sf-leading-normal);
    --sf-h5-font-weight:    var(--sf-font-weight-heading);
    --sf-h5-letter-spacing: var(--sf-tracking-normal);

    --sf-h6-size:           var(--sf-text-m);
    --sf-h6-line-height:    var(--sf-leading-normal);
    --sf-h6-font-weight:    var(--sf-font-weight-heading);
    --sf-h6-letter-spacing: var(--sf-tracking-wide);

    /* ----------------------------------------------------------
       Heading line-length constraints — public control hooks.
       Default `none` = no constraint. Set to a ch value to cap
       heading width independently of the prose container:
         :root { --sf-h1-max-width: 20ch; --sf-h2-max-width: 28ch; }
       Consumed by h1–h6 in core/base.css.
       ---------------------------------------------------------- */
    --sf-h1-max-width: none;
    --sf-h2-max-width: none;
    --sf-h3-max-width: none;
    --sf-h4-max-width: none;
    --sf-h5-max-width: none;
    --sf-h6-max-width: none;

    /* ----------------------------------------------------------
       Semantic gap tokens — the three rhythms every layout primitive
       defaults to. Also the BEM consumer API: .nav { gap: var(--sf-gap); }
       Override globally to retune all primitives of that rhythm at once.
       ---------------------------------------------------------- */
    --sf-gap:           var(--sf-space-m);  /* loose: between components   */
    --sf-content-gap:   var(--sf-space-s);  /* tight: within content       */
    --sf-gutter:        var(--sf-space-l);  /* wide: page/section gutters  */
    --sf-component-pad: var(--sf-space-m);  /* standard component padding  */
    --sf-field-block:   var(--sf-space-xs); /* form-field block padding — matches the shipped field default (see optional/forms.css) */
    --sf-field-required-marker: " *";
    /* Leading space is baked into the default so consumers can fully
       disable the indicator with `--sf-link-external-marker: ""` —
       without the space a bare "" still left a stray space after the
       link text. Override with your own glyph (include leading space
       if you want one): `:root { --sf-link-external-marker: " →" }`. */
    --sf-link-external-marker: " \2197";  /* " ↗" — consumed by .sf-link-external */
    /* Accessible name for the marker glyph, via the CSS alt-text syntax
       (`content: <value> / <string>`) — read by screen readers in place
       of the glyph, appended after the link's own text. Localise or
       disable (together with the marker) per-site. */
    --sf-link-external-label: "opens in a new window or external site";

    /* ----------------------------------------------------------
       Section padding
       ---------------------------------------------------------- */
    /* All sizes multiply by --sf-section-scale — one dial re-rhythms
       every section on the page (default 1 = no change). */
    --sf-section-pad:     var(--sf-section-pad--m);
    --sf-section-pad--xs: calc(var(--sf-space-xl)  * var(--sf-section-scale));
    --sf-section-pad--s:  calc(var(--sf-space-2xl) * var(--sf-section-scale));
    --sf-section-pad--m:  calc(var(--sf-space-3xl) * var(--sf-section-scale));
    --sf-section-pad--l:  calc(var(--sf-space-4xl) * var(--sf-section-scale));
    --sf-section-pad--xl: calc(var(--sf-space-4xl) * 1.5 * var(--sf-section-scale));
    --sf-section-pad--2xl: calc(var(--sf-space-4xl) * 2 * var(--sf-section-scale));

    /* ----------------------------------------------------------
       Transition shorthands

       All tokens name an explicit property set (no `transition: all`).
       The tempo presets (fast / slow / enter / exit) cover the curated
       "common interactive + entrance" set — color, background-color,
       border-color, box-shadow, opacity, transform, filter.
       ---------------------------------------------------------- */
    --sf-transition-colors:
      color var(--sf-duration-normal) var(--sf-ease-out),
      background-color var(--sf-duration-normal) var(--sf-ease-out),
      border-color var(--sf-duration-normal) var(--sf-ease-out),
      text-decoration-color var(--sf-duration-normal) var(--sf-ease-out),
      fill var(--sf-duration-normal) var(--sf-ease-out),
      stroke var(--sf-duration-normal) var(--sf-ease-out);
    /* Form fields: color/bg at normal pace, border/shadow/opacity at fast
       so focus rings and validation states react immediately. */
    --sf-transition-form-field:
      color              var(--sf-duration-normal) var(--sf-ease-out),
      background-color   var(--sf-duration-normal) var(--sf-ease-out),
      text-decoration-color var(--sf-duration-normal) var(--sf-ease-out),
      fill               var(--sf-duration-normal) var(--sf-ease-out),
      stroke             var(--sf-duration-normal) var(--sf-ease-out),
      border-color       var(--sf-duration-fast)   var(--sf-ease-out),
      box-shadow         var(--sf-duration-fast)   var(--sf-ease-out),
      opacity            var(--sf-duration-fast)   var(--sf-ease-out);
    /* Single-property transition: transform only. */
    --sf-transition-transform: transform var(--sf-duration-normal) var(--sf-ease-out);
    /* Single-property transition: opacity only. */
    --sf-transition-opacity:   opacity var(--sf-duration-normal) var(--sf-ease-out);
    /* Single-property transition: box-shadow only. */
    --sf-transition-shadow:    box-shadow var(--sf-duration-normal) var(--sf-ease-out);

    /* All interactive properties at fast duration — for hover/active states that need to feel snappy. */
    --sf-transition-fast:
      color var(--sf-duration-fast) var(--sf-ease-out),
      background-color var(--sf-duration-fast) var(--sf-ease-out),
      border-color var(--sf-duration-fast) var(--sf-ease-out),
      box-shadow var(--sf-duration-fast) var(--sf-ease-out),
      opacity var(--sf-duration-fast) var(--sf-ease-out),
      transform var(--sf-duration-fast) var(--sf-ease-out),
      filter var(--sf-duration-fast) var(--sf-ease-out);
    /* All interactive properties at slow duration — for deliberate, attention-drawing animations. */
    --sf-transition-slow:
      color var(--sf-duration-slow) var(--sf-ease-in-out),
      background-color var(--sf-duration-slow) var(--sf-ease-in-out),
      border-color var(--sf-duration-slow) var(--sf-ease-in-out),
      box-shadow var(--sf-duration-slow) var(--sf-ease-in-out),
      opacity var(--sf-duration-slow) var(--sf-ease-in-out),
      transform var(--sf-duration-slow) var(--sf-ease-in-out),
      filter var(--sf-duration-slow) var(--sf-ease-in-out);
    /* Entrance transition: normal duration + ease-out for elements entering the view. */
    --sf-transition-enter:
      color var(--sf-duration-normal) var(--sf-ease-out),
      background-color var(--sf-duration-normal) var(--sf-ease-out),
      border-color var(--sf-duration-normal) var(--sf-ease-out),
      box-shadow var(--sf-duration-normal) var(--sf-ease-out),
      opacity var(--sf-duration-normal) var(--sf-ease-out),
      transform var(--sf-duration-normal) var(--sf-ease-out),
      filter var(--sf-duration-normal) var(--sf-ease-out);
    /* Exit transition: fast duration + ease-in so exits feel crisp and don't linger. */
    --sf-transition-exit:
      color var(--sf-duration-fast) var(--sf-ease-in),
      background-color var(--sf-duration-fast) var(--sf-ease-in),
      border-color var(--sf-duration-fast) var(--sf-ease-in),
      box-shadow var(--sf-duration-fast) var(--sf-ease-in),
      opacity var(--sf-duration-fast) var(--sf-ease-in),
      transform var(--sf-duration-fast) var(--sf-ease-in),
      filter var(--sf-duration-fast) var(--sf-ease-in);

    /* Top-layer transition building block (dialog, [popover]).
       transition-behavior: allow-discrete keeps the discrete `display`
       and `overlay` properties in the transition so entry animations can
       fire and exit animations finish before the element leaves the top
       layer. Compose it into a component transition alongside the visual
       properties.
       NOTE: Requires @starting-style to be defined on the element for
       the entrance transition to trigger.
       Progressive enhancement — unsupporting engines simply show/hide instantly.
       Chrome/Edge/Safari and Firefox (2025+) support allow-discrete. */
    --sf-transition-overlay:
      overlay var(--sf-duration-normal) allow-discrete,
      display var(--sf-duration-normal) allow-discrete;
  }

}

/* ─── core/tokens.layout.css ─── */
/* SLASHED — core/tokens.layout.css
   @layer slashed.tokens
   Layout primitive override tokens for gaps, padding, min sizes, tracks, and containers.
   Prefix: --sf-*; loaded before core/layout.css. */

@layer slashed.tokens {
  :root {

    /* ----------------------------------------------------------
       Stack
       ---------------------------------------------------------- */
    --sf-stack-gap: var(--sf-content-gap);

    /* ----------------------------------------------------------
       Box
       ---------------------------------------------------------- */
    --sf-box-padding:      var(--sf-space-m);
    --sf-box-border-width: 0;
    --sf-box-border-color: var(--sf-color-border);

    /* ----------------------------------------------------------
       Center
       ---------------------------------------------------------- */
    --sf-center-max:    var(--sf-container-default);
    --sf-center-gutter: var(--sf-gutter);

    /* ----------------------------------------------------------
       Cluster
       ---------------------------------------------------------- */
    --sf-cluster-gap:     var(--sf-gap);
    --sf-cluster-align:   center;
    --sf-cluster-justify: flex-start;

    /* ----------------------------------------------------------
       Sidebar
       ---------------------------------------------------------- */
    --sf-sidebar-gap:           var(--sf-gap);
    --sf-sidebar-min-width:     50%;           /* content column minimum */
    --sf-sidebar-width:         18rem;         /* sidebar panel default size */

    /* ----------------------------------------------------------
       Switcher
       ---------------------------------------------------------- */
    --sf-switcher-threshold: 30rem;
    --sf-switcher-gap:       var(--sf-gap);

    /* ----------------------------------------------------------
       Grid (auto-fill, breakpoint-free)
       ---------------------------------------------------------- */
    --sf-grid-min:         16rem;
    --sf-grid-gap:         var(--sf-gap);

    --sf-grid-min-xs:      10rem;
    --sf-grid-min-s:       13rem;
    --sf-grid-min-m:       16rem;
    --sf-grid-min-l:       20rem;
    --sf-grid-min-xl:      24rem;
    --sf-grid-min-2xl:     28rem;

    /* ----------------------------------------------------------
       Equal columns — CSS multi-column flowing layout (not grid).
       Content flows between columns like a newspaper: fills one
       column top-to-bottom, continues at the top of the next.
       Use for FAQ lists, prose, anything that should distribute
       evenly without being pinned to discrete grid cells — reach
       for .sf-grid/.sf-grid--fit instead when items need their own
       fixed cell.
       ---------------------------------------------------------- */
    --sf-equal-min-col:    16rem;
    --sf-equal-gap:        var(--sf-gap);
    --sf-equal-rule-width: 0;
    --sf-equal-rule-style: solid;
    --sf-equal-rule-color: var(--sf-color-border);

    /* ----------------------------------------------------------
       Cover
       ---------------------------------------------------------- */
    --sf-cover-min-height: 100dvh;
    --sf-cover-padding:    var(--sf-section-pad);

    /* ----------------------------------------------------------
       Frame
       ---------------------------------------------------------- */
    --sf-frame-ratio: 16 / 9;    /* literal <ratio>, valid in aspect-ratio */

    /* ----------------------------------------------------------
       Background layer (.sf-bg-layer) — cover media behind sibling content.
       inset is a single length applied to every edge; the layer size is
       derived from it, so a non-zero inset still fills correctly.
       ---------------------------------------------------------- */
    /* 0px, not bare 0 — .sf-bg-layer's inline-size/block-size multiply this by 2
       inside a calc() alongside a percentage; a unitless 0 makes that
       calc() a <number>/<percentage> type mismatch (invalid at
       computed-value time), silently collapsing .sf-bg-layer to its intrinsic
       size. */
    --sf-bg-layer-inset:    0px;
    --sf-bg-layer-fit:      cover;
    --sf-bg-layer-position: 50% 50%;
    --sf-bg-layer-radius:   0;
    --sf-bg-layer-z:        -2;        /* behind content; above the parent background */

    /* ----------------------------------------------------------
       Icon (boxed variant) — extras for .sf-icon--boxed.
       The naked .sf-icon sizing tokens (--sf-icon-xs..xl) live in
       core/tokens.css alongside the typography scale.
       ---------------------------------------------------------- */
    --sf-icon-box-pad:    0.5em;
    --sf-icon-box-radius: var(--sf-radius-s);
    --sf-icon-box-bg:     var(--sf-color-inset);
    --sf-icon-box-border: var(--sf-border-width-1) solid var(--sf-color-border);

    /* ----------------------------------------------------------
       Reel
       ---------------------------------------------------------- */
    --sf-reel-item-width: max-content;
    --sf-reel-gap:        var(--sf-gap);
    --sf-reel-height:     auto;

    /* ----------------------------------------------------------
       Imposter (centered absolute/fixed overlay)
       ---------------------------------------------------------- */
    --sf-imposter-margin: var(--sf-space-m);

    /* ----------------------------------------------------------
       Bento grid
       ---------------------------------------------------------- */
    --sf-bento-cols-default: 4;
    --sf-bento-row-default:  10rem;
    --sf-bento-row-compact:  6rem;
    --sf-bento-row-tall:     16rem;
    --sf-bento-gap:          var(--sf-gap);

    /* ----------------------------------------------------------
       Content grid (breakout pattern)
       ---------------------------------------------------------- */
    --sf-breakout-width: var(--sf-container-wide);
    --sf-content-width:  var(--sf-container-default);

    /* ----------------------------------------------------------
       Prose
       ---------------------------------------------------------- */
    --sf-prose-paragraph: var(--sf-content-gap);

    /* ----------------------------------------------------------
       Alternate (zigzag)
       ---------------------------------------------------------- */
    --sf-alternate-gap:       var(--sf-content-gap);
    --sf-alternate-inner-gap: var(--sf-gap);

  }
}

/* ─── core/tokens.macros.css ─── */
/* SLASHED — core/tokens.macros.css
   @layer slashed.tokens
   Macro recipe override tokens for prose, surfaces, flow, media, hero, scrims, and clamps.
   Prefix: --sf-*; loaded before core/macros.css. */

@layer slashed.tokens {
  :root {

    /* ----------------------------------------------------------
       Flow — distance between flow children (lobotomized owl).
       Consumed by .sf-flow > * + *.
       ---------------------------------------------------------- */
    --sf-flow-space: var(--sf-content-gap);

    /* ----------------------------------------------------------
       Line clamp — default line count for .sf-line-clamp-N.
       Override per element: style="--sf-line-clamp: 5".
       The fixed-N variants .sf-line-clamp-2 / -3 don't read this
       token (they hardcode the value), so the default only
       applies to .sf-line-clamp-N callers.
       ---------------------------------------------------------- */
    --sf-line-clamp: 3;

    /* ----------------------------------------------------------
       Aspect ratio — default for .sf-aspect (generic ratio container,
       distinct from layout's .sf-frame which has its own --sf-frame-ratio).
       ---------------------------------------------------------- */
    --sf-aspect: 16 / 9;

    /* ----------------------------------------------------------
       Prose — per-instance override knobs for .sf-prose.
       All values default to system spacing/color tokens so prose
       stays in sync with the global scale unless overridden.

       Override per-element:
         style="--sf-prose-marker-color: var(--sf-color-secondary)"
       ---------------------------------------------------------- */
    --sf-prose-heading-gap:      var(--sf-space-s);
    --sf-prose-list-gap:         var(--sf-space-xs);
    --sf-prose-block-margin:     var(--sf-space-m);
    --sf-prose-media-margin:     var(--sf-space-m);
    --sf-prose-media-radius:     var(--sf-radius-m);
    --sf-prose-figure-margin:    var(--sf-space-l);
    --sf-prose-marker-color:     var(--sf-color-primary);
    --sf-prose-figcaption-size:  var(--sf-text-s);
    --sf-prose-blockquote-padding: var(--sf-space-m);
    --sf-prose-blockquote-border:  var(--sf-border-width-2) solid var(--sf-color-border--subtle);
    --sf-prose-hr-margin:          var(--sf-space-l);
    --sf-prose-nested-list-gap:    var(--sf-space-2xs);
    --sf-prose-table-pad:          var(--sf-space-xs);

    /* ----------------------------------------------------------
       Surface color — input for the generic .sf-surface macro.
       Set it on any element carrying the class and the macro derives
       background, auto-contrast foreground, and the full contextual
       token set from it:
         <section class="sf-surface"
                  style="--sf-surface-color: var(--sf-color-primary-100)">
       Inherits: a nested .sf-surface picks up the outer surface's
       color unless it sets its own. Any resolvable CSS color works.
       ---------------------------------------------------------- */
    --sf-surface-color: var(--sf-color-base);

    /* ----------------------------------------------------------
       Scroll shadow / overflow fade — mask gradient size.
       Used by .sf-scroll-shadow (top+bottom) and .sf-overflow-fade
       (end-edge horizontal fade).
       ---------------------------------------------------------- */
    --sf-scroll-shadow-size: 2rem;

    /* ----------------------------------------------------------
       Content visibility — placeholder size for .sf-content-auto.
       Feeds contain-intrinsic-size so offscreen sections reserve
       space before their first render, keeping the scrollbar and
       scroll position stable. Override per element:
       style="--sf-content-intrinsic-size: 800px".
       ---------------------------------------------------------- */
    --sf-content-intrinsic-size: 500px;

    /* ----------------------------------------------------------
       Scrim — darkening overlay for text-over-image legibility,
       consumed by the .sf-scrim macro. The gradient is composed
       from a direction + a color stop so consumers can retune
       either independently:
         style="--sf-scrim-color: oklch(0 0 0 / 0.75)"
         style="--sf-scrim-direction: to top right"
       --sf-scrim-gradient is the final composed value; override it
       directly for a multi-stop or radial scrim.
       ---------------------------------------------------------- */
    --sf-scrim-color:     oklch(0 0 0 / 0.55);
    --sf-scrim-direction: to top;
    --sf-scrim-gradient:  linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent);
    /* Text-on-image legibility WITHOUT darkening the picture — a soft
       shadow halo behind glyphs, consumed by .sf-text-protect. */
    --sf-scrim-text-shadow: 0 1px 3px oklch(0 0 0 / 0.6);

    /* ----------------------------------------------------------
       Named background surface preset — input set for the .sf-surface-bg
       macro (issue #523). One reusable, named background bundling a base
       colour fallback + image/gradient/pattern + sizing + an optional
       overlay + an optional animation. Define a preset by setting these
       on a scope, then apply .sf-surface-bg to compose them:
         .hero-surface {
           --sf-surface-bg-image:   url("/hero.avif");
           --sf-surface-bg-overlay: var(--sf-scrim-gradient);  // reuse the scrim
           --sf-surface-bg-animation: sf-pan 40s linear infinite;
         }
         <section class="hero-surface sf-surface-bg">…</section>
       -overlay layers ABOVE -image (first background-image layer). Builds on
       the existing scrim + gradient tokens rather than new infra; for a
       blurred backdrop compose .sf-scrim / a filter on top. Inert by default
       (image/overlay/animation = none) so the bare class is a no-op until a
       preset feeds it. ---------------------------------------------------- */
    --sf-surface-bg-color:      transparent;
    --sf-surface-bg-image:      none;
    --sf-surface-bg-overlay:    none;
    --sf-surface-bg-size:       cover;
    --sf-surface-bg-position:   center;
    --sf-surface-bg-repeat:     no-repeat;
    --sf-surface-bg-attachment: scroll;
    --sf-surface-bg-animation:  none;

    /* ----------------------------------------------------------
       Overlap recipe — how far .sf-overlap pulls into the adjacent
       element. .sf-overlap-host's padding compensation defaults to this
       same value via a var() fallback in the rule itself (not aliased
       here — see core/macros.css), so one override on the host tunes
       both unless --sf-overlap-host-pad is set independently.
       ---------------------------------------------------------- */
    --sf-overlap-pull: var(--sf-space-xl);

  }
}

/* ─── core/reset.css ─── */
/* SLASHED — core/reset.css
   @layer slashed.reset
   Browser normalization, sizing defaults, viewport behavior, media safety, and form inheritance.
   No component styling. */

@layer slashed.reset {

  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari <17: unprefixed text-size-adjust only landed in Safari 17 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust:          100%;
    scroll-padding-block-start: calc(var(--sf-header-height, 5rem) + var(--sf-space-m, 1rem));
    scrollbar-gutter:    stable;
    color-scheme:        var(--sf-color-scheme, light dark);
    hanging-punctuation: first last;
  }

  @supports (interpolate-size: allow-keywords) {
    html { interpolate-size: allow-keywords; }
  }

  body {
    min-height:      100dvh;
    min-inline-size: 320px;
  }

  button {
    text-transform: none;
  }

  search {
    display: block;
  }

  summary {
    cursor: pointer;
  }

  table {
    border-collapse: collapse;
  }

  [hidden] {
    display: none !important;
  }

  dialog, [popover] {
    padding:      0;
    border:       none;
    background:   Canvas;
    color:        inherit;
    color-scheme: inherit;
  }

  fieldset {
    min-width: 0;
  }

  [inert] {
    cursor: default;
  }

}

/* ─── core/base.css ─── */
/* SLASHED — core/base.css
   @layer slashed.base
   Element defaults for typography, media, links, tables, and forms.
   Token-first, classless foundation. */

@layer slashed.base {

  html {
    scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
  }

  body {
    margin:           0;
    font-family:      var(--sf-body-font-family, var(--sf-font-body));
    font-size:        var(--sf-body-font-size,   var(--sf-text-m));
    line-height:      var(--sf-body-line-height, var(--sf-leading-normal));
    font-weight:      var(--sf-body-font-weight, var(--sf-font-weight-body));
    color:            var(--sf-body-color,       var(--sf-color-text));
    background-color: var(--sf-color-bg, #fff);
  }

  h1, h2, h3, h4, h5, h6 {
    margin:            0;
    font-family:       var(--sf-heading-font-family, var(--sf-font-heading));
    line-height:       var(--sf-leading-tight);
    color:             var(--sf-heading-color, var(--sf-color-heading));
    text-wrap:         var(--sf-heading-text-wrap);
    overflow-wrap:     break-word;
    text-rendering:    optimizelegibility;
  }

  h1 { font-size: var(--sf-h1-size); line-height: var(--sf-h1-line-height); font-weight: var(--sf-h1-font-weight); letter-spacing: var(--sf-h1-letter-spacing); max-inline-size: var(--sf-h1-max-width); }
  h2 { font-size: var(--sf-h2-size); line-height: var(--sf-h2-line-height); font-weight: var(--sf-h2-font-weight); letter-spacing: var(--sf-h2-letter-spacing); max-inline-size: var(--sf-h2-max-width); }
  h3 { font-size: var(--sf-h3-size); line-height: var(--sf-h3-line-height); font-weight: var(--sf-h3-font-weight); letter-spacing: var(--sf-h3-letter-spacing); max-inline-size: var(--sf-h3-max-width); }
  h4 { font-size: var(--sf-h4-size); line-height: var(--sf-h4-line-height); font-weight: var(--sf-h4-font-weight); letter-spacing: var(--sf-h4-letter-spacing); max-inline-size: var(--sf-h4-max-width); }
  h5 { font-size: var(--sf-h5-size); line-height: var(--sf-h5-line-height); font-weight: var(--sf-h5-font-weight); letter-spacing: var(--sf-h5-letter-spacing); max-inline-size: var(--sf-h5-max-width); }
  h6 { font-size: var(--sf-h6-size); line-height: var(--sf-h6-line-height); font-weight: var(--sf-h6-font-weight); letter-spacing: var(--sf-h6-letter-spacing); max-inline-size: var(--sf-h6-max-width); }

  p {
    margin:        0;
    text-wrap:     var(--sf-body-text-wrap);
    overflow-wrap: break-word;
  }

  b, strong {
    font-weight: var(--sf-body-strong-weight);
  }

  em {
    font-style: var(--sf-body-em-style);
  }

  small {
    font-size: var(--sf-text-s, 0.875em);
  }

  mark {
    background-color: var(--sf-color-mark-bg, Mark);
    color:            var(--sf-color-mark-text, MarkText);
    border-radius:    var(--sf-radius-xs);
    padding-inline:   0.2em;
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor:          help;
  }

  kbd, samp {
    font-family: var(--sf-font-mono);
    font-size:   inherit;
  }

  sub, sup {
    font-size:      75%;
    line-height:    0;
    position:       relative;
    vertical-align: baseline;
  }
  sup { top:    -0.5em; }
  sub { bottom: -0.25em; }

  /* :link (0,1,1) not bare a: beats WebKit UA rule a:link { color: -webkit-link }
     that silently overrides --sf-color-link in dark mode. */
  a:link {
    color:                   var(--sf-color-link);
    text-decoration-color:   var(--sf-color-link--underline);
    text-underline-offset:   var(--sf-link-underline-offset);
    text-decoration-thickness: var(--sf-link-underline-thickness);
    text-underline-position: from-font;
    transition:
      color                 var(--sf-duration-fast) var(--sf-ease-out),
      text-decoration-color var(--sf-duration-fast) var(--sf-ease-out);
  }
  a:hover   { color: var(--sf-color-link--hover);   text-decoration-color: currentcolor; }
  a:visited { color: var(--sf-color-link--visited); }
  a:active  { color: var(--sf-color-link--active);  }
  a:not([class]) { text-decoration-skip-ink: auto; }

  a, code {
    overflow-wrap: break-word;
  }

  code {
    font-family:      var(--sf-font-mono);
    font-size:        var(--sf-code-font-size);
    padding:          0.125em 0.3em;
    border-radius:    var(--sf-radius-xs);
    background-color: var(--sf-color-code-bg);
    color:            var(--sf-color-code-text, inherit);
  }

  pre {
    font-family:   var(--sf-font-mono);
    font-size:     var(--sf-text-s);
    padding:       var(--sf-space-m);
    border-radius: var(--sf-radius-m);
    background:    var(--sf-color-code-block-bg, var(--sf-color-code-bg));
    color:         var(--sf-color-code-block-text, inherit);
    overflow-x:      auto;
    overflow-inline: auto;
    tab-size:        2;
    hyphens:       none;
  }
  pre code {
    background:    none;
    color:         inherit;
    padding:       0;
    font-size:     inherit;
    border-radius: 0;
  }

  img, picture, video, canvas {
    display:         block;
    max-inline-size: 100%;
    block-size:      auto;
  }

  /* Zero-specificity so .sf-bg-layer, .sf-frame > img, and any component's own
     radius (later layer or higher specificity) always win. */
  :where(img, figure) {
    border-radius: var(--sf-media-radius);
  }

  img, video {
    object-fit:      var(--sf-object-fit);
    object-position: var(--sf-object-position);
  }

  iframe, embed, object {
    display:         block;
    max-inline-size: 100%;
    block-size:      auto;
    border:          none;
  }

  hr {
    border:             none;
    border-block-start: var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);
  }

  ::selection {
    background:  var(--sf-color-selection-bg);
    color:       var(--sf-color-selection-text);
    text-shadow: none;
  }

  th, caption {
    text-align: start;
  }

  input, textarea {
    caret-color: var(--sf-caret-color);
  }

  input, progress {
    accent-color: var(--sf-color-action);
  }

  ::backdrop {
    background-color: var(--sf-color-dim);
  }

  button, input, select, textarea {
    font:           inherit;
    color:          inherit;
    letter-spacing: inherit;
    color-scheme:   inherit;
    line-height:    inherit;
  }
  button {
    cursor: pointer;
  }
  a, button, input, select, textarea, summary {
    touch-action: manipulation;
  }
  textarea {
    resize: vertical;
  }

  optgroup { font: inherit; }
  ::placeholder { opacity: 1; color: var(--sf-color-text--placeholder, currentcolor); }

  blockquote {
    border-inline-start: var(--sf-border-width-3) var(--sf-border-style) var(--sf-color-border);
    padding-inline-start: var(--sf-space-m);
  }

  dt {
    font-weight: var(--sf-font-weight-heading);
  }

  dd {
    margin-inline-start: var(--sf-space-m);
  }

  table {
    text-align: start;
  }

  th {
    font-weight: var(--sf-font-weight-heading);
  }

  td, th {
    padding: var(--sf-space-2xs) var(--sf-space-xs);
    border-block-end: var(--sf-border-width-hairline) var(--sf-border-style) var(--sf-color-border--subtle);
  }

}

/* ─── core/themes.css ─── */
/* SLASHED — core/themes.css
   @layer slashed.themes
   Light/dark activation, scoped theme color inheritance, LumLocker, and scheme-aware color adjustments.
   Uses data-theme, .sf-theme-light/.sf-theme-dark aliases, and token overrides. */

@layer slashed.themes {

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --sf-is-dark: 1;
    }
  }

  :is([data-theme="light"], .sf-theme-light) { color-scheme: light; --sf-is-dark: 0; }
  :is([data-theme="dark"], .sf-theme-dark)  { color-scheme: dark;  --sf-is-dark: 1; }

  :where([data-theme]:not(:root, html), .sf-theme-light:not(:root, html), .sf-theme-dark:not(:root, html)) {
    background-color: var(--sf-color-bg);
    color:            var(--sf-color-text);

    /* Component-layer and :root-only alias tokens that merely alias a themed
       core token (no light/dark branching of their own, e.g. --sf-card-bg:
       var(--sf-color-surface)) are declared once in :root (tokens.css /
       optional/tokens.components.css). Without a redeclaration here, that
       var() substitutes using :root's OWN --sf-color-surface/-heading/-text
       at computed-value time and the result inherits down frozen — a nested
       data-theme section further in never gets a chance to re-substitute it,
       breaking the "data-theme works on any element" guarantee
       (docs/theming.md) for .sf-card and for heading/body colour (#496).
       Re-declaring the aliases here, at the same non-root scope, forces a
       fresh substitution against this section's own (possibly overridden)
       --sf-color-surface / -border / -heading / -text. */
    --sf-card-bg:           var(--sf-color-surface);
    --sf-card-border-color: var(--sf-color-border);
    --sf-heading-color:     var(--sf-color-heading);
    --sf-body-color:        var(--sf-color-text);
  }

  /* LumLocker: locks 4 brand colors to a fixed OKLCH L — --sf-lumlocker in
     light, --sf-lumlocker-dark (default calc(1.18 - L), the mirror around the
     light/dark background midpoint) in dark, so contrast against the surface
     holds in both themes. Neutral/base excluded — forcing them to a brand L
     breaks their semantic role. */
  @supports (color: oklch(from red l c h)) {
  :root[data-lumlocker] {
    --sf-color-primary: light-dark(
      oklch(from var(--sf-color-primary-source-light) var(--sf-lumlocker) c h),
      oklch(from var(--sf-color-primary-source-dark, var(--sf-color-primary-source-light)) var(--sf-lumlocker-dark) c h)
    );
    --sf-color-secondary: light-dark(
      oklch(from var(--sf-color-secondary-source-light) var(--sf-lumlocker) c h),
      oklch(from var(--sf-color-secondary-source-dark, var(--sf-color-secondary-source-light)) var(--sf-lumlocker-dark) c h)
    );
    --sf-color-tertiary: light-dark(
      oklch(from var(--sf-color-tertiary-source-light) var(--sf-lumlocker) c h),
      oklch(from var(--sf-color-tertiary-source-dark, var(--sf-color-tertiary-source-light)) var(--sf-lumlocker-dark) c h)
    );
    --sf-color-action: light-dark(
      oklch(from var(--sf-color-action-source-light) var(--sf-lumlocker) c h),
      oklch(from var(--sf-color-action-source-dark, var(--sf-color-action-source-light)) var(--sf-lumlocker-dark) c h)
    );
  }

  :root[data-lumlocker] :is([data-theme="dark"], .sf-theme-dark) {
    --sf-color-primary:   oklch(from var(--sf-color-primary-source-dark,   var(--sf-color-primary-source-light))   var(--sf-lumlocker-dark) c h);
    --sf-color-secondary: oklch(from var(--sf-color-secondary-source-dark, var(--sf-color-secondary-source-light)) var(--sf-lumlocker-dark) c h);
    --sf-color-tertiary:  oklch(from var(--sf-color-tertiary-source-dark,  var(--sf-color-tertiary-source-light))  var(--sf-lumlocker-dark) c h);
    --sf-color-action:    oklch(from var(--sf-color-action-source-dark,    var(--sf-color-action-source-light))    var(--sf-lumlocker-dark) c h);
  }
  :root[data-lumlocker] :is([data-theme="light"], .sf-theme-light) {
    --sf-color-primary:   oklch(from var(--sf-color-primary-source-light)   var(--sf-lumlocker) c h);
    --sf-color-secondary: oklch(from var(--sf-color-secondary-source-light) var(--sf-lumlocker) c h);
    --sf-color-tertiary:  oklch(from var(--sf-color-tertiary-source-light)  var(--sf-lumlocker) c h);
    --sf-color-action:    oklch(from var(--sf-color-action-source-light)    var(--sf-lumlocker) c h);
  }
  }

  /* SECTION-LEVEL THEMING */
  /* light-dark() bakes at :root declaration time; re-declarations on [data-theme]
     elements are required for section-level theming to work.
     SL-001: the clamp() derivation formula below is the same one used inside
     tokens.css's "Resolved color tokens — auto-switch via light-dark()"
     block (search core/tokens.css for that comment) — duplicated here, not
     shared, because this file needs flat values outside light-dark().
     Keep both copies in sync if the formula ever changes. */
  @supports (color: oklch(from red l c h)) {

        :root {
      --sf-color-primary-source-dark:   oklch(from var(--sf-color-primary-source-light)   clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
      --sf-color-secondary-source-dark: oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
      --sf-color-tertiary-source-dark:  oklch(from var(--sf-color-tertiary-source-light)  clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
      --sf-color-action-source-dark:    oklch(from var(--sf-color-action-source-light)    clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
      --sf-color-neutral-source-dark:   oklch(from var(--sf-color-neutral-source-light)   clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
      --sf-color-base-source-dark:      oklch(from var(--sf-color-base-source-light)      clamp(0.16, calc(1.18 - l),        0.24) calc(c * 0.5) h);
      --sf-color-success-source-dark:   oklch(from var(--sf-color-success-source-light)   clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
      --sf-color-warning-source-dark:   oklch(from var(--sf-color-warning-source-light)   clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
      --sf-color-info-source-dark:      oklch(from var(--sf-color-info-source-light)      clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
      --sf-color-danger-source-dark:    oklch(from var(--sf-color-danger-source-light)    clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
    }

        :is([data-theme="dark"], .sf-theme-dark) {

      --sf-color-primary:   var(--sf-color-primary-source-dark);
      --sf-color-secondary: var(--sf-color-secondary-source-dark);
      --sf-color-tertiary:  var(--sf-color-tertiary-source-dark);
      --sf-color-action:    var(--sf-color-action-source-dark);
      --sf-color-neutral:   var(--sf-color-neutral-source-dark);
      --sf-color-base:      var(--sf-color-base-source-dark);
      --sf-color-surface:   var(--sf-color-base);

      --sf-color-bg:      oklch(from var(--sf-color-base) calc(l + 0.02) c h);
      --sf-color-inset:   oklch(from var(--sf-color-base) calc(l - 0.02) c h);
      --sf-color-raised:  oklch(from var(--sf-color-base) calc(l + 0.04) c h);
      --sf-color-overlay: oklch(from var(--sf-color-base) l c h / 0.9);
      --sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);

      --sf-color-success: var(--sf-color-success-source-dark);
      --sf-color-warning: var(--sf-color-warning-source-dark);
      --sf-color-info:    var(--sf-color-info-source-dark);
      --sf-color-danger:  var(--sf-color-danger-source-dark);

      --sf-color-text:              oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1)    c h);
      --sf-color-text--subtle:   oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h);
      --sf-color-text--placeholder: oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1),  0.65) c h);
      --sf-color-text--disabled:    oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2),  0.55) c h);
      --sf-color-text--inverse:     oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4),  0.35) c h);
      --sf-color-heading:           oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1)    c h);

      --sf-color-border:         oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3),  0.55) 0.005 h);
      --sf-color-border--subtle: oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h);
      --sf-color-border--strong: oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1),  0.65) 0.02  h);

      --sf-color-link:          oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h);
      --sf-color-link--hover:   oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h);
      --sf-color-link--active:  oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h);
      --sf-color-link--visited: oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60));

      --sf-color-selection-bg: oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55);

      --sf-color-success-strong: oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h);
      --sf-color-warning-strong: oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h);
      --sf-color-info-strong:    oklch(from var(--sf-color-info)    clamp(0.70, calc(l + 0.15), 1) c h);
      --sf-color-danger-strong:  oklch(from var(--sf-color-danger)  clamp(0.70, calc(l + 0.15), 1) c h);

      /* :root-only aliases from tokens.css — var() resolves on the declaring
         element, so without these re-declarations a nested [data-theme]
         section inherits the :root-resolved (wrong-scheme) values (#496). */
      --sf-color-code-bg:        var(--sf-color-inset);
      --sf-color-bg--disabled:   var(--sf-color-inset);
      --sf-color-link--disabled: var(--sf-color-text--disabled);
      --sf-scrollbar-thumb:      var(--sf-color-neutral);
      /* Non-sign() fallback: keeps inline code readable in engines with
         oklch(from) but not sign() — the sign()-gated auto-contrast block
         below overrides this with a proper per-background contrast calc
         wherever sign() is supported. */
      --sf-color-code-text:      var(--sf-color-text);
    }

        :is([data-theme="light"], .sf-theme-light) {

      --sf-color-primary:   var(--sf-color-primary-source-light);
      --sf-color-secondary: var(--sf-color-secondary-source-light);
      --sf-color-tertiary:  var(--sf-color-tertiary-source-light);
      --sf-color-action:    var(--sf-color-action-source-light);
      --sf-color-neutral:   var(--sf-color-neutral-source-light);
      --sf-color-base:      var(--sf-color-base-source-light);
      --sf-color-surface:   var(--sf-color-base);

      --sf-color-bg:      oklch(from var(--sf-color-base) calc(l + 0.02) c h);
      --sf-color-inset:   oklch(from var(--sf-color-base) calc(l - 0.02) c h);
      --sf-color-raised:  oklch(from var(--sf-color-base) calc(l + 0.04) c h);
      --sf-color-overlay: oklch(from var(--sf-color-base) l c h / 0.9);
      --sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);

      --sf-color-success: var(--sf-color-success-source-light);
      --sf-color-warning: var(--sf-color-warning-source-light);
      --sf-color-info:    var(--sf-color-info-source-light);
      --sf-color-danger:  var(--sf-color-danger-source-light);

      --sf-color-text:              oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h);
      --sf-color-text--subtle:   oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h);
      --sf-color-text--placeholder: oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h);
      --sf-color-text--disabled:    oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h);
      --sf-color-text--inverse:     oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4),  0.98) c h);
      --sf-color-heading:           oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h);

      --sf-color-border:         oklch(from var(--sf-color-neutral-source-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h);
      --sf-color-border--subtle: oklch(from var(--sf-color-neutral-source-light) clamp(0.75, calc(l + 0.4),  0.97) 0.005 h);
      --sf-color-border--strong: oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.1),  0.85) 0.02  h);

      --sf-color-link:          oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h);
      --sf-color-link--hover:   oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h);
      --sf-color-link--active:  oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h);
      --sf-color-link--visited: oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60));

      --sf-color-selection-bg: oklch(from var(--sf-color-action-source-light) l c h / 0.28);

      --sf-color-success-strong: oklch(from var(--sf-color-success-source-light) calc(l - 0.15) c h);
      --sf-color-warning-strong: oklch(from var(--sf-color-warning-source-light) calc(l - 0.25) c h);
      --sf-color-info-strong:    oklch(from var(--sf-color-info-source-light)    calc(l - 0.1)  c h);
      --sf-color-danger-strong:  oklch(from var(--sf-color-danger-source-light)  calc(l - 0.1)  c h);

      /* :root-only aliases — see the matching note in the dark block (#496). */
      --sf-color-code-bg:        var(--sf-color-inset);
      --sf-color-bg--disabled:   var(--sf-color-inset);
      --sf-color-link--disabled: var(--sf-color-text--disabled);
      --sf-scrollbar-thumb:      var(--sf-color-neutral);
      /* Non-sign() fallback — see matching note in the dark block (#496). */
      --sf-color-code-text:      var(--sf-color-text);
    }

  }

  @supports (color: oklch(from red l c h)) and (width: calc(1px * sign(1))) {
    :is([data-theme="dark"], .sf-theme-dark) {
      --sf-color-text--on-primary:   oklch(from var(--sf-color-primary)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-tertiary:  oklch(from var(--sf-color-tertiary)  clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-action:    oklch(from var(--sf-color-action)    clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-neutral:   oklch(from var(--sf-color-neutral)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-success:   oklch(from var(--sf-color-success)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-warning:   oklch(from var(--sf-color-warning)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-info:      oklch(from var(--sf-color-info)      clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-danger:    oklch(from var(--sf-color-danger)    clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-inverse:   oklch(from var(--sf-color-inverse)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      /* Auto-contrast code text re-derived in-scope so it tracks the
         per-scope --sf-color-code-bg above (#496). Same formula as
         core/tokens.css — keep in sync. */
      --sf-color-code-text:          oklch(from var(--sf-color-code-bg)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
    }
    :is([data-theme="light"], .sf-theme-light) {
      --sf-color-text--on-primary:   oklch(from var(--sf-color-primary)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-tertiary:  oklch(from var(--sf-color-tertiary)  clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-action:    oklch(from var(--sf-color-action)    clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-neutral:   oklch(from var(--sf-color-neutral)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-success:   oklch(from var(--sf-color-success)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-warning:   oklch(from var(--sf-color-warning)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-info:      oklch(from var(--sf-color-info)      clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-danger:    oklch(from var(--sf-color-danger)    clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      --sf-color-text--on-inverse:   oklch(from var(--sf-color-inverse)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
      /* See matching note in the dark block (#496). */
      --sf-color-code-text:          oklch(from var(--sf-color-code-bg)   clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
    }
  }

  /* OPT-IN THEME CROSS-FADE */
  .sf-theme-transition {
    transition:
      --sf-color-primary   var(--sf-theme-transition-duration) var(--sf-ease-out),
      --sf-color-secondary var(--sf-theme-transition-duration) var(--sf-ease-out),
      --sf-color-tertiary  var(--sf-theme-transition-duration) var(--sf-ease-out),
      --sf-color-action    var(--sf-theme-transition-duration) var(--sf-ease-out),
      --sf-color-neutral   var(--sf-theme-transition-duration) var(--sf-ease-out),
      --sf-color-base      var(--sf-theme-transition-duration) var(--sf-ease-out),
      --sf-color-success   var(--sf-theme-transition-duration) var(--sf-ease-out),
      --sf-color-warning   var(--sf-theme-transition-duration) var(--sf-ease-out),
      --sf-color-info      var(--sf-theme-transition-duration) var(--sf-ease-out),
      --sf-color-danger    var(--sf-theme-transition-duration) var(--sf-ease-out);
  }

  @media (prefers-reduced-motion: reduce) {
    .sf-theme-transition { transition: none; }
  }

}

/* ─── core/layout.css ─── */
/* SLASHED — core/layout.css
   @layer slashed.layout
   Layout primitives: section, container, stack, cluster, grid, sidebar, switcher, frame.
   Prefix: .sf-*; local rhythm via --sf-*-gap / sizing tokens.
   SL-005: every @container query in this file hardcodes its breakpoint
   instead of referencing a --sf-* token — var() is not allowed inside an
   @container condition per the CSS spec. This applies framework-wide to
   every @container site below; not re-explained at each one.
   SL-005a: those hardcoded breakpoints are expressed in REM, never em.
   Inside an @container condition a font-relative em resolves against the
   QUERY CONTAINER's own computed font-size — and under SLASHED's default
   fluid type that font-size is inherited from body (a clamp() over 100vw,
   ~16–20px), so an em breakpoint would silently slide with the VIEWPORT and
   break the "responds to its own container width, not the viewport" contract
   (docs/architecture.md). rem resolves against the ROOT (:root/html stays a
   fixed 16px; fluid type is applied to body, not html), so the breakpoint is
   viewport-independent while still honouring user zoom / root-font-size
   preferences. Note this is the OPPOSITE of the @media convention, where em
   and rem both resolve against the root — do not copy "use em for a11y
   breakpoints" from @media into @container. (Matches Tailwind, whose
   container-query breakpoints are rem; cf. issue #497 fluid-cq work.)
   SL-034: a query container cannot be the subject of its own @container
   query — conditions only ever match descendants of the nearest ancestor
   container, never the element that establishes it (self-querying is a
   silent no-op, not an error). Primitives that need to resize THEMSELVES
   (.sf-grid-cols-2/3/4/6, .sf-bento) must therefore rely on an ancestor
   container (.sf-container / .sf-cq / .sf-fluid-cq) rather than declaring
   `container` on themselves. .sf-grid-cols-1-2 etc. already follow this —
   they've never declared their own `container` — so they were unaffected.
   .sf-alternate is a different, unrelated-but-similar-looking pattern: it
   DOES declare `container` on itself, but only to restyle its CHILDREN
   (`.sf-alternate > *`), which is not self-querying and is fine. Not
   re-explained at each site below. */

@layer slashed.layout {

  /* Section */
  .sf-section     { padding-block: var(--sf-section-pad); }
  .sf-section--xs { --sf-section-pad: var(--sf-section-pad--xs); }
  .sf-section--s  { --sf-section-pad: var(--sf-section-pad--s); }
  .sf-section--m  { --sf-section-pad: var(--sf-section-pad--m); }
  .sf-section--l  { --sf-section-pad: var(--sf-section-pad--l); }
  .sf-section--xl { --sf-section-pad: var(--sf-section-pad--xl); }
  .sf-section--2xl { --sf-section-pad: var(--sf-section-pad--2xl); }

  .sf-section--guttered { padding-inline: var(--sf-gutter); }
  .sf-section--guttered .sf-container { padding-inline: 0; }
  /* .sf-content-grid carries the gutter in its own edge tracks
     (minmax(gutter,1fr)), not in padding — so unlike .sf-container it can't be
     de-duplicated by zeroing its padding (it has none). Left alone, the
     section's padding boxes the grid in: content ends up double-guttered and
     .sf-full-bleed stops at the padding edge instead of the section edge.
     Drop the section's own padding so the grid spans edge-to-edge and its
     tracks provide the single gutter; full-bleed then reaches the true edge.
     Only when the content grid is the SOLE direct child: dropping the section
     padding is right for the grid but would strip the gutter from any non-grid
     sibling (a heading, a plain block) that legitimately relies on it — and
     those two wants are physically irreconcilable (the gutter *is* the section
     padding that full-bleed must escape). So we restrict to the unambiguous
     case; a mixed section keeps its padding and behaves exactly as before this
     rule existed. Direct-child scope also stops a nested grid deeper in the
     section from stripping the gutter. */
  .sf-section--guttered:has(> .sf-content-grid):not(:has(> :not(.sf-content-grid))) {
    padding-inline: 0;
  }

  .sf-section-group > .sf-section + .sf-section { padding-block-start: 0; }

  /* Header — block padding on the standard spacing scale. Headers usually
     want lighter vertical rhythm than .sf-section, so these map to
     --sf-space-* directly. Only block padding is set; any inline gutter
     (from .sf-section--guttered, a container, or the element itself) is
     left intact. */
  .sf-header--xs { padding-block: var(--sf-space-xs); }
  .sf-header--s  { padding-block: var(--sf-space-s); }
  .sf-header--m  { padding-block: var(--sf-space-m); }
  .sf-header--l  { padding-block: var(--sf-space-l); }
  .sf-header--xl { padding-block: var(--sf-space-xl); }

  /* Collapse modifier */
  .sf-section--collapse:has(+ .sf-section--collapse) {
    padding-block-end: calc(var(--sf-section-pad) / 2);
  }
  .sf-section--collapse + .sf-section--collapse {
    padding-block-start: calc(var(--sf-section-pad) / 2);
  }

  .sf-divider {
    inline-size:        100%;
    border:             none;
    border-block-start: var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);
    margin-block:       var(--sf-divider-gap);
  }
  .sf-divider--vertical {
    inline-size:          auto;
    border-block-start:   none;
    border-inline-start:  var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);
    margin-block:         0;
    margin-inline:        var(--sf-divider-gap);
    align-self:           stretch;
  }

  .sf-divider--soft   { --sf-divider-color: var(--sf-color-border--subtle); }
  .sf-divider--strong { --sf-divider-color: var(--sf-color-border--strong); }
  .sf-divider--dashed { --sf-divider-style: dashed; }
  .sf-divider--dotted { --sf-divider-style: dotted; }

  .sf-divider--gradient {
    border:        none;
    block-size:    var(--sf-divider-width);
    background:    linear-gradient(to right, transparent, var(--sf-divider-color), transparent);
  }

  /* Divide — rules between direct children, reusing .sf-divider's tokens.
     Unlike .sf-divider (a standalone separator element), .sf-divide is
     applied to the container and needs no extra markup per gap. */
  .sf-divide > * + * {
    border-block-start: var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);
  }
  .sf-divide--vertical > * + * {
    border-block-start:  none;
    border-inline-start: var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);
  }


  /* Container */
  .sf-container {
    container:      sf-layout / inline-size;
    width:          100%;
    max-width:      var(--sf-container-default);
    margin-inline:  auto;
    padding-inline: var(--sf-gutter);
  }
  .sf-container--narrow { max-width: var(--sf-container-narrow); }
  .sf-container--prose  { max-width: var(--sf-container-prose); }
  .sf-container--wide   { max-width: var(--sf-container-wide); }
  .sf-container--full   { max-width: var(--sf-container-full); }

  /* .sf-cq: CQ scope without .sf-container's max-width/centering.
     Use when a CQ-dependent primitive needs a container ancestor but no layout chrome. */
  .sf-cq {
    container-type: inline-size;
  }

  /* Overlay — absolute-fill layout helper for overlays/backdrops. */
  .sf-overlay {
    position: absolute;
    inset:    0;
  }

  
  /* .sf-fluid-cq: opt a subtree into a CONTAINER-relative fluid scale (issue
     #497). By default --sf-text-* / --sf-space-* interpolate against 100vw (the
     viewport); inside .sf-fluid-cq they interpolate against 100cqi (this box's
     inline size), so type + spacing track the container the way the layout
     primitives (.sf-grid-cols-*, .sf-content-grid, .sf-bento) already do. Use
     on nested / narrow contexts (sidebars, cards, 1/3 columns) where a
     viewport-driven scale would size text as if it spanned the full page.

     Why the tokens are RE-DECLARED (not just --sf-fluid-width flipped): the
     --sf-text-* / --sf-space-* tokens are computed at :root, so their
     var(--sf-fluid-width) is substituted there (100vw) and the *resolved*
     length inherits down — overriding --sf-fluid-width lower in the tree can't
     retroactively rewrite an already-computed inherited value. The scale is
     therefore re-declared in-scope so var(--sf-fluid-width) re-resolves to
     100cqi. It is re-declared on the direct children, not the element itself:
     a query container's own cq units resolve against its ANCESTOR container, so
     the re-computation must happen one level in — children compute against
     .sf-fluid-cq and deeper descendants inherit that resolved value.

     The formulas below are character-identical to their :root twins in
     core/tokens.css (both read var(--sf-fluid-width)); keep the two copies in
     sync if the generative formula ever changes (cf. themes.css SL-001). */
  .sf-fluid-cq { container-type: inline-size; }
  .sf-fluid-cq > * {
      --sf-fluid-width: 100cqi;
      --sf-text-2xs: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale));
      --sf-text-xs: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale));
      --sf-text-s: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale));
      --sf-text-m: calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale));
      --sf-text-l: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale));
      --sf-text-xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale));
      --sf-text-2xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale));
      --sf-text-3xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale));
      --sf-text-4xl: calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale));
      --sf-text-display-s: calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale));
      --sf-text-display-m: calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale));
      --sf-text-display-l: calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale));
      --sf-space-2xs: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale));
      --sf-space-xs: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale));
      --sf-space-s: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale));
      --sf-space-m: calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale));
      --sf-space-l: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale));
      --sf-space-xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale));
      --sf-space-2xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale));
      --sf-space-3xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale));
      --sf-space-4xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale));
  }


  /* Stack & gap */
  .sf-stack {
    display:        flex;
    flex-direction: column;
    gap:            var(--sf-stack-gap);
  }
  .sf-stack--xs  { gap: var(--sf-space-xs); }
  .sf-stack--s   { gap: var(--sf-space-s); }
  .sf-stack--m   { gap: var(--sf-space-m); }
  .sf-stack--l   { gap: var(--sf-space-l); }
  .sf-stack--xl  { gap: var(--sf-space-xl); }
  .sf-stack--2xl { gap: var(--sf-space-2xl); }

  .sf-stack--center  { align-items: center; }
  .sf-stack--end     { align-items: flex-end; }
  .sf-stack--stretch { align-items: stretch; }

  .sf-gap { gap: var(--sf-gap); }
  .sf-gap--xs  { gap: var(--sf-space-xs); }
  .sf-gap--s   { gap: var(--sf-space-s); }
  .sf-gap--m   { gap: var(--sf-space-m); }
  .sf-gap--l   { gap: var(--sf-space-l); }
  .sf-gap--xl  { gap: var(--sf-space-xl); }
  .sf-gap--2xl { gap: var(--sf-space-2xl); }

  
  /* Box */
  .sf-box {
    padding: var(--sf-box-padding);
    outline: var(--sf-box-border-width) solid var(--sf-box-border-color);
  }

  
  /* Center */
  .sf-center {
    box-sizing:      content-box;
    width:           auto;
    margin-inline:   auto;
    max-inline-size: var(--sf-center-max);
    padding-inline:  var(--sf-center-gutter);
  }

  .sf-center--intrinsic {
    display:        flex;
    flex-direction: column;
    align-items:    center;
  }

  /* Place-center — the box-neutral centring primitive. Unlike .sf-center (which
     centres ITSELF as a max-width wrapper) this centres an element's CONTENT on
     both axes, and unlike the flow primitives' --center modifiers it imposes no
     row/column/wrap semantics: a plain element becomes a centring box. It is
     the framework's named form of the community `display:grid; place-items:
     center` idiom (cf. Tailwind's place-items-center). Give the box a size
     (min-block-size / height) for the block-axis centring to have room. */
  .sf-place-center {
    display:     grid;
    place-items: center;
  }


  /* Cluster */
  .sf-cluster {
    display:         flex;
    flex-wrap:       wrap;
    gap:             var(--sf-cluster-gap);
    align-items:     var(--sf-cluster-align);
    justify-content: var(--sf-cluster-justify);
  }
  .sf-cluster--xs      { gap: var(--sf-space-xs); }
  .sf-cluster--s       { gap: var(--sf-space-s); }
  .sf-cluster--m       { gap: var(--sf-space-m); }
  .sf-cluster--l       { gap: var(--sf-space-l); }
  .sf-cluster--xl      { gap: var(--sf-space-xl); }
  .sf-cluster--2xl     { gap: var(--sf-space-2xl); }

  .sf-cluster--no-wrap  { flex-wrap: nowrap; }
  .sf-cluster--center   { justify-content: center; }
  .sf-cluster--end      { justify-content: flex-end; }
  .sf-cluster--between  { justify-content: space-between; }

  
  /* Sidebar */
  .sf-sidebar {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--sf-sidebar-gap);
  }

  .sf-sidebar > :first-child {
    flex-basis: var(--sf-sidebar-width);
    flex-grow:  1;
  }

  .sf-sidebar > :last-child {
    flex-basis:      0;
    flex-grow:       999;
    min-inline-size: var(--sf-sidebar-min-width);
  }

  .sf-sidebar--right > :first-child {
    flex-basis:      0;
    flex-grow:       999;
    min-inline-size: var(--sf-sidebar-min-width);
  }

  .sf-sidebar--right > :last-child {
    flex-basis: var(--sf-sidebar-width);
    flex-grow:  1;
  }

  .sf-sidebar--narrow { --sf-sidebar-width: 12rem; }
  .sf-sidebar--wide   { --sf-sidebar-width: 26rem; }

  
  /* Switcher */
  .sf-switcher {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--sf-switcher-gap);
  }

  .sf-switcher > * {
    flex-grow:  1;
    flex-basis: calc((var(--sf-switcher-threshold) - 100%) * 999);
  }

  .sf-switcher--no-wrap  { flex-wrap: nowrap; overflow-x: auto; overflow-inline: auto; }
  .sf-switcher--vertical { flex-direction: column; }

  
  /* Grid & icon */
  .sf-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--sf-grid-min), 100%), 1fr));
    gap:                   var(--sf-grid-gap);
  }

  .sf-grid--fit {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--sf-grid-min), 100%), 1fr));
  }

  .sf-grid--xs { --sf-grid-min: var(--sf-grid-min-xs); }
  .sf-grid--s  { --sf-grid-min: var(--sf-grid-min-s); }
  .sf-grid--m  { --sf-grid-min: var(--sf-grid-min-m); }
  .sf-grid--l  { --sf-grid-min: var(--sf-grid-min-l); }
  .sf-grid--xl { --sf-grid-min: var(--sf-grid-min-xl); }
  .sf-grid--2xl { --sf-grid-min: var(--sf-grid-min-2xl); }

  .sf-grid--dense { grid-auto-flow: dense; }

  /* Grid-flex — flexbox alternative to .sf-grid for item counts that
     don't divide evenly: leftover last-row items stretch to fill the
     row by default, or stay fixed-width and centered with --center.
     CSS Grid keeps orphans pinned to their track; flex does not. */
  .sf-grid-flex {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--sf-grid-gap);
  }
  .sf-grid-flex > * {
    flex: 1 1 min(var(--sf-grid-min), 100%);
  }

  .sf-grid-flex--center { justify-content: center; }
  .sf-grid-flex--center > * {
    flex-grow:  0;
    flex-basis: min(var(--sf-grid-min), 100%);
  }

  .sf-grid-flex--xs  { --sf-grid-min: var(--sf-grid-min-xs); }
  .sf-grid-flex--s   { --sf-grid-min: var(--sf-grid-min-s); }
  .sf-grid-flex--m   { --sf-grid-min: var(--sf-grid-min-m); }
  .sf-grid-flex--l   { --sf-grid-min: var(--sf-grid-min-l); }
  .sf-grid-flex--xl  { --sf-grid-min: var(--sf-grid-min-xl); }
  .sf-grid-flex--2xl { --sf-grid-min: var(--sf-grid-min-2xl); }

  .sf-icon {
    display:        inline-block;
    inline-size:    var(--sf-icon-size, var(--sf-icon-m));
    block-size:     var(--sf-icon-size, var(--sf-icon-m));
    flex-shrink:    0;
    vertical-align: text-bottom;
    fill:           currentcolor;
  }
  .sf-icon--xs  { --sf-icon-size: var(--sf-icon-xs); }
  .sf-icon--s   { --sf-icon-size: var(--sf-icon-s); }
  .sf-icon--m   { --sf-icon-size: var(--sf-icon-m); }
  .sf-icon--l   { --sf-icon-size: var(--sf-icon-l); }
  .sf-icon--xl  { --sf-icon-size: var(--sf-icon-xl); }
  .sf-icon--2xl { --sf-icon-size: var(--sf-icon-2xl); }

  .sf-icon--boxed {
    inline-size:    calc(var(--sf-icon-size, var(--sf-icon-m)) + var(--sf-icon-box-pad) * 2);
    block-size:     calc(var(--sf-icon-size, var(--sf-icon-m)) + var(--sf-icon-box-pad) * 2);
    padding:        var(--sf-icon-box-pad);
    border:         var(--sf-icon-box-border);
    border-radius:  var(--sf-icon-box-radius);
    background:     var(--sf-icon-box-bg);
    box-sizing:     border-box;
  }

  
  /* Cover */
  .sf-cover {
    display:        flex;
    flex-direction: column;
    min-height:     var(--sf-cover-min-height);
    padding-block:  var(--sf-cover-padding);
  }

  .sf-cover > .sf-cover__center {
    margin-block: auto;
  }

  .sf-cover--min { min-height: 50dvh; }

  .sf-cover--max { min-height: 0; max-block-size: 100dvh; }
  .sf-cover--padding-s { padding-block: var(--sf-space-xl); }
  .sf-cover--padding-l { padding-block: var(--sf-space-4xl); }

  
  /* Frame */
  .sf-frame {
    aspect-ratio:    var(--sf-frame-ratio);
    overflow:        hidden;
    display:         flex;
    justify-content: center;
    align-items:     center;
  }

  .sf-frame > img,
  .sf-frame > video {
    inline-size: 100%;
    block-size:  100%;
    object-fit:  cover;
  }

  .sf-frame--square   { aspect-ratio: var(--sf-ratio-square); }
  .sf-frame--video    { aspect-ratio: var(--sf-ratio-video); }
  .sf-frame--cinema   { aspect-ratio: var(--sf-ratio-cinema); }
  .sf-frame--portrait { aspect-ratio: var(--sf-ratio-portrait); }
  .sf-frame--4-3      { aspect-ratio: var(--sf-ratio-4-3); }
  .sf-frame--3-2      { aspect-ratio: var(--sf-ratio-3-2); }
  .sf-frame--golden   { aspect-ratio: var(--sf-ratio-golden); }


  /* Background layer — absolutely-positioned cover media that sits behind a
     parent's content. The parent is auto-promoted to a positioned, isolated
     stacking context via :has(), so .sf-bg-layer composes natively under .sf-scrim
     (background → scrim gradient → content). Works as a bare <img class="sf-bg-layer">
     or as a wrapper with a nested > img / > video. */
  :where(:has(> .sf-bg-layer)) {
    position:  relative;
    isolation: isolate;
  }

  .sf-bg-layer {
    position:        absolute;
    inset:           var(--sf-bg-layer-inset);
    inline-size:     calc(100% - 2 * var(--sf-bg-layer-inset));
    block-size:      calc(100% - 2 * var(--sf-bg-layer-inset));
    object-fit:      var(--sf-bg-layer-fit);
    object-position: var(--sf-bg-layer-position);
    border-radius:   var(--sf-bg-layer-radius);
    z-index:         var(--sf-bg-layer-z);
    pointer-events:  none;
  }

  .sf-bg-layer > :is(img, video, picture) {
    inline-size:     100%;
    block-size:      100%;
    object-fit:      var(--sf-bg-layer-fit);
    object-position: var(--sf-bg-layer-position);
    border-radius:   var(--sf-bg-layer-radius);
    pointer-events:  none;
  }

  .sf-bg-layer > picture > img {
    inline-size:     100%;
    block-size:      100%;
    object-fit:      var(--sf-bg-layer-fit);
    object-position: var(--sf-bg-layer-position);
    border-radius:   var(--sf-bg-layer-radius);
    pointer-events:  none;
  }


  .sf-reel {
    display:               flex;
    block-size:            var(--sf-reel-height);
    gap:                   var(--sf-reel-gap);
    overflow-x:                 auto;
    overflow-inline:            auto;
    scroll-snap-type:           inline mandatory;
    scroll-padding-inline:      var(--sf-reel-gap);
    overscroll-behavior-inline: contain;
    scrollbar-width:       thin;
    scrollbar-color:       var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
  }

  .sf-reel::-webkit-scrollbar        { block-size: 6px; }
  .sf-reel::-webkit-scrollbar-track  { background: var(--sf-scrollbar-track); border-radius: var(--sf-radius-full); }
  .sf-reel::-webkit-scrollbar-thumb  { background: var(--sf-scrollbar-thumb); border-radius: var(--sf-radius-full); }

  .sf-reel > * {
    flex:              0 0 var(--sf-reel-item-width);
    scroll-snap-align: start;
  }

  
  /* Physical left (not inset-inline-start): translate() uses the physical axis,
     so logical + translate breaks centering in RTL layouts. */
  .sf-imposter {
    position:          absolute;
    inset-block-start: 50%;
    left:              50%;
    translate:         -50% -50%;
  }

  .sf-imposter--fixed {
    position: fixed;
  }

  .sf-imposter--contain {
    max-inline-size: calc(100% - var(--sf-imposter-margin) * 2);
    max-block-size:  calc(100% - var(--sf-imposter-margin) * 2);
    overflow:        auto;
  }

  
  .sf-alternate {
    display:   grid;
    gap:       var(--sf-alternate-gap);
    container: sf-alternate / inline-size;
  }

  .sf-alternate > * {
    display:     grid;
    gap:         var(--sf-alternate-inner-gap);
    align-items: center;
  }

  @container sf-alternate (min-width: 48rem) {
    .sf-alternate > * {
      grid-template-columns: 1fr 1fr;
    }
    .sf-alternate > :nth-child(even) > :first-child { order: 2; }
    .sf-alternate > :nth-child(even) > :last-child  { order: 1; }
  }

  
  .sf-pancake {
    display:             grid;
    grid-template-rows:  auto 1fr auto;
    min-height:          100dvh;
  }

  
  .sf-grid-cols-1 {
    display: grid;
    gap:     var(--sf-grid-gap);
  }

  
  .sf-grid-cols-2, .sf-grid-cols-3, .sf-grid-cols-4, .sf-grid-cols-6 {
    display: grid;
    gap:     var(--sf-grid-gap);
  }

  @container (min-width: 30rem) {
    .sf-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .sf-grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
  }

  @container (min-width: 48rem) {
    .sf-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .sf-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .sf-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .sf-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
  }

  
  .sf-grid-cols-1-2, .sf-grid-cols-2-1,
  .sf-grid-cols-1-3, .sf-grid-cols-3-1 {
    display: grid;
    gap:     var(--sf-grid-gap);
  }

  @container (min-width: 48rem) {
    .sf-grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
    .sf-grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
    .sf-grid-cols-1-3 { grid-template-columns: 1fr 3fr; }
    .sf-grid-cols-3-1 { grid-template-columns: 3fr 1fr; }
  }

  .sf-equal {
    column-width: var(--sf-equal-min-col);
    column-gap:   var(--sf-equal-gap);
    column-rule:  var(--sf-equal-rule-width) var(--sf-equal-rule-style) var(--sf-equal-rule-color);
  }
  .sf-equal > * { break-inside: avoid; }

  .sf-equal--2 { column-count: 2; }
  .sf-equal--3 { column-count: 3; }
  .sf-equal--4 { column-count: 4; }
  .sf-equal--6 { column-count: 6; }

  
  .sf-content-grid {
    display: grid;
    /* Establish the same NAMED inline-size query container as .sf-container
       (`sf-layout`), not just an anonymous one. .sf-content-grid is a
       section-level wrapper that REPLACES .sf-container when you need
       breakout/full-bleed — but .sf-container carries the CQ scope that
       .sf-grid-cols-* / .sf-bento rely on, and dropping it silently killed
       those primitives inside a content grid. Matching the name too means a
       user's `@container sf-layout (…)` rule keeps matching across the swap, so
       the two wrappers are genuinely interchangeable (anonymous
       `@container (…)` queries already matched either — the framework's own
       primitives use those — but a name-targeted query would not have).
       Safe re SL-034: .sf-content-grid's own tracks are fixed (they never
       @container-query themselves), so becoming a query container can't create
       a self-query. Safe re full-bleed: inline-size containment doesn't change
       track resolution — the `full` track still reaches the wrapper's edges. */
    container: sf-layout / inline-size;
    grid-template-columns:
      [full-start]
      minmax(var(--sf-gutter), 1fr)
      [breakout-start]
      minmax(0, calc((var(--sf-breakout-width) - var(--sf-content-width)) / 2))
      [content-start]
      min(var(--sf-content-width), 100% - var(--sf-gutter) * 2)
      [content-end]
      minmax(0, calc((var(--sf-breakout-width) - var(--sf-content-width)) / 2))
      [breakout-end]
      minmax(var(--sf-gutter), 1fr)
      [full-end];
  }

  .sf-content-grid > *              { grid-column: content; }
  .sf-content-grid > .sf-breakout   { grid-column: breakout; }
  .sf-content-grid > .sf-full-bleed { grid-column: full; }

  .sf-bento {
    display:               grid;
    grid-template-columns: repeat(var(--sf-bento-cols, var(--sf-bento-cols-default)), 1fr);
    grid-auto-rows:        minmax(var(--sf-bento-row, var(--sf-bento-row-default)), auto);
    grid-auto-flow:        dense;
    gap:                   var(--sf-bento-gap);
  }

  @container (max-width: 29.99rem) {
    .sf-bento { grid-template-columns: 1fr; }
  }

  @container (min-width: 30rem) and (max-width: 47.99rem) {
    .sf-bento { grid-template-columns: repeat(2, 1fr); }
  }

  /* Container column modifiers */
  .sf-bento--2       { --sf-bento-cols: 2; }
  .sf-bento--3       { --sf-bento-cols: 3; }
  .sf-bento--6       { --sf-bento-cols: 6; }

  /* Container row height modifiers — named after the --sf-bento-row-* token
     they set, not just "tall"/"compact", so they can't be mistaken for the
     child span modifier below. */
  .sf-bento--row-compact { --sf-bento-row: var(--sf-bento-row-compact); }
  .sf-bento--row-tall    { --sf-bento-row: var(--sf-bento-row-tall); }

  /* Child span modifiers — go on an item inside .sf-bento, never on
     .sf-bento itself. .sf-bento-tall (this item spans 2 rows) is not an
     alias of .sf-bento--row-tall above (every row in the grid is taller). */
  .sf-bento-wide     { grid-column: span 2; }
  .sf-bento-full     { grid-column: 1 / -1; }
  .sf-bento-tall     { grid-row:    span 2; }
  .sf-bento-featured { grid-column: span 2; grid-row: span 2; }

  /* A spanning child can't request more columns than the 1-column mobile
     grid has, or CSS Grid adds an implicit column to satisfy the span,
     breaking the single-column layout the query above exists to guarantee.
     Placed after the modifiers above (equal specificity) so it wins on
     source order regardless of query-match state. */
  @container (max-width: 29.99rem) {
    .sf-bento-wide, .sf-bento-featured { grid-column: span 1; }
  }

  
  .sf-subgrid      { display: grid; grid-template-columns: subgrid; }
  .sf-subgrid-rows { display: grid; grid-template-rows:    subgrid; }

}

/* ─── core/macros.css ─── */
/* SLASHED — core/macros.css
   @layer slashed.macros
   Reusable recipes: prose, surface, flow, cards, media, hero, scrims, clamps.
   Prefix: .sf-*; values resolve through macro tokens. */

@layer slashed.macros {

  
  .sf-prose {
    max-width:     var(--sf-container-prose);
    overflow-wrap: break-word;
  }

  .sf-prose > * + *              { margin-block-start: var(--sf-prose-paragraph); }
  .sf-prose :is(h2, h3, h4, h5, h6) + * { margin-block-start: var(--sf-prose-heading-gap); }
  .sf-prose li + li              { margin-block-start: var(--sf-prose-list-gap); }
  .sf-prose :is(blockquote, pre) { margin-block: var(--sf-prose-block-margin); }
  .sf-prose blockquote           { font-style: italic; padding-inline-start: var(--sf-prose-blockquote-padding); border-inline-start: var(--sf-prose-blockquote-border); }
  .sf-prose img                  { margin-block: var(--sf-prose-media-margin); border-radius: var(--sf-prose-media-radius); }
  .sf-prose :is(ul, ol)          { padding-inline-start: 1.25em; }
  .sf-prose > :is(ul, ol)        { margin-block-end: 0; }
  .sf-prose :is(ul, ol) :is(ul, ol) { margin-block-start: var(--sf-prose-nested-list-gap); }
  .sf-prose ul                   { list-style: disc; }
  .sf-prose ol                   { list-style: decimal; }
  .sf-prose ::marker             { color: var(--sf-prose-marker-color); }
  .sf-prose hr                   { margin-block: var(--sf-prose-hr-margin); }
  .sf-prose figure               { margin-block: var(--sf-prose-figure-margin); }
  .sf-prose figcaption           { font-size: var(--sf-prose-figcaption-size); color: var(--sf-color-text--muted); margin-block-start: var(--sf-prose-list-gap); }
  .sf-prose table                { margin-block: var(--sf-prose-block-margin); display: block; overflow-x: auto; overflow-inline: auto; inline-size: 100%; max-inline-size: 100%; }
  .sf-prose :is(th, td)          { padding: var(--sf-prose-table-pad); }
  .sf-prose video                { margin-block: var(--sf-prose-media-margin); border-radius: var(--sf-prose-media-radius); }

  /* Specificity 0-2-1 intentionally beats .sf-prose's 0-2-0 child selectors —
     documented exception. */
  .sf-prose .sf-not-prose > * + *    { margin-block-start: 0; }
  .sf-prose .sf-not-prose li + li    { margin-block-start: 0; }

  .sf-prose .sf-not-prose :is(ul,ol) { list-style: revert; padding-inline-start: revert; }
  .sf-prose .sf-not-prose ::marker   { color: inherit; }
  .sf-prose .sf-not-prose blockquote {
    margin-block: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
    font-style: normal;
  }
  .sf-prose .sf-not-prose hr         { margin-block: 0; }
  .sf-prose .sf-not-prose img        { margin-block: 0; border-radius: 0; }
  .sf-prose .sf-not-prose figure     { margin-block: 0; }
  .sf-prose .sf-not-prose figcaption { font-size: inherit; color: inherit; margin-block-start: 0; }
  .sf-prose .sf-not-prose table      { margin-block: 0; display: revert; overflow-x: revert; overflow-inline: revert; inline-size: revert; max-inline-size: revert; }
  .sf-prose .sf-not-prose :is(th,td) { padding: revert; }
  .sf-prose .sf-not-prose video      { margin-block: 0; border-radius: 0; }

  .sf-flow > * + * {
    margin-block-start: var(--sf-flow-space);
  }

  .sf-truncate {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }

  .sf-line-clamp-2,
  .sf-line-clamp-3,
  .sf-line-clamp-N {
    display:            -webkit-box;
    /* stylelint-disable-next-line property-no-vendor-prefix -- de-facto standard; unprefixed CSS Overflow 4 line-clamp not yet shipped */
    -webkit-box-orient: vertical;
    overflow:           hidden;
  }

  /* stylelint-disable-next-line property-no-vendor-prefix -- see above */
  .sf-line-clamp-2 { -webkit-line-clamp: 2; }
  /* stylelint-disable-next-line property-no-vendor-prefix -- see above */
  .sf-line-clamp-3 { -webkit-line-clamp: 3; }
  .sf-line-clamp-N {
    /* stylelint-disable-next-line property-no-vendor-prefix -- see above */
    -webkit-line-clamp: var(--sf-line-clamp);
  }

  .sf-equal-height {
    display:     flex;
    align-items: stretch;
  }
  .sf-equal-height > * {
    block-size: auto;
    flex:       1 1 auto;
  }

  .sf-aspect {
    aspect-ratio: var(--sf-aspect, 16 / 9);
  }

  .sf-scroll-shadow {
    overflow-y:     auto;
    overflow-block: auto;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 15.4 */
    -webkit-mask-image:
      linear-gradient(to bottom,
        transparent 0,
        black var(--sf-scroll-shadow-size),
        black calc(100% - var(--sf-scroll-shadow-size)),
        transparent 100%);
    mask-image:
      linear-gradient(to bottom,
        transparent 0,
        black var(--sf-scroll-shadow-size),
        black calc(100% - var(--sf-scroll-shadow-size)),
        transparent 100%);
  }

  .sf-scroll-snap {
    overflow-y:                auto;
    overflow-block:            auto;
    scroll-snap-type:          block mandatory;
    overscroll-behavior-block: contain;
  }
  .sf-scroll-snap > * {
    scroll-snap-align: start;
  }

  .sf-overflow-fade {
    overflow: hidden;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 15.4 */
    -webkit-mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
  }

  .sf-overflow-fade--right {
    overflow: hidden;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 15.4 */
    -webkit-mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
  }

  .sf-overflow-fade--left {
    overflow: hidden;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 15.4 */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--sf-mask-scrim-start),
      black 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--sf-mask-scrim-start),
      black 100%
    );
  }

  .sf-overflow-fade--top {
    overflow: hidden;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 15.4 */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      black var(--sf-mask-scrim-start),
      black 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      black var(--sf-mask-scrim-start),
      black 100%
    );
  }

  .sf-overflow-fade--bottom {
    overflow: hidden;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 15.4 */
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0,
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0,
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
  }

  .sf-overflow-fade--block {
    overflow: hidden;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 15.4 */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      black var(--sf-mask-scrim-start),
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      black var(--sf-mask-scrim-start),
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
  }

  .sf-overflow-fade--inline {
    overflow: hidden;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 15.4 */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--sf-mask-scrim-start),
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--sf-mask-scrim-start),
      black calc(100% - var(--sf-mask-scrim-end)),
      transparent 100%
    );
  }

  .sf-no-tap-highlight {
    /* stylelint-disable-next-line property-no-vendor-prefix -- no unprefixed equivalent */
    -webkit-tap-highlight-color: transparent;
  }

  .sf-surface { background: var(--sf-surface-color); }

  .sf-surface--primary   { --sf-surface-color: var(--sf-color-primary);   background: var(--sf-color-primary);   color: var(--sf-color-text--on-primary); }
  .sf-surface--secondary { --sf-surface-color: var(--sf-color-secondary); background: var(--sf-color-secondary); color: var(--sf-color-text--on-secondary); }
  .sf-surface--tertiary  { --sf-surface-color: var(--sf-color-tertiary);  background: var(--sf-color-tertiary);  color: var(--sf-color-text--on-tertiary); }
  .sf-surface--action    { --sf-surface-color: var(--sf-color-action);    background: var(--sf-color-action);    color: var(--sf-color-text--on-action); }
  .sf-surface--neutral   { --sf-surface-color: var(--sf-color-neutral);   background: var(--sf-color-neutral);   color: var(--sf-color-text--on-neutral); }
  .sf-surface--inverse   { --sf-surface-color: var(--sf-color-inverse);   background: var(--sf-color-inverse);   color: var(--sf-color-text--on-inverse); }
  .sf-surface--success   { --sf-surface-color: var(--sf-color-success);   background: var(--sf-color-success);   color: var(--sf-color-text--on-success); }
  .sf-surface--warning   { --sf-surface-color: var(--sf-color-warning);   background: var(--sf-color-warning);   color: var(--sf-color-text--on-warning); }
  .sf-surface--info      { --sf-surface-color: var(--sf-color-info);      background: var(--sf-color-info);      color: var(--sf-color-text--on-info); }
  .sf-surface--danger    { --sf-surface-color: var(--sf-color-danger);    background: var(--sf-color-danger);    color: var(--sf-color-text--on-danger); }

  @supports (color: oklch(from red l c h)) and (width: calc(1px * sign(1))) {
    :is(.sf-surface,
        .sf-surface--primary, .sf-surface--secondary, .sf-surface--tertiary,
        .sf-surface--action, .sf-surface--neutral, .sf-surface--inverse,
        .sf-surface--success, .sf-surface--warning,
        .sf-surface--info, .sf-surface--danger) {

      --sf-surface-contrast: oklch(from var(--sf-surface-color) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0 / 1);
      background: var(--sf-surface-color);
      color: var(--sf-surface-contrast);
      --sf-color-text:              var(--sf-surface-contrast);
      --sf-color-heading:           var(--sf-surface-contrast);
      --sf-color-link:              oklch(from var(--sf-surface-contrast) l calc(c + 0.08) h);
      --sf-color-link--hover:       var(--sf-surface-contrast);
      --sf-color-link--underline:   oklch(from var(--sf-surface-contrast) l c h / 0.5);
      --sf-color-text--subtle:   oklch(from var(--sf-surface-contrast) l c h / 0.70);
      --sf-color-text--placeholder: oklch(from var(--sf-surface-contrast) l c h / 0.45);
      --sf-color-text--disabled:    oklch(from var(--sf-surface-contrast) l c h / 0.30);
      --sf-color-border:            oklch(from var(--sf-surface-contrast) l c h / 0.20);
      --sf-color-border--subtle:    oklch(from var(--sf-surface-contrast) l c h / 0.12);
      --sf-color-border--strong:    oklch(from var(--sf-surface-contrast) l c h / 0.35);
      --sf-focus-ring-color:        var(--sf-surface-contrast);
      --sf-caret-color:             var(--sf-surface-contrast);

      --sf-shadow-color:            oklch(from var(--sf-surface-color) var(--sf-shadow-lightness) c h);

      /* :root-only alias-overrides seal their value at the DECLARING element
         (var() resolves on :root), so a heading/body that reads the alias
         reads the frozen page value and ignores this surface's re-declared
         semantic token above — leaving headings dark on a dark surface.
         Re-declare the aliases here so they re-resolve against THIS surface's
         adapted --sf-color-heading / --sf-color-text. Same class of bug as the
         [data-theme] block in themes.css (#496), extended to heading/body. */
      --sf-heading-color:           var(--sf-color-heading);
      --sf-body-color:              var(--sf-color-text);

      /* INTERNAL flag (inherits): signals "inside an auto-contrast surface" so a
         nested .sf-card can restore surface-appropriate foreground for its own
         (non-adapting) background via a style query — see .sf-card in
         optional/components.css (#496). Not a public hook; read, don't set. */
      --sf-surface-active:          1;
    }
  }
  .sf-scrim {
    position:  relative;
    isolation: isolate;
  }
  .sf-scrim::before {
    content:        "";
    position:       absolute;
    inset:          0;
    z-index:        0;
    background:     var(--sf-scrim-gradient);
    pointer-events: none;
  }

  .sf-scrim > :not(img, picture, video, svg, canvas),
  .sf-scrim__content {
    position: relative;
    z-index:  1;
  }
  .sf-scrim--top    { --sf-scrim-direction: to bottom; }
  .sf-scrim--bottom { --sf-scrim-direction: to top; }
  .sf-scrim--full   { --sf-scrim-gradient: var(--sf-scrim-color); }

  /* Named background surface preset (issue #523). Composes the
     --sf-surface-bg-* token set (see tokens.macros.css) into one reusable,
     named background: base colour + image/gradient/pattern, sizing, an
     optional overlay layered above the image, and an optional animation.
     Inert until a preset feeds the tokens. The overlay is the first
     background-image layer so it paints ABOVE the image. */
  .sf-surface-bg {
    background-color:      var(--sf-surface-bg-color);
    background-image:      var(--sf-surface-bg-overlay), var(--sf-surface-bg-image);
    background-size:       var(--sf-surface-bg-size);
    background-position:   var(--sf-surface-bg-position);
    background-repeat:     var(--sf-surface-bg-repeat);
    background-attachment: var(--sf-surface-bg-attachment);
    animation:             var(--sf-surface-bg-animation);
  }

  .sf-text-protect {
    text-shadow: var(--sf-scrim-text-shadow);
  }

  .sf-text-gradient {
    background-image: var(--sf-gradient-primary);
    background-clip: text;
    color: transparent;
  }

  .sf-link-external::after {
    content:         var(--sf-link-external-marker);
    display:         inline-block;
    font-size:       0.85em;
    text-decoration: none;
  }
  /* Alt-text form (accessible name for the glyph) — gated so a UA that
     rejects the "value / string" grammar keeps the plain marker above
     instead of dropping the whole declaration. */
  @supports (content: "x" / "y") {
    .sf-link-external::after {
      content: var(--sf-link-external-marker) / var(--sf-link-external-label);
    }
  }

  .sf-content-auto {
    content-visibility:     auto;
    contain-intrinsic-size: auto var(--sf-content-intrinsic-size, 500px);
  }

  .sf-tabular-nums {
    font-variant-numeric: var(--sf-font-numeric, tabular-nums);
  }

  /* filter: drop-shadow() utilities — unlike box-shadow, follows the element's
     actual alpha shape (SVG icons, PNG cutouts, transparent logos). */
  .sf-drop-shadow-xs { filter: var(--sf-drop-shadow-xs); }
  .sf-drop-shadow-s  { filter: var(--sf-drop-shadow-s); }
  .sf-drop-shadow-m  { filter: var(--sf-drop-shadow-m); }
  .sf-drop-shadow-l  { filter: var(--sf-drop-shadow-l); }
  .sf-drop-shadow-xl { filter: var(--sf-drop-shadow-xl); }

  .sf-link--subtle:link,
  .sf-link--subtle:visited {
    text-decoration-line: none;
  }
  .sf-link--subtle:is(:link, :visited):hover,
  .sf-link--subtle:is(:link, :visited):focus-visible {
    text-decoration-line:  underline;
    text-decoration-color: currentcolor;
  }

  .sf-link--reverse:link,
  .sf-link--reverse:visited {
    text-decoration-line: underline;
  }
  .sf-link--reverse:is(:link, :visited):hover,
  .sf-link--reverse:is(:link, :visited):focus-visible {
    text-decoration-line: none;
  }

  /* Overlap recipe — one element intentionally overlapping the previous
     one (e.g. an image pulled up over the card below it), via a negative
     logical margin + a raised stacking context. Directional variants are
     standalone (margins are distinct properties, not a re-pointable knob). */
  .sf-overlap,
  .sf-overlap--down {
    position: relative;
    z-index:  var(--sf-z-raised);
  }
  .sf-overlap        { margin-block-start:  calc(-1 * var(--sf-overlap-pull)); }
  .sf-overlap--down  { margin-block-end:    calc(-1 * var(--sf-overlap-pull)); }

  /* Card-container recipe — the receiving side of an overlap: an isolated
     stacking context with block-start padding compensation so in-flow
     content clears an element intruding from above. The padding knob
     defaults to the pull knob so one override tunes both. */
  .sf-overlap-host {
    position:  relative;
    isolation: isolate;
    /* var() fallback resolved on this element, not pre-baked at :root —
       so a local --sf-overlap-pull override (even without setting
       --sf-overlap-host-pad) is honored (#496-class pitfall). */
    padding-block-start: var(--sf-overlap-host-pad, var(--sf-overlap-pull));
  }

}

/* ─── core/states.css ─── */
/* SLASHED — core/states.css
   @layer slashed.states
   Generic runtime states toggled by JS or ARIA: visibility, interactivity, selection, busy/current.
   Prefix: .sf-is-*; not utilities or component-specific variants.

   Reach for a native mechanism first — a pseudo-class (:disabled, :read-only,
   :empty, :user-invalid), a boolean/enumerated attribute ([hidden], [disabled],
   [readonly]), or an ARIA state ([aria-busy], [aria-current], [aria-expanded],
   [aria-selected], [aria-pressed]) — since the browser (and assistive tech)
   already understands it for free. Add a .sf-is-* class only for states with
   no native equivalent, or ones this file's own tokens/consumers need as a
   hook (see docs/states.md). See docs/states.md § "Prefer native state" for
   the full rationale and the [hidden] precedent that got .sf-is-hidden
   removed in favour of the attribute it duplicated. */

@layer slashed.states {

  /* No visibility classes here: .sf-is-hidden duplicated [hidden] (removed —
     core/reset.css hardens that attribute identically). .sf-invisible /
     .sf-visible moved to optional/utilities.css as single-property helpers
     (same call as Bulma's is-hidden/is-invisible living under "helpers",
     not component/state docs) — still the hook docs/roadmap.md's
     reveal-on-scroll pattern targets, just renamed and relocated. */

  /* -- INTERACTIVITY --
     No .sf-is-readonly here: it duplicated :read-only for real form controls,
     and its pointer-events:none blocked text selection that a genuinely
     read-only field should still allow — reach for :read-only, or
     [aria-readonly] on a non-native widget, instead. */

  /* cursor: not-allowed inherits to children with pointer-events: auto —
     intentional, part of the .sf-is-disabled API surface. */
  .sf-is-disabled {
    opacity:        var(--sf-opacity-disabled);
    pointer-events: none;

    cursor:         not-allowed;
    user-select:    none;
  }

  /* -- LOADING / ASYNC FEEDBACK -- */

  .sf-is-loading {
    color:          transparent !important;
    pointer-events: none;
    position:       relative;
  }

  .sf-is-loading > * {
    opacity: 0 !important;
  }

  .sf-is-loading::after {
    content:             "";
    position:            absolute;
    inset-block-start:   50%;
    inset-inline-start:  50%;
    inline-size:         1em;
    block-size:          1em;
    margin-block-start:  -0.5em;
    margin-inline-start: -0.5em;
    border:        var(--sf-border-width-2) solid var(--sf-color-border--strong);
    border-block-start-color: var(--sf-color-action);
    border-radius: var(--sf-radius-full);

    animation: var(--sf-animation-spin);
  }

  /* No .sf-is-busy / .sf-is-pending here: both were a couple of
     property-value declarations (cursor:progress, plus opacity for
     pending's "optimistic UI" dimming) with no consumer and no native gap
     they filled — [aria-busy="true"] covers the semantic, and the visual
     is two lines to hand-roll in your own component CSS if you want it. */

  /* Shimmer loading placeholder (was .sf-is-skeleton pre-Unreleased; renamed so
     "skeleton" names only the planned .sf-skeleton component, not a state —
     see docs/migration.md and roadmap.md #575). The class name now mirrors its
     driving token, --sf-animation-shimmer. */
  img.sf-is-shimmer,
  .sf-is-shimmer img {
    opacity: 0 !important;
  }

  .sf-is-shimmer {
    color:           transparent !important;
    background:      linear-gradient(
                       90deg,
                       var(--sf-color-inset) 25%,
                       var(--sf-color-raised) 50%,
                       var(--sf-color-inset) 75%
                     );
    background-size: 200% 100%;
    animation: var(--sf-animation-shimmer);
    border-radius:   var(--sf-radius-s);
    pointer-events:  none;
    user-select:     none;
  }

  /* -- SELECTED / HIGHLIGHTED --
     No .sf-is-active / .sf-is-open / .sf-is-collapsed / .sf-is-expanded /
     .sf-is-current / .sf-is-pressed here: these only ever set an
     inheritable --sf-is-* custom property for a hypothetical consumer
     calc() to branch on, with zero consumer anywhere in this codebase or
     its demo. Speculative "might be useful one day" surface, removed —
     see docs/states.md § "Prefer native state". Reach for [aria-current],
     [aria-expanded], [aria-pressed] as the styling hook instead; .sf-is-
     selected / .sf-is-highlighted below cover the two cases (selection,
     transient emphasis) that still need their own visual. */

  .sf-is-selected {
    background-color: var(--sf-color-bg--selected);
  }

  .sf-is-highlighted {
    background-color: var(--sf-color-bg--focus);
  }

  /* -- VALIDATION / FEEDBACK --
     No .sf-is-danger here: identical implementation to .sf-is-invalid/
     .sf-is-error (both only ever wrote --sf-field-*, so it never worked as
     the "destructive-action context" its own docs described outside a form
     field) and, per docs/migration.md, visual variants belong in your own
     component CSS anyway. Use .sf-is-invalid/.sf-is-error, or your own
     `--danger` variant class, instead. */

  .sf-is-valid,
  .sf-is-success {
    --sf-field-border-color: var(--sf-color-success);
    --sf-field-text-color:   var(--sf-color-success-strong);
  }

  .sf-is-invalid,
  .sf-is-error {
    --sf-field-border-color: var(--sf-color-danger);
    --sf-field-text-color:   var(--sf-color-danger-strong);
  }

  .sf-is-warning {
    --sf-field-border-color: var(--sf-color-warning);
    --sf-field-text-color:   var(--sf-color-warning-strong);
  }

  .sf-is-info {
    --sf-field-border-color: var(--sf-color-info);
    --sf-field-text-color:   var(--sf-color-info-strong);
  }

  /* -- DRAG & DROP -- */

  .sf-is-dragging {
    opacity: var(--sf-opacity-muted);
    cursor:  grabbing;
  }

  .sf-is-drop-target {
    outline:        var(--sf-focus-ring-width) dashed var(--sf-color-action);
    outline-offset: var(--sf-focus-ring-offset);
  }

  .sf-is-draggable {
    cursor: grab;
  }

  /* -- EMPTY STATE -- */

  .sf-is-empty:empty {
    display: none;
  }

  /* KEYFRAMES (used by states above) */

}

/* ─── core/motion.css ─── */
/* SLASHED — core/motion.css
   @layer slashed.motion
   Global transitions, view transitions, keyframes, and motion helpers.
   Respects prefers-reduced-motion and --sf-motion-scale. */

@layer slashed.motion {

  @media (prefers-reduced-motion: no-preference) {

    html {
      scroll-behavior: smooth;
    }

    a, button, input, select, textarea, summary {
      transition-property:
        color, background-color, border-color, text-decoration-color,
        fill, stroke, opacity, box-shadow, transform, scale, translate,
        filter, backdrop-filter;
      transition-duration:        var(--sf-duration-fast);
      transition-timing-function: var(--sf-ease-out);
    }

    @supports (view-transition-name: none) {
      ::view-transition-old(root),
      ::view-transition-new(root) {
        animation-duration:        var(--sf-duration-normal);
        animation-timing-function: var(--sf-ease-out);
      }
    }

    
    .sf-fade-in        { animation: var(--sf-animation-fade-in); }
    .sf-fade-out       { animation: var(--sf-animation-fade-out); }
    .sf-slide-in-up    { animation: var(--sf-animation-slide-in-up); }
    .sf-slide-in-down  { animation: var(--sf-animation-slide-in-down); }
    .sf-slide-in-left  { animation: var(--sf-animation-slide-in-left); }
    .sf-slide-in-right { animation: var(--sf-animation-slide-in-right); }
    .sf-scale-up       { animation: var(--sf-animation-scale-up); }
    .sf-scale-down     { animation: var(--sf-animation-scale-down); }

    
    /* animation-duration set unconditionally: without it, engines without
       animation-timeline snap to end state at 0s. */
    .sf-entrance--fade,
    .sf-entrance--fade-up,
    .sf-entrance--fade-down,
    .sf-entrance--fade-left,
    .sf-entrance--fade-right,
    .sf-entrance--scale-up {
      animation-duration:        var(--sf-duration-slow);
      animation-timing-function: var(--sf-ease-out);
      animation-fill-mode:       both;
    }
    @supports (animation-timeline: view()) {
      .sf-entrance--fade,
      .sf-entrance--fade-up,
      .sf-entrance--fade-down,
      .sf-entrance--fade-left,
      .sf-entrance--fade-right,
      .sf-entrance--scale-up {
        animation-fill-mode: forwards;
        animation-timeline: view();
        animation-range:    var(--sf-scroll-timeline-range-start, entry 0%)
                            var(--sf-scroll-timeline-range-end,   cover 30%);
      }
    }
    .sf-entrance--fade        { animation-name: sf-fade-in; }
    .sf-entrance--fade-up     { animation-name: sf-slide-in-up; }
    .sf-entrance--fade-down   { animation-name: sf-slide-in-down; }
    .sf-entrance--fade-left   { animation-name: sf-slide-in-left; }
    .sf-entrance--fade-right  { animation-name: sf-slide-in-right; }
    .sf-entrance--scale-up    { animation-name: sf-scale-up; }


    /* Exit counterpart of .sf-entrance--*: fires as the element scrolls
       out of view. Every declaration below lives inside @supports —
       unlike entrance (where a non-scroll fallback still ends visible),
       an unconditional exit animation would leave content permanently
       hidden on engines without animation-timeline: view() support, so
       there is deliberately no fallback declaration outside @supports. */
    @supports (animation-timeline: view()) {
      .sf-exit--fade,
      .sf-exit--fade-up,
      .sf-exit--fade-down,
      .sf-exit--fade-left,
      .sf-exit--fade-right,
      .sf-exit--scale-down {
        animation-duration:        var(--sf-duration-slow);
        animation-timing-function: var(--sf-ease-in);
        animation-fill-mode:       both;
        animation-timeline: view();
        animation-range:    var(--sf-scroll-timeline-range-exit-start, cover 70%)
                            var(--sf-scroll-timeline-range-exit-end,   exit 100%);
      }
      .sf-exit--fade        { animation-name: sf-fade-out; }
      .sf-exit--fade-up     { animation-name: sf-slide-out-up; }
      .sf-exit--fade-down   { animation-name: sf-slide-out-down; }
      .sf-exit--fade-left   { animation-name: sf-slide-out-left; }
      .sf-exit--fade-right  { animation-name: sf-slide-out-right; }
      .sf-exit--scale-down  { animation-name: sf-scale-down; }
    }

    /* Stagger — choreography, not the animation itself. Put .sf-stagger on a
       PARENT; every direct child gets an incrementing animation-delay so a
       time-based entrance (.sf-fade-in / .sf-slide-in-*) plays in sequence.
       Children WITHOUT an animation just carry an inert delay (no-op), so you
       opt in per child with no need to exclude anything. Pairs with time-based
       animations only — the .sf-entrance / .sf-exit families are scroll-driven
       (their rhythm is animation-range, not animation-delay).

       One formula, one knob (--sf-stagger-step); the two paths below only
       differ in how --sf-stagger-i (the child's index) is set. */
    .sf-stagger > * {
      animation-delay: calc(
        var(--sf-stagger-i, 0) * var(--sf-stagger-step, 75ms) * var(--sf-motion-scale, 1)
      );
    }

    /* Modern path: real, unbounded index straight from the DOM position. */
    @supports (animation-delay: calc(sibling-index() * 1ms)) {
      .sf-stagger > * { --sf-stagger-i: calc(sibling-index() - 1); }
    }

    /* Fallback (no sibling-index()): a bounded :nth-child ramp reusing the same
       formula. The default is the plateau value, so the 9th child onward shares
       the last rung's delay instead of growing without limit — 8 rungs cover a
       4-column grid's first two visible rows. Split into @supports not(...) so
       the modern override above wins cleanly without a specificity fight
       (:nth-child would otherwise out-specify the sibling-index rule). */
    @supports not (animation-delay: calc(sibling-index() * 1ms)) {
      .sf-stagger > *              { --sf-stagger-i: 8; }
      .sf-stagger > *:nth-child(1) { --sf-stagger-i: 0; }
      .sf-stagger > *:nth-child(2) { --sf-stagger-i: 1; }
      .sf-stagger > *:nth-child(3) { --sf-stagger-i: 2; }
      .sf-stagger > *:nth-child(4) { --sf-stagger-i: 3; }
      .sf-stagger > *:nth-child(5) { --sf-stagger-i: 4; }
      .sf-stagger > *:nth-child(6) { --sf-stagger-i: 5; }
      .sf-stagger > *:nth-child(7) { --sf-stagger-i: 6; }
      .sf-stagger > *:nth-child(8) { --sf-stagger-i: 7; }
    }

  }

  @keyframes sf-fade-in   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sf-fade-out  { from { opacity: 1; } to { opacity: 0; } }
  @keyframes sf-slide-in-up    { from { opacity: 0; translate: 0 1rem;  } to { opacity: 1; translate: 0 0; } }
  @keyframes sf-slide-in-down  { from { opacity: 0; translate: 0 -1rem; } to { opacity: 1; translate: 0 0; } }
  @keyframes sf-slide-in-left  { from { opacity: 0; translate: 1rem 0;  } to { opacity: 1; translate: 0 0; } }
  @keyframes sf-slide-in-right { from { opacity: 0; translate: -1rem 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes sf-scale-up   { from { opacity: 0; scale: 0.92; } to { opacity: 1; scale: 1; } }
  @keyframes sf-scale-down { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 0.92; } }

  @keyframes sf-slide-out-up    { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -1rem; } }
  @keyframes sf-slide-out-down  { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 1rem;  } }
  @keyframes sf-slide-out-left  { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: -1rem 0; } }
  @keyframes sf-slide-out-right { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 1rem 0;  } }

  @keyframes sf-spin    { to { rotate: 360deg; } }
  @keyframes sf-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

  @keyframes sf-ping  { 75%, 100% { scale: 2; opacity: 0; } }
  @keyframes sf-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
  @keyframes sf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.5rem; } }

  
  @supports (@property --x { syntax: "<color>"; inherits: false; initial-value: white; }) {
    @keyframes sf-color-pulse {
      0%   { --sf-color-primary-source-light: var(--sf-color-primary-source-light); }
      50%  { --sf-color-primary-source-light: oklch(from var(--sf-color-primary-source-light) clamp(0, calc(l + 0.25), 0.9) c h); }
      100% { --sf-color-primary-source-light: var(--sf-color-primary-source-light); }
    }

    @media (prefers-reduced-motion: no-preference) {
      .sf-color-pulse {
        animation: var(--sf-animation-color-pulse);
      }
    }
  }

  @supports (transition-behavior: allow-discrete) {
    dialog, [popover] {
      transition: var(--sf-transition-overlay);
    }
  }

}

/* ─── core/accessibility.css ─── */
/* SLASHED — core/accessibility.css
   @layer slashed.accessibility
   Focus rings, screen-reader helpers, skip links, and reduced-friction a11y utilities.
   Prefix: .sf-* plus native focus selectors. */

@layer slashed.accessibility {

  /* Focus */
  :focus:not(:focus-visible) {
    outline: none;
  }

  :focus-visible {
    outline:        var(--sf-focus-ring-width) var(--sf-focus-ring-style, solid) var(--sf-focus-ring-color) !important;
    outline-offset: var(--sf-focus-ring-offset) !important;
  }

  /* .sf-focus-shadow: replaces outline ring with box-shadow ring; !important required
     to take over the hardened :focus-visible outline (WCAG 2.4.7 still met). */
  .sf-focus-shadow:focus-visible {
    outline:    none                         !important;
    box-shadow: var(--sf-focus-ring-shadow)  !important;
  }

  /* forced-colors: box-shadow vanishes — restore outline ring for WCAG 2.4.7
     in Windows High Contrast. */
  @media (forced-colors: active) {
    .sf-focus-shadow:focus-visible {
      outline:        var(--sf-focus-ring-width) solid !important;
      outline-offset: var(--sf-focus-ring-offset) !important;
      box-shadow:     none !important;
    }
  }

  /* Reduced motion. Token override helps components that read */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --sf-duration-instant: 0.01ms;
      --sf-duration-fast:    0.01ms;
      --sf-duration-normal:  0.01ms;
      --sf-duration-slow:    0.01ms;
      --sf-duration-slower:  0.01ms;
    }

    *,
    *::before,
    *::after {
      animation-duration:        0.01ms !important;
      animation-iteration-count: 1      !important;
      transition-duration:       0.01ms !important;
      scroll-behavior:           auto   !important;
    }
  }

  .no-motion,
  .no-motion *,
  .no-motion *::before,
  .no-motion *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  /* High contrast */
  @media (prefers-contrast: more) {
    :root {
      --sf-focus-ring-width: 3px;

      --sf-contrast-bias: 0.06;
    }

    hr {
      border-block-start-width: var(--sf-border-width-2);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    ::backdrop {
      background-color: var(--sf-color-neutral);
      opacity:          1;
    }
  }

  /* Reduced data */
  @media (prefers-reduced-data: reduce) {
    :root {
      --sf-shadow-strength: 0;
      --sf-blur: 0px;
    }
  }

  /* Minimum touch targets — a backstop for genuinely bare, unstyled controls.
     The floor targets only controls that carry NO class at all. The moment a
     control has any class it is considered *owned* — by SLASHED itself (.sf-btn
     owns a deliberate XS–XL size ladder via --sf-btn-min-height / --sf-size-*
     rungs), by the author, or by a third-party widget (a page-builder hamburger
     toggle, a plugin control) — and its sizing belongs to whoever put that class
     there, not to this blanket rule.

     Why so conservative: a blanket floor on *every* button/control silently
     overrode its owners. It collapsed .sf-btn's whole size ladder to one height
     on touch, and it stretched narrow custom widgets (e.g. a hamburger icon
     button) to 44px on BOTH axes — at a specificity higher than a single class,
     so the owner couldn't even override it without !important. Element-level
     selectors that reach for someone else's markup are the "too aggressive base
     style" trap; scoping the floor to classless controls keeps it from ever
     touching markup the framework doesn't own. It extends the "un-styled
     element" idiom already used for `a:not([class])` in base.

     "Un-styled" here means *no effective class* — no class attribute at all, OR
     an empty one (`class=""`), which templating/component renderers routinely
     emit for a control the author never styled. Both keep the floor. The test
     is written `:not([class]:not([class=""]))` — read it as "not (has a
     non-empty class)": it excludes only controls carrying a real class token.
     (A whitespace-only `class=" "` is treated as owned; that pathological case
     isn't worth widening the selector for.) `:where()` keeps the element list
     at zero specificity so the whole rule stays a low, easily-reasoned weight.

     Bare `<button>text</button>` and un-classed native controls — almost always
     the author's own quick markup — keep the WCAG 2.5.5 44px floor on both axes.
     To opt a control OUT, give it any class. To put the floor back ON an owned
     control, add the .sf-touch-target opt-in class below, set its own
     min-block/inline-size, or on .sf-btn use
     `--sf-btn-min-height: var(--sf-touch-target)`. */
  @media (pointer: coarse) {
    :where(
      button,
      input[type="button"], input[type="submit"], input[type="reset"],
      select, summary,
      input[type="checkbox"], input[type="radio"]
    ):not([class]:not([class=""])) {
      min-block-size:  var(--sf-touch-target);
      min-inline-size: var(--sf-touch-target);
    }
  }

  /* .sf-touch-target — the explicit opt-IN counterpart to the class-less floor
     above. Because the automatic floor deliberately never touches a control
     that carries a class, put this class on any control you own (a button with
     your own class, a third-party widget you can add a class to) to guarantee
     the WCAG 2.5.5 44px minimum hit area on both axes. Unlike the automatic
     floor it is NOT gated to a coarse pointer — an explicit opt-in is
     predictable everywhere. Size follows --sf-touch-target, so a wrapper (or
     the element itself) can retune it locally.

       <button class="my-menu-toggle sf-touch-target" aria-label="Menu">…</button>

     It sets ONLY the two min-size properties — deliberately no `display` — so it
     never strips a native affordance (e.g. a <summary>'s list-item marker, a
     control's baseline alignment). It therefore expects a target whose display
     already honours min-inline-size: buttons and native form controls
     (inline-block/flex) do. On a purely inline element (a bare <a>) add your own
     `display: inline-flex` (or inline-block) alongside it.

     No !important: it's a single class (specificity 0,1,0), so your own
     component rule can still override it when a specific control needs to opt
     back out. */
  .sf-touch-target {
    min-block-size:  var(--sf-touch-target);
    min-inline-size: var(--sf-touch-target);
  }

  /* Disabled states */
  [disabled],
  [aria-disabled="true"] {
    cursor:  not-allowed;
    opacity: var(--sf-opacity-disabled);
  }

  /* Screen-reader-only. Atomic contract: partial override either exposes hidden content
     or hides intended content — all-or-nothing, whole set hardened. */
  .sr-only,
  .sr-only-focusable:not(:focus, :focus-within) {
    position:    absolute            !important;
    width:       1px                 !important;
    height:      1px                 !important;
    padding:     0                   !important;
    margin:      -1px                !important;
    overflow:    hidden              !important;
    overflow:    clip                !important;
    clip-path:   inset(50%)          !important;
    white-space: nowrap              !important;
    border:      0                   !important;
  }

  /* Skip link */
  .skip-link {
    position:          absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--sf-space-m);
    z-index:           var(--sf-z-tooltip);
    padding:           var(--sf-space-s) var(--sf-space-m);
    background:        var(--sf-color-bg);
    color:             var(--sf-color-text);
    border:            var(--sf-border-width-1) solid var(--sf-color-border);
    border-radius:     var(--sf-radius-m);
    transition:        inset-block-start var(--sf-duration-fast) var(--sf-ease-out);
  }
  .skip-link:focus {
    inset-block-start: var(--sf-space-m);
  }

  /* Focus-parent */

  .sf-focus-parent:focus-within {
    outline:        var(--sf-focus-ring-width) var(--sf-focus-ring-style, solid) var(--sf-focus-ring-color);
    outline-offset: var(--sf-focus-ring-offset);
  }

  /* Clickable-parent */
  /* Perf note (SL-002): the two selector groups below each combine multiple
     :has()-bearing branches, forcing subtree re-evaluation on DOM mutation
     inside .sf-clickable-parent. Fine for typical card/list-item usage; avoid
     applying this class to large (100+ node) grids or lists without profiling
     first. */
  .sf-clickable-parent {
    --sf-clickable-overlay-z: 1;
    position: relative;
    cursor:   pointer;
  }

  .sf-clickable-parent:not(:has([data-overlay-link], .sf-clickable-parent__overlay)) a:where(:any-link)::after,
  .sf-clickable-parent [data-overlay-link]::after,
  .sf-clickable-parent .sf-clickable-parent__overlay::after {
    content:        "";
    position:       absolute;
    inset:          0;
    z-index:        var(--sf-clickable-overlay-z);
    pointer-events: auto;
  }

  .sf-clickable-parent :is(
    button, input, textarea, select,
    summary, video, audio,
    [role="button"], [data-no-overlay]
  ),
  .sf-clickable-parent:has([data-overlay-link]) a:where(:any-link):not([data-overlay-link]),
  .sf-clickable-parent:has(.sf-clickable-parent__overlay) a:where(:any-link):not(.sf-clickable-parent__overlay),
  .sf-clickable-parent:not(:has([data-overlay-link], .sf-clickable-parent__overlay)) a:where(:any-link):not(:first-of-type) {
    position: relative;
    z-index:  calc(var(--sf-clickable-overlay-z) + 1);
  }

  .sf-clickable-parent:focus-within {
    outline:        var(--sf-focus-ring-width) var(--sf-focus-ring-style, solid) var(--sf-focus-ring-color);
    outline-offset: var(--sf-focus-ring-offset);
  }

  /* Forced colors (Windows High Contrast). Outline-based focus */
  @media (forced-colors: active) {
    :root {
      --sf-focus-ring-color: Highlight;
    }

    :focus-visible {
      outline-color: Highlight !important;
    }

    :where(*) {
      box-shadow:  none;
      text-shadow: none;
    }

    input,
    select,
    textarea {
      border: var(--sf-border-width-1) solid;
    }

    button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"] {
      border-color: ButtonBorder !important;
    }

    .sf-text-gradient {
      background-image:         none !important;
      /* stylelint-disable-next-line property-no-vendor-prefix */
      -webkit-background-clip:  unset !important;
      background-clip:          unset !important;
      color:                    CanvasText !important;
    }

    .sf-is-loading::after {
      border-color:             ButtonText !important;
      border-block-start-color: Highlight !important;
    }
  }

}

/* ─── core/print.css ─── */
/* SLASHED — core/print.css
   @layer slashed.print
   Print-only visibility, page defaults, ink-saving resets, and URL disclosure.
   Prefix: .print-* for explicit print helpers. */

@layer slashed.print {

  
  .print-only {
    display: none;
  }

  @media print {

    /* --sf-print-page-size / -margin are read here so a :root override retunes
       the printed page box. Each fallback equals the historical literal, so the
       default print render is unchanged. Verified in Chromium that var() is
       substituted inside @page descriptors; engines lacking general custom-
       property substitution in @page fall back to the literal. */
    @page {

      size:   var(--sf-print-page-size, a4) portrait;
      margin: var(--sf-print-page-margin, 2cm);
    }

    body {
      font-size: var(--sf-print-base-size, 11pt);
    }

    *,
    *::before,
    *::after {
      box-shadow:  none;
      text-shadow: none;
    }

    a[href]:not([href^="#"], [href^="javascript:" i], [href^="mailto:" i], [href^="tel:" i], .sf-link-external)::after {
      content:    " (" attr(href) ")";
      font-size:  90%;
      word-break: break-all;
    }

    abbr[title]::after {
      content: " (" attr(title) ")";
    }

    img, svg, canvas, figure, table, pre, blockquote {
      break-inside: avoid;

    }

    thead {
      display: table-header-group;
    }

    tr {
      break-inside: avoid;
    }

    h1, h2, h3, h4, h5, h6 {
      break-after: avoid;

    }

    /* Fluid --sf-h*-size tokens resolve via 100vw clamp()s, which have no
       reliable meaning on a print page box. Pin print heading sizes to
       static pt values instead. */
    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }
    h4 { font-size: 14pt; }
    h5 { font-size: 12pt; }
    h6 { font-size: 11pt; }

    p {
      orphans: 3;
      widows:  3;
    }

    pre, blockquote {
      border:  var(--sf-border-width-1) solid var(--sf-color-border--strong);
      padding: var(--sf-space-s);
    }

    nav, aside, button, input, select, textarea,
    audio, video, dialog, [popover], .no-print {
      display: none !important;
    }

    .print-only {
      display: revert !important;
    }

    details { display: block; }
    details > summary { display: none !important; }
    details > :not(summary) { display: block; }

    
    .print-color-exact,
    .print-color-exact * {
      print-color-adjust:         exact !important;
      -webkit-print-color-adjust: exact !important;
    }

    .print-no-color,
    .print-no-color *,
    .print-no-color *::before,
    .print-no-color *::after {
      background:  transparent !important;
      color:       CanvasText  !important;
    }

  }

}

/* ─── optional/forms.css ─── */
/* SLASHED — optional/forms.css
   @layer slashed.forms
   Classless form controls: text inputs, selects, textareas, checks/radios, fieldsets, labels.
   Values resolve through core and optional component tokens. */

@layer slashed.forms {

  /* Shared base for text-like inputs, select, textarea */

  input:where(
    [type="text"], [type="email"], [type="password"], [type="url"],
    [type="tel"], [type="number"], [type="search"], [type="date"],
    [type="datetime-local"], [type="month"], [type="week"],
    [type="time"], :not([type])
  ),
  select,
  textarea {

    appearance: none;

    display: block;
    inline-size: 100%;
    /* Field metrics resolve through the component-tier field knobs first, then
       the core rhythm knob, then the literal — so overriding any of them retunes
       fields without touching global spacing/radius. Every fallback equals the
       shipped default, so the default render is unchanged. --sf-field-padding-*
       and --sf-field-radius live in optional/tokens.components.css (present in
       the -components/full bundles); --sf-field-block is the core-tier fallback
       so the knob still works in the forms-only bundles. */
    padding-block: var(--sf-field-padding-block, var(--sf-field-block, var(--sf-space-xs)));
    padding-inline: var(--sf-field-padding-inline, var(--sf-space-s));
    font-size: var(--sf-text-m);
    line-height: var(--sf-leading-normal);
    color: var(--sf-color-text);
    background-color: var(--sf-color-surface);
    border: var(--sf-border-width-1) solid var(--sf-field-border-color, var(--sf-color-border));
    border-radius: var(--sf-field-radius, var(--sf-radius-m));
    transition: var(--sf-transition-form-field);
  }

  /* Focus */
  input:where(
    [type="text"], [type="email"], [type="password"], [type="url"],
    [type="tel"], [type="number"], [type="search"], [type="date"],
    [type="datetime-local"], [type="month"], [type="week"],
    [type="time"], :not([type])
  ):focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    border-color: var(--sf-color-border--focus);
    outline: var(--sf-focus-ring-width) var(--sf-focus-ring-style, solid) var(--sf-color-border--focus);
    outline-offset: var(--sf-focus-ring-offset);
  }

  /* Disabled */
  input:disabled,
  select:disabled,
  textarea:disabled {
    background-color: var(--sf-color-bg--disabled);
    color: var(--sf-color-text--disabled);
    opacity: var(--sf-opacity-disabled);
    cursor: not-allowed;
  }

  /* Placeholder */
  input::placeholder,
  textarea::placeholder {
    color: var(--sf-color-text--placeholder);
    opacity: 1;
  }

  /* Autofill: strips Safari's own dark-mode autofill background; Chromium/Firefox honour
     the CSS background without this, but WebKit doesn't. */
  /* stylelint-disable selector-pseudo-class-no-unknown */
  input:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px var(--sf-color-surface);
    -webkit-text-fill-color: var(--sf-color-text);
    caret-color: var(--sf-color-text);
    border-color: var(--sf-field-border-color, var(--sf-color-border));
  }
  input:autofill {
    box-shadow: inset 0 0 0 1000px var(--sf-color-surface);
    -webkit-text-fill-color: var(--sf-color-text);
    caret-color: var(--sf-color-text);
    border-color: var(--sf-field-border-color, var(--sf-color-border));
  }
  /* stylelint-enable selector-pseudo-class-no-unknown */

  /* Opt-in native validation feedback. Unconditional :user-invalid/:user-valid
     styling was removed in 0.8.0 (see docs/migration.md): it fires on simple
     focus+blur, so a still-empty required field could be marked invalid mid
     multi-field form-fill, before any submit was attempted — the pattern
     Bootstrap's own .was-validated gate exists to avoid. .sf-live-validate is
     that same gate: put it on a <form> or <fieldset> to scope the pivot to
     that subtree, so it only lights up on a real submit attempt (or explicit
     interaction) instead of applying everywhere by default.

     Safe to combine with manual validation: .sf-is-invalid/.sf-is-valid
     (core/states.css, @layer slashed.states) always win over the rules below
     regardless of selector specificity, because slashed.states is declared
     AFTER slashed.forms in the layer order (core/layers.css) — cascade layer
     order beats specificity. A field you've manually marked .sf-is-invalid
     (e.g. a server-side error) can't be silently un-coloured by these rules
     even if the browser considers it natively valid. */
  .sf-live-validate input:user-invalid,
  .sf-live-validate select:user-invalid,
  .sf-live-validate textarea:user-invalid {
    --sf-field-border-color: var(--sf-color-danger);
  }

  .sf-live-validate input:user-valid,
  .sf-live-validate select:user-valid,
  .sf-live-validate textarea:user-valid {
    --sf-field-border-color: var(--sf-color-success);
  }

  /* Numeric inputs */
  input[type="number"] {
    font-variant-numeric: var(--sf-font-numeric, tabular-nums);
  }

  /* Textarea specifics */
  textarea {
    min-block-size: 6rem;
    resize:         vertical;
  }

  @supports (field-sizing: content) {
    textarea {
      field-sizing: content;
    }
  }

  /* Select: chevron uses FieldText system color — custom properties don't propagate
     into data-URI SVG backgrounds. */
  select {
    padding-inline-end: calc(var(--sf-space-s) + 1.5em);
  }

  select:not([multiple], [size]) {
    background-repeat: no-repeat;
    background-position: right var(--sf-space-s) center;
    background-size: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='FieldText' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  }

  :dir(rtl) select:not([multiple], [size]) {
    background-position: left var(--sf-space-s) center;
  }

  /* Button / submit / reset. Scoped to :where(form, fieldset) so a bare
     <button> or <input type="submit"/"reset"/"button"> used elsewhere on
     the page (a page-builder's hamburger toggle, a modal close control, a
     third-party widget) is left alone — only controls living inside an
     actual form get the classless treatment. */
  :where(form, fieldset) button:not([class*="sf-"]),
  :where(form, fieldset) input[type="submit"]:not([class*="sf-"]),
  :where(form, fieldset) input[type="reset"]:not([class*="sf-"]),
  :where(form, fieldset) input[type="button"]:not([class*="sf-"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-xs);
    padding-block: var(--sf-space-xs);
    padding-inline: var(--sf-space-m);
    font-size: var(--sf-text-m);
    font-weight: var(--sf-font-weight-heading);
    line-height: var(--sf-leading-normal);
    color: var(--sf-color-text--on-action);
    background-color: var(--sf-color-action);
    border: var(--sf-border-width-1) solid transparent;
    border-radius: var(--sf-radius-m);
    cursor: pointer;
    transition: var(--sf-transition-colors);
    text-decoration: none;
  }

  :where(form, fieldset) button:not([class*="sf-"]):hover,
  :where(form, fieldset) input[type="submit"]:not([class*="sf-"]):hover,
  :where(form, fieldset) input[type="reset"]:not([class*="sf-"]):hover,
  :where(form, fieldset) input[type="button"]:not([class*="sf-"]):hover {

    background-color: var(--sf-color-action--hover, var(--sf-color-action));
  }

  :where(form, fieldset) button:not([class*="sf-"]):focus-visible,
  :where(form, fieldset) input[type="submit"]:not([class*="sf-"]):focus-visible,
  :where(form, fieldset) input[type="reset"]:not([class*="sf-"]):focus-visible,
  :where(form, fieldset) input[type="button"]:not([class*="sf-"]):focus-visible {
    outline: var(--sf-focus-ring-width) var(--sf-focus-ring-style, solid) var(--sf-color-border--focus);
    outline-offset: var(--sf-focus-ring-offset);
  }

  :where(form, fieldset) button:not([class*="sf-"]):disabled,
  :where(form, fieldset) input[type="submit"]:not([class*="sf-"]):disabled,
  :where(form, fieldset) input[type="reset"]:not([class*="sf-"]):disabled,
  :where(form, fieldset) input[type="button"]:not([class*="sf-"]):disabled {
    opacity: var(--sf-opacity-disabled);
    cursor:  not-allowed;

  }

  /* Checkbox & radio */
  input[type="checkbox"],
  input[type="radio"] {
    inline-size:    1.125em;
    block-size:     1.125em;
    accent-color:   var(--sf-color-action);
    cursor:         pointer;
    vertical-align: middle;
  }

  /* File input */
  input[type="file"] {
    cursor: pointer;
  }
  input[type="file"]::file-selector-button {
    appearance: none;
    margin-inline-end: var(--sf-space-s);
    padding-block: var(--sf-space-xs);
    padding-inline: var(--sf-space-m);
    font-weight: var(--sf-font-weight-heading);
    color: var(--sf-color-text--on-action);
    background-color: var(--sf-color-action);
    border: var(--sf-border-width-1) solid transparent;
    border-radius: var(--sf-radius-m);
    cursor: pointer;
    transition: var(--sf-transition-colors);
  }
  input[type="file"]::file-selector-button:hover {
    background-color: var(--sf-color-action--hover, var(--sf-color-action));
  }

  /* Range */
  input[type="range"] {
    appearance: none;
    inline-size: 100%;
    background: transparent;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    block-size: var(--sf-border-width-3, 0.25rem);
    background-color: var(--sf-color-border);
    border-radius: var(--sf-radius-full);
  }
  input[type="range"]::-moz-range-track {
    block-size: var(--sf-border-width-3, 0.25rem);
    background-color: var(--sf-color-border);
    border-radius: var(--sf-radius-full);
  }
  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    inline-size: 1em;
    block-size: 1em;
    margin-block-start: calc((var(--sf-border-width-3, 0.25rem) - 1em) / 2);
    background-color: var(--sf-color-action);
    border-radius: var(--sf-radius-full);
  }
  input[type="range"]::-moz-range-thumb {
    inline-size: 1em;
    block-size: 1em;
    background-color: var(--sf-color-action);
    border: none;
    border-radius: var(--sf-radius-full);
  }
  input[type="range"]:focus-visible {
    outline: var(--sf-focus-ring-width) var(--sf-focus-ring-style, solid) var(--sf-color-border--focus);
    outline-offset: var(--sf-focus-ring-offset);
  }

  /* Fieldset & legend */
  fieldset {
    border: var(--sf-border-width-1) solid var(--sf-color-border--subtle);
    border-radius: var(--sf-radius-m);
    padding: var(--sf-space-m);
  }

  legend {
    font-weight: var(--sf-font-weight-heading);
    padding-inline: var(--sf-space-xs);
  }

  /* Label */
  label {
    display: block;
    font-weight: var(--sf-font-weight-heading);
    margin-block-end: var(--sf-space-xs);
    color: var(--sf-field-text-color, inherit);
  }

  label:has(:required)::after,
  label:has(+ :required)::after,
  label:has(+ * :required)::after {
    content: var(--sf-field-required-marker, " *");
    color: var(--sf-color-danger);
  }

}