refactor(ui): unify tooltip styles with limitra color system

Author: YazanAmmar

docs/styles.css

@@ -158,19 +158,11 @@ section {
 /* --- Tooltip --- */
 
 .brutal-tooltip {
-  --tooltip-bg: #7c3aed;
-  --tooltip-text: #ffffff;
-  --tooltip-border: #171717;
-
   position: relative;
   width: fit-content;
   cursor: help;
 }
 
-html.dark .brutal-tooltip {
-  --tooltip-border: #fafafa;
-}
-
 .brutal-tooltip[data-tooltip]::before {
   content: attr(data-tooltip);
 }
@@ -180,13 +172,13 @@ html.dark .brutal-tooltip {
   visibility: hidden;
   width: max-content;
   max-width: 250px;
-  background-color: var(--tooltip-bg);
-  color: var(--tooltip-text);
+  background-color: var(--color-limitra-accent);
+  color: var(--color-white);
   text-align: center;
   padding: 8px 12px;
-  border: 2px solid var(--tooltip-border);
-  box-shadow: 4px 4px 0px 0px var(--tooltip-border);
-  font-family: 'JetBrains Mono', monospace;
+  border: 2px solid var(--color-limitra-dark);
+  box-shadow: 4px 4px 0px 0px var(--color-limitra-dark);
+  font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: normal;
@@ -214,11 +206,9 @@ html.dark .brutal-tooltip {
   position: absolute;
   width: 12px;
   height: 12px;
-
-  background-color: var(--tooltip-border);
-  border-bottom: 2px solid var(--tooltip-border);
-  border-right: 2px solid var(--tooltip-border);
-
+  background-color: var(--color-limitra-dark);
+  border-bottom: 2px solid var(--color-limitra-dark);
+  border-right: 2px solid var(--color-limitra-dark);
   transform: translateX(-50%) rotate(45deg);
   left: 50%;
   bottom: calc(100% + 5px);
@@ -267,11 +257,32 @@ html.dark .brutal-tooltip {
   bottom: auto;
   border-bottom: none;
   border-right: none;
-  border-top: 2px solid var(--tooltip-border);
-  border-left: 2px solid var(--tooltip-border);
+  border-top: 2px solid var(--color-limitra-dark);
+  border-left: 2px solid var(--color-limitra-dark);
   transform: translateX(-50%) rotate(45deg);
 }
 
+html.dark .brutal-tooltip::before,
+html.dark .brutal-tooltip .tooltip-content,
+html.dark .brutal-tooltip::after {
+  border-color: var(--color-limitra-light);
+}
+
+html.dark .brutal-tooltip::after {
+  background-color: var(--color-limitra-light);
+}
+
+html.dark .brutal-tooltip::before,
+html.dark .brutal-tooltip .tooltip-content {
+  box-shadow: 4px 4px 0px 0px var(--color-limitra-light);
+}
+
+html.dark .brutal-tooltip.tooltip-bottom::after {
+  border-top-color: var(--color-limitra-light);
+  border-left-color: var(--color-limitra-light);
+  background-color: var(--color-limitra-light);
+}
+
 /* --- QR Loader --- */
 
 .qr-loader {