refactor(styles): rename --accent to --limitra-accent to avoid namespace collision

Author: YazanAmmar

styles.css

@@ -7,7 +7,7 @@
   --text-secondary: #333333;
   --text-muted: #737373;
   --ui-border: #000000;
-  --accent: #7c3aed;
+  --limitra-accent: #7c3aed;
   --text-on-accent: #ffffff;
   --grid-color: rgba(0, 0, 0, 0.04);
 }
@@ -44,7 +44,7 @@ body {
 }
 
 ::selection {
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--bg-surface);
 }
 
@@ -70,7 +70,7 @@ h3 {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--accent);
+  background: var(--limitra-accent);
   border-radius: 0;
 }
 
@@ -99,7 +99,7 @@ section {
 }
 
 .logo-accent {
-  fill: var(--accent);
+  fill: var(--limitra-accent);
 }
 
 .logo-box {
@@ -145,7 +145,7 @@ section {
   padding: 40px;
   max-width: 600px;
   width: 90%;
-  box-shadow: 12px 12px 0px 0px var(--accent);
+  box-shadow: 12px 12px 0px 0px var(--limitra-accent);
   transform: translateY(20px);
   transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   display: flex;
@@ -192,7 +192,7 @@ section {
 .limitra-modal-badge {
   background-color: var(--text-main);
   color: var(--bg-surface);
-  box-shadow: 4px 4px 0px 0px var(--accent);
+  box-shadow: 4px 4px 0px 0px var(--limitra-accent);
 }
 
 /* --- Tooltip --- */
@@ -212,7 +212,7 @@ section {
   visibility: hidden;
   width: max-content;
   max-width: 250px;
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
   text-align: center;
   padding: 8px 12px;
@@ -361,7 +361,7 @@ section {
 }
 
 .brutal-toggle input:checked + .toggle-slider {
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   box-shadow: none;
   transform: translate(2px, 2px);
 }
@@ -446,7 +446,7 @@ button#save {
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 15px;
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
   border: 2px solid var(--ui-border);
   cursor: pointer;
@@ -460,7 +460,7 @@ button#save:active {
 }
 
 button#save:disabled {
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
 }
 
@@ -482,7 +482,7 @@ button#save:disabled {
 
 .usage-stats-text {
   font-family: 'JetBrains Mono', monospace;
-  color: var(--accent);
+  color: var(--limitra-accent);
   font-weight: 700;
 }
 
@@ -497,7 +497,7 @@ button#save:disabled {
 
 .progress-fill {
   height: 100%;
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   width: var(--progress, 0%);
   transition:
     width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
@@ -643,7 +643,7 @@ button#save:disabled {
 }
 
 .nav-item.active {
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
 }
 
@@ -656,7 +656,7 @@ button#save:disabled {
 
 .badge-soon {
   display: inline-block;
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
   font-family: 'JetBrains Mono', monospace;
   font-size: 16px;
@@ -671,7 +671,7 @@ button#save:disabled {
   font-family: 'JetBrains Mono', monospace;
   font-size: 13px;
   font-weight: 800;
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
   padding: 4px 10px;
   border: 2px solid var(--ui-border);
@@ -884,11 +884,11 @@ select.brutal-select-hidden {
 
 .custom-brutal-option:hover {
   background-color: var(--grid-color);
-  color: var(--accent);
+  color: var(--limitra-accent);
 }
 
 .custom-brutal-option.selected {
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
   font-weight: 700;
 }
@@ -927,7 +927,7 @@ select.brutal-select-hidden {
 
 .footer-muted-link:hover {
   opacity: 1;
-  color: var(--accent);
+  color: var(--limitra-accent);
 }
 
 .footer-links {
@@ -1038,7 +1038,7 @@ select.brutal-select-hidden {
   display: inline-flex;
   align-items: center;
   gap: 10px;
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
   padding: 12px 24px;
   font-family: 'Inter', sans-serif;
@@ -1072,7 +1072,7 @@ select.brutal-select-hidden {
   min-width: 140px;
   width: 100%;
   border: 2px solid var(--ui-border);
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
   cursor: pointer;
   outline: none;
@@ -1113,7 +1113,7 @@ select.brutal-select-hidden {
   max-width: 500px;
   width: 85%;
   text-align: center;
-  box-shadow: 12px 12px 0px 0px var(--accent);
+  box-shadow: 12px 12px 0px 0px var(--limitra-accent);
   animation: limitra-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
 }
 
@@ -1132,7 +1132,7 @@ select.brutal-select-hidden {
   position: absolute;
   top: -20px;
   left: -20px;
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
   font-family: 'JetBrains Mono', monospace;
   font-weight: 800;
@@ -1200,7 +1200,7 @@ select.brutal-select-hidden {
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%) translateY(0);
-  background-color: var(--accent);
+  background-color: var(--limitra-accent);
   color: var(--text-on-accent);
   padding: 8px 16px;
   font-family: 'JetBrains Mono', monospace;