imp: Rebalance the global font sizes and borders width

assets/stylesheets/application.css

@@ -3,9 +3,10 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 
 @import "./_reset.css";
-@import "./_colors.dark.css";
-@import "./_colors.light.css";
 @import "./_fonts.css";
+@import "./variables/colors.dark.css";
+@import "./variables/colors.light.css";
+@import "./variables/sizes.css";
 @import "./utils/flow.css";
 @import "./utils/grids.css";
 @import "./utils/indent.css";
@@ -70,27 +71,21 @@ body {
     background: var(--color-grey2);
 }
 
-@media (min-width: 800px) {
-    body {
-        font-size: 225%;
-    }
-}
-
 *:focus {
-    outline: 0.3rem solid var(--color-primary9);
+    outline: var(--width-outline) solid var(--color-primary9);
 }
 
 h1 {
-    font-size: 1.3em;
+    font-size: var(--font-size-bigger);
     text-align: center;
 }
 
 h2 {
-    font-size: 1.1em;
+    font-size: var(--font-size-big);
 }
 
 h3 {
-    font-size: 0.9em;
+    font-size: var(--font-size-normal);
 }
 
 summary {

assets/stylesheets/components/alerts.css

@@ -9,7 +9,7 @@
     background-repeat: no-repeat;
     background-position: left 1rem top 1.5rem;
     background-size: 3rem;
-    border-width: 0.25rem;
+    border-width: var(--width-border-bold);
     border-style: solid;
     border-radius: 0.5rem;
 }

assets/stylesheets/components/anchors.css

@@ -18,7 +18,7 @@ a {
     text-decoration: none;
 
     background-color: var(--color-primary3);
-    border: 0.25rem solid currentcolor;
+    border: var(--width-border) solid currentcolor;
     border-radius: 0.5rem;
 
     transition: background-color 0.2s ease-in-out;

assets/stylesheets/components/badges.css

@@ -24,13 +24,13 @@
 .badge--smaller {
     padding: 0.25rem 0.5rem;
 
-    font-size: 0.8em;
+    font-size: var(--font-size-smaller);
 }
 
 .badge--small {
     padding: 0.25rem 0.75rem;
 
-    font-size: 0.9em;
+    font-size: var(--font-size-small);
 }
 
 .badge--blue {

assets/stylesheets/components/buttons.css

@@ -9,13 +9,13 @@ button,
 
     color: var(--color-grey12);
     font-family: inherit;
-    font-size: 1em;
+    font-size: var(--font-size-normal);
     line-height: 1.5;
 
     background-color: var(--color-grey3);
     background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 5%));
     box-shadow: 0 1px 2px var(--color-box-shadow);
-    border: 0.25rem solid var(--color-grey8);
+    border: var(--width-border) solid var(--color-grey8);
     border-radius: 0.75rem;
 
     transition:
@@ -106,8 +106,6 @@ button[disabled],
 
 .button--discreet {
     padding: 0.25rem 1.25rem;
-
-    border-width: 1px;
 }
 
 .button--caret {
@@ -151,7 +149,7 @@ button[disabled],
     margin-bottom: -0.7rem;
 
     color: var(--color-grey11);
-    font-size: 0.75em;
+    font-size: var(--font-size-small);
 }
 
 .button-group {

assets/stylesheets/components/cards.css

@@ -44,7 +44,7 @@
 .card__title {
     display: block;
 
-    font-size: 1.1em;
+    font-size: var(--font-size-big);
     font-weight: bold;
     text-align: center;
     overflow-wrap: anywhere;
@@ -55,7 +55,7 @@
 a.card__title {
     text-decoration: none;
 
-    outline-offset: -0.3rem;
+    outline-offset: calc(-1 * var(--width-outline));
 }
 
 .card__body {

assets/stylesheets/components/documents.css

@@ -3,7 +3,7 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 
 .documents__item {
-    font-size: 0.8em;
+    font-size: var(--font-size-small);
 
     background-color: var(--color-grey3);
     border-radius: 0.5rem;

assets/stylesheets/components/forms.css

@@ -20,12 +20,12 @@ textarea {
 
     color: inherit;
     font-family: inherit;
-    font-size: 1em;
+    font-size: var(--font-size-normal);
     line-height: 1.5;
 
     background-color: var(--color-grey1);
     box-shadow: 2px 2px 3px var(--color-box-shadow) inset;
-    border: 0.25rem solid var(--color-grey8);
+    border: var(--width-border-input) solid var(--color-grey8);
     border-radius: 0.5rem;
 
     transition:
@@ -100,7 +100,7 @@ input[type="radio"] + label::before {
 
     background-color: var(--color-grey1);
     box-shadow: 2px 2px 3px var(--color-box-shadow) inset;
-    border: 0.25rem solid var(--color-grey8);
+    border: var(--width-border-input) solid var(--color-grey8);
     border-radius: 0.5rem;
 
     transition:
@@ -113,7 +113,7 @@ input[type="radio"] + label::before {
 }
 
 input[type="checkbox"]:focus + label::before {
-    outline: 0.3rem solid var(--color-primary9);
+    outline: var(--width-outline) solid var(--color-primary9);
 }
 
 input[type="checkbox"]:checked + label::before,
@@ -140,8 +140,8 @@ input[type="radio"]:checked + label::after {
     height: 0.75rem;
     margin-top: -0.3rem;
 
-    border-bottom: 0.25rem solid var(--color-grey12);
-    border-left: 0.25rem solid var(--color-grey12);
+    border-bottom: var(--width-border-bold) solid var(--color-grey12);
+    border-left: var(--width-border-bold) solid var(--color-grey12);
 
     transform: rotate(-45deg);
 }
@@ -151,8 +151,8 @@ input[type="radio"]:checked + label::after {
     margin-top: 0;
 
     background-color: var(--color-grey12);
-    border-top: 0.25rem solid var(--color-grey12);
-    border-right: 0.25rem solid var(--color-grey12);
+    border-top: var(--width-border-bold) solid var(--color-grey12);
+    border-right: var(--width-border-bold) solid var(--color-grey12);
     border-radius: 50%;
 }
 
@@ -162,12 +162,12 @@ select {
 
     color: inherit;
     font-family: inherit;
-    font-size: 1em;
+    font-size: var(--font-size-normal);
     line-height: 1.5;
     text-overflow: ellipsis;
 
     background-color: var(--color-grey3);
-    border: 0.25rem solid var(--color-grey8);
+    border: var(--width-border-input) solid var(--color-grey8);
     border-radius: 0.5rem;
 
     transition:
@@ -228,16 +228,16 @@ fieldset {
 
     background-color: var(--color-grey2);
     border: none;
-    border-top: 0.25rem solid var(--color-grey6);
-    border-bottom: 0.25rem solid var(--color-grey6);
+    border-top: var(--width-border) solid var(--color-grey6);
+    border-bottom: var(--width-border) solid var(--color-grey6);
 }
 
 @media (min-width: 800px) {
     fieldset {
         margin-right: -1.25rem;
         margin-left: -1.25rem;
 
-        border: 0.25rem solid var(--color-grey6);
+        border: var(--width-border) solid var(--color-grey6);
         border-radius: 0.5rem;
     }
 }
@@ -251,7 +251,7 @@ legend {
 
 .editor {
     background-color: var(--tinymce-background);
-    border: 0.25rem solid var(--color-grey8);
+    border: var(--width-border-input) solid var(--color-grey8);
     border-radius: 0.5rem;
 
     transition: border-color 0.2s ease-in-out;
@@ -272,6 +272,8 @@ legend {
 
 .editor__documents {
     padding: 1.5rem;
+
+    border-top: var(--width-border) solid var(--color-grey8);
 }
 
 .editor .tox-tinymce {
@@ -284,14 +286,14 @@ legend {
     padding-left: 0.75rem;
 
     color: var(--color-grey11);
-    font-size: 0.85em;
+    font-size: var(--font-size-small);
 }
 
 .form__error {
     padding-left: 1.75em;
 
     color: var(--color-error11);
-    font-size: 0.9em;
+    font-size: var(--font-size-small);
     font-weight: bold;
 
     background-image: url("../../icons/circle-exclamation-error.svg");
@@ -337,7 +339,7 @@ legend {
     box-shadow: none;
     border-color: transparent;
 
-    outline-offset: -0.3rem;
+    outline-offset: calc(-1 * var(--width-outline));
 }
 
 .input-container button:hover,

assets/stylesheets/components/layout.css

@@ -11,9 +11,9 @@
     text-align: center;
     text-decoration: none;
 
-    border-bottom: 0.5rem solid transparent;
+    border-bottom: var(--width-border-bolder) solid transparent;
 
-    outline-offset: -0.3rem;
+    outline-offset: calc(-1 * var(--width-outline));
 
     transition: background-color 0.2s ease-in-out;
 }
@@ -76,7 +76,7 @@
 .layout__breadcrumb {
     padding-bottom: 2rem;
 
-    border-bottom: 0.25rem solid var(--color-grey4);
+    border-bottom: var(--width-border) solid var(--color-grey4);
 }
 
 .layout__breadcrumb > * {
@@ -105,8 +105,8 @@
 
     vertical-align: middle;
 
-    border-top: 0.25rem solid var(--color-primary6);
-    border-right: 0.25rem solid var(--color-primary6);
+    border-top: var(--width-border-bold) solid var(--color-primary6);
+    border-right: var(--width-border-bold) solid var(--color-primary6);
 
     transform: rotate(45deg);
 }
@@ -115,12 +115,11 @@
     display: block;
     padding: 1rem;
 
-    font-size: 0.9em;
     text-align: center;
 
     background-color: var(--color-primary3);
     box-shadow: 0 1px 3px var(--color-box-shadow);
-    border-bottom: 0.25rem solid var(--color-primary6);
+    border-bottom: var(--width-border-bold) solid var(--color-primary6);
 }
 
 .layout__banner--alert .banner__container {

assets/stylesheets/components/lists.css

@@ -13,12 +13,12 @@
 }
 
 .list--border {
-    border: 0.25rem solid var(--color-grey6);
+    border: var(--width-border) solid var(--color-grey7);
     border-radius: 0.5rem;
 }
 
 .list--border > li + li {
-    border-top: 0.25rem solid var(--color-grey6);
+    border-top: var(--width-border) solid var(--color-grey7);
 }
 
 .list--strip > li:first-child {