:root{
  /* Hairlines do the work; shadow is reserved for things that float.
     Brandbook: "evitar sombras pesadas". */
  --border-hairline:1px solid var(--n-200);
  --border-strong:1px solid var(--n-300);
  --border-inverse:1px solid rgba(248,248,248,.14); /* @kind other */

  --shadow-none:none;
  --shadow-xs:0 1px 1px rgba(23,23,24,.04);
  --shadow-sm:0 1px 2px rgba(23,23,24,.06),0 1px 3px -1px rgba(23,23,24,.05);
  --shadow-md:0 2px 6px -2px rgba(23,23,24,.08),0 10px 24px -12px rgba(23,23,24,.18);
  --shadow-lg:0 4px 10px -4px rgba(23,23,24,.10),0 28px 60px -24px rgba(23,23,24,.26);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.5);

  --focus-ring-w:2px; /* @kind spacing */
  --focus-ring-offset:2px; /* @kind spacing */
  --focus-ring-color:var(--n-900);
  --focus-ring-color-inverse:var(--fos-white);
  --focus-ring:var(--focus-ring-w) solid var(--focus-ring-color);

  --overlay-scrim:rgba(15,15,16,.56);
  --overlay-blur:blur(2px); /* @kind other */
}