Porządkowanie css, i usuwanie radiowego

src/styles/theme.css

@@ -1,15 +1,60 @@
+* {
+  --brand: #0af;
+  --brand: hsl(200 100% 50%);
+
+  --brand-hue: 200;
+  --brand-saturation: 100%;
+  --brand-lightness: 50%;
+
+  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
+  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
+  --text2-light: hsl(var(--brand-hue) 30% 30%);
+  --surface1-light: hsl(var(--brand-hue) 25% 90%);
+  --surface2-light: hsl(var(--brand-hue) 20% 99%);
+  --surface3-light: hsl(var(--brand-hue) 20% 92%);
+  --surface4-light: hsl(var(--brand-hue) 20% 85%);
+  --surface-shadow-light: var(--brand-hue) 10% 20%;
+  --shadow-strength-light: .02;
+  --border1-light: hsl(var(--brand-hue) 5% 80%);
+
+  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 0.2) calc(var(--brand-lightness) / 1.5));
+  --text1-dark: hsl(var(--brand-hue) 15% 85%);
+  --text2-dark: hsl(var(--brand-hue) 5% 65%);
+  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
+  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
+  --surface3-dark: hsl(var(--brand-hue) 5% 20%);
+  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
+  --surface-shadow-dark: var(--brand-hue) 50% 3%;
+  --shadow-strength-dark: .8;
+  --border1-dark: hsl(var(--brand-hue) 40% 70%);
+}
+
 :root {
-  --fuz-bg: #ffffff;
-  --fuz-text: #0d0d0d;
+  --f-background: var(--surface2-light);
+
+  --f-header: var(--brand-light);
+  --f-header-2: var(--text1-light);
+  --f-header-items: (var(--text2-light));
+  
+  --f-text: var(--text2-light);
+
+  --btn-background: var(--surface2-light);
+  --btn-text: var(--text1-light);
+
+  --btn-outline-background: transparent;
+  --btn-outline-border: var(--border1-light);
+  --btn-outline-text: var(--text1-light);
+
+  --btn-outline-background-hover: var(--surface4-light);
+  --btn-outline-text-hover: var(--brand-light);
 
   /* Invert Color */
-  --fuz-bg-invert: #0d1117;
-  --fuz-text-invert: #e6edf3;
-  --btn-bg-invert: #58a6ff;     
-  --btn-text-invert: #0d1117;   
+  --f-background-invert: #0d1117;
+  --f-text-invert: #e6edf3;
+  --btn-bg-invert: #58a6ff;
+  --btn-text-invert: #0d1117;
   --btn-outline-invert: #58a6ff;
   --btn-outline-bg-invert: rgba(88, 166, 255, 0.15);
-
   /* Links */
   --fuz-link: #0050c8;
   --fuz-link-hover: #003f9a;
@@ -19,57 +64,66 @@
   --fuz-accent-hover: #004bcc;
   --fuz-accent-text: #ffffff;
 
-  /* Buttons */
-  --btn-bg: var(--fuz-accent);
-  --btn-text: var(--fuz-accent-text);
 
-  --btn-outline-border: var(--fuz-link);
-  --btn-outline-text: var(--fuz-link);
-  --btn-outline-bg-hover: rgba(0, 80, 200, 0.08);
-
-  --btn-ghost-text: var(--fuz-text);
+  --btn-ghost-text: var(--f-text);
   --btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
-  --fuz-border: rgb(229, 231, 235);
+  ---f-border-color: rgb(209 213 219);
+  /* / var(--tw-border-opacity, 1)); */
 }
-
 :root.dark {
-  --fuz-bg: #0d1117;
-  --fuz-text: #e6edf3;
+
+  --f-background: var(--surface1-dark);
+
+  --f-header: var(--brand-dark);
+  --f-header-2: var(--text1-dark);
+  --f-header-items: (var(--text2-dark));
+
+  --f-text: var(--text1-dark);
+
+  --btn-background: var(--surface4-dark);
+  --btn-text: var(--text1-dark);
+
+  --btn-outline-background: transparent;
+  --btn-outline-border: var(--border1-dark);
+  --btn-outline-text: var(--text1-dark);
+
+  --btn-outline-background-hover: var(--surface4-dark);
+  --btn-outline-text-hover: var(--brand-dark);
 
   /* Invert Color */
-  --fuz-bg-invert: #ffffff;
-  --fuz-text-invert: #0d0d0d;
-  --btn-bg-invert: #0066ff;     
+  --f-background-invert: #ffffff;
+  --f-text-invert: #0d0d0d;
+  --btn-bg-invert: #0066ff;
   --btn-text-invert: #ffffff;
   --btn-outline-invert: #0066ff;
 
   /* Links (GitHub Dark palette) */
-  --fuz-link: #58a6ff;
+  --fuz-link: var(--brand-dim);
   --fuz-link-hover: #79b7ff;
 
+
+
   /* Accent */
-  --fuz-accent: #58a6ff;
+  --fuz-accent: hsl(var(--hue) calc(var(--saturation) / 1.25) calc(var(--lightness) / 1.25));
   --fuz-accent-hover: #79b7ff;
   --fuz-accent-text: #0d1117;
 
   /* Buttons */
-  --btn-bg: var(--fuz-accent);
-  --btn-text: var(--fuz-accent-text);
 
-  --btn-outline-border: var(--fuz-accent);
-  --btn-outline-text: var(--fuz-accent);
-  --btn-outline-bg-hover: rgba(88, 166, 255, 0.15);
 
-  --btn-ghost-text: var(--fuz-text);
-  --btn-ghost-hover-bg: rgba(255,255,255,0.08);
 
-  --fuz-border: rgb(229, 231, 235);
+
+  --btn-ghost-text: var(--f-text);
+  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.08);
+
+  --f-border-color: rgb(209 213 219);
+  /* / var(--tw-border-opacity, 1)) */
 }
 
 /* Body */
 body {
-  background-color: var(--fuz-bg);
-  color: var(--fuz-text);
+  background-color: var(--f-background);
+  color: var(--f-text);
 }
 
 /* Links */
@@ -84,9 +138,9 @@ a:hover {
 /* Theme Toggle */
 .theme-toggle-btn {
   @apply text-xl p-2 rounded-full cursor-pointer transition-colors;
-  color: var(--fuz-text);
+  color: var(--f-text);
 }
 
 .theme-toggle-btn:hover {
   opacity: 0.8;
-}
+}