web/settings: replace checkbox with toggle

- equal font size & padding for all subtexts in settings
- equal padding & border radius for all settings components

it just looks way better now

web/src/routes/+layout.svelte

@@ -2,11 +2,10 @@
     import "@fontsource/ibm-plex-mono/400.css";
     import "@fontsource/ibm-plex-mono/500.css";
 
+    import device from "$lib/device";
     import currentTheme, { statusBarColors } from "$lib/state/theme";
 
     import Sidebar from "$components/sidebar/Sidebar.svelte";
-
-    import device from "$lib/device";
 </script>
 
 <svelte:head>
@@ -45,7 +44,10 @@
         --sidebar-highlight: #ffffff;
         --sidebar-hover: rgba(255, 255, 255, 0.1);
 
-        --input-border: #8d8d95;
+        --input-border: var(--gray);
+
+        --toggle-bg: var(--input-border);
+        --toggle-bg-enabled: var(--secondary);
 
         --padding: 12px;
         --border-radius: 11px;
@@ -85,6 +87,9 @@
 
         --input-border: #383838;
 
+        --toggle-bg: var(--input-border);
+        --toggle-bg-enabled: #777777;
+
         --sidebar-mobile-gradient: linear-gradient(
             90deg,
             rgba(16, 16, 16, 0.9) 0%,
@@ -217,9 +222,10 @@
     }
 
     :global(.subtext) {
-        font-size: 13px;
+        font-size: 12px;
         color: var(--gray);
         line-height: 1.4;
+        padding: 0 var(--padding);
     }
 
     #cobalt {