style(ui): adjust grid opacity, spacing, and select colors

Author: YazanAmmar

docs/styles.css

@@ -2,11 +2,11 @@
 
 :root {
   --logo-main-color: var(--color-limitra-dark);
-  --grid-color: color-mix(in srgb, var(--color-limitra-dark) 4%, transparent);
+  --grid-color: color-mix(in srgb, var(--color-limitra-dark) 6%, transparent);
 }
 .dark {
   --logo-main-color: var(--color-limitra-light);
-  --grid-color: color-mix(in srgb, var(--color-limitra-light) 4%, transparent);
+  --grid-color: color-mix(in srgb, var(--color-limitra-light) 6%, transparent);
 }
 
 /* --- Logo --- */
@@ -36,7 +36,7 @@ body {
 /* --- UI Patterns --- */
 
 .bg-grid-pattern {
-  background-size: 32px 32px;
+  background-size: 36px 36px;
   background-image:
     linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
     linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);

styles.css

@@ -1072,8 +1072,8 @@ select.brutal-select-hidden {
   min-width: 140px;
   width: 100%;
   border: 2px solid var(--ui-border);
-  background-color: var(--limitra-accent);
-  color: var(--text-on-accent);
+  background-color: var(--bg-surface);
+  color: var(--text-main);
   cursor: pointer;
   outline: none;
   box-shadow: 2px 2px 0 var(--ui-border);