:root {
  --b-hairline: 1px solid var(--c-hairline);
  --b-hairline-width: 1px;
  /* Composed with --pillar-fill for convenience; these bake in the value at their
     declaration site, so pillar-themed edges use the -width tokens + --pillar-fill
     directly (see css/components.css). Both are re-declared per pillar scope in
     tokens/colors.css so var(--b-rule) is correct inside a scope too. */
  --b-rule: 2px solid var(--pillar-fill);
  --b-rule-width: 2px;
  --b-rule-ink: 2px solid var(--c-ink);
  --b-band: 8px solid var(--pillar-fill);
  --b-band-width: 8px;

  --r-none: 0; /* @kind radius */      /* default everywhere */
  --r-control: 10px; /* buttons and cards — enough to read as rounded */
  --r-chip: 2px;    /* chips only */
  --r-round: 50%;   /* radio only */

  --e-flat: none; /* @kind shadow */   /* default */
  --e-float: 0 8px 24px rgba(30, 33, 64, 0.18);  /* modal & toast only */

  --focus-ring: 3px solid var(--c-ink);
  --focus-offset: 2px;
}