Unify border-radius behavior (#26770)

## Changes
- no more hardcoded `border-radius`es (apart from `0`)
- no more value inconsistencies
- no more guessing what pixel value you should use
- two new variables:
- `--border-radius-medium` (for elements where the normal border radius
does not suffice)
  - `--border-radius-circle` (for displaying circles)

---------

Co-authored-by: silverwind <me@silverwind.io>

web_src/css/modules/animations.css

@@ -26,7 +26,7 @@
   border-width: 4px;
   border-style: solid;
   border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
-  border-radius: 100%;
+  border-radius: var(--border-radius-circle);
 }
 
 .is-loading.small-loading-icon::after {

web_src/css/modules/navbar.css

@@ -134,7 +134,7 @@
   top: -9px;
   min-width: 17px;
   min-height: 17px;
-  border-radius: 17px;
+  border-radius: var(--border-radius-circle);
   display: flex;
   align-items: center;
   justify-content: center;

web_src/css/modules/toast.css

@@ -4,7 +4,7 @@
   opacity: 0;
   transition: all .2s ease;
   z-index: 500;
-  border-radius: 4px;
+  border-radius: var(--border-radius);
   box-shadow: 0 8px 24px var(--color-shadow);
   display: flex;
   max-width: 50vw;
@@ -25,7 +25,7 @@
 .toast-close,
 .toast-icon {
   color: currentcolor;
-  border-radius: 3px;
+  border-radius: var(--border-radius);
   background: transparent;
   border: none;
   display: inline-block;