/* ── surfaces, borders, depth ───────────────────────────────────────────────
   There is no card shadow in this system. Grouping is done with a hairline and
   with space; a surface change is a fill change. One shadow exists, for things
   that genuinely float above the page (menu, dialog), and it is neutral-cool.  */
:root {
  --shadow-none: none;
  --shadow-float: 0 16px 40px -20px rgba(20, 23, 26, 0.34), 0 1px 0 0 var(--rule);

  --hairline: var(--border-w) solid var(--border-hairline); /* @kind other */
  --hairline-strong: var(--border-w-strong) solid var(--border-strong); /* @kind other */
  --hairline-ink: var(--border-w) solid var(--border-on-ink); /* @kind other */

  --focus-w: 2px; /* @kind other */
  --focus-offset: 2px; /* @kind other */

  /* interaction deltas: hover darkens the ink, never lightens it; press flattens
     the fill instead of scaling the element. No transforms on text. */
  --hover-ink: #000306;
  --hover-tint: rgba(20, 23, 26, 0.06);
  --press-tint: rgba(20, 23, 26, 0.12);
  --hover-tint-on-ink: rgba(241, 242, 240, 0.09);
  --press-tint-on-ink: rgba(241, 242, 240, 0.16);
}