refactor: improve semantic by replacing decorative hr with borders (#597)

Replace decorative usage of Hr component with borders to improve
semantic.

- remove Hr component
- replace decorative hr elements with borders
- introduce app-layout utility class
- update layout and spacing
- update docs about border css custom property

src/components/LinkButton.astro

@@ -22,7 +22,7 @@ const {
   disabled ? (
     <span
       id={id}
-      class:list={["group inline-block", className]}
+      class:list={["group inline-flex items-center gap-1", className]}
       title={title}
       aria-disabled={disabled}
     >
@@ -32,7 +32,10 @@ const {
     <a
       id={id}
       {href}
-      class:list={["group inline-block hover:text-accent", className]}
+      class:list={[
+        "group inline-flex items-center gap-1 hover:text-accent",
+        className,
+      ]}
       aria-label={ariaLabel}
       title={title}
     >