/* Hairlines, not shadows. Radius is effectively zero: this system is square.
   Elevation is expressed with a hard 1px rule or a flat offset block, never a blur. */
:root {
  --kx-hairline: 1px;
  --kx-rule-thick: 2px;
  --kx-rule-heavy: 4px;
  /* --kx-border, --kx-border-soft, --kx-border-mid and --kx-offset-block are NOT declared
     here. They are composites containing var(), and a custom property's var() references are
     substituted at the element where the property is DECLARED — the result then inherits as a
     plain literal. Declared once under :root they bake the LIGHT --kx-rule (ink), and no
     nested scope can override them. They now live in tokens/colors.css, redeclared inside
     each theme and ground scope. Any future composite referencing a theme-dependent token
     belongs there too; --kx-focus-ring stays here only because --kx-focus is the accent in
     both themes.

     MEASURED IN THIS APP before the move, 2026-09-17: inside Home §03 (a Section with
     tone="invert", which re-scopes data-kx-theme on the section) --kx-rule correctly
     re-pointed to paper #FAFAF8 while --kx-border still resolved "1px solid #0A0A0A" —
     the light value, inherited as a literal from :root. Ink on an ink ground is 1.00:1.
     Nothing in that band painted a --kx-border at the time, so it was invisible-in-waiting
     rather than visibly broken; any Card, Alert, Field or outline Button placed in an
     inverted section would have drawn a border nobody could see. Do not move them back. */

  --kx-radius-0: 0px;
  --kx-radius-pill: 999px; /* tags only */

  --kx-focus-width: 2px;
  --kx-focus-offset: 2px;
  --kx-focus-ring: var(--kx-focus-width) solid var(--kx-focus);

  /* flat offset "shadow" - a solid block, no blur.
     --kx-offset-block is theme-dependent and lives in colors.css; the accent one is safe here
     because the accent is constant across themes. */
  --kx-offset-block-accent: 6px 6px 0 0 var(--kx-accent);
  --kx-shadow-none: none;
}