@geoinsight/react-components 1.1.5 → 1.2.0

package/dist/cjs/index.css

@@ -41,60 +41,96 @@
   --color-neutral-700: #403b3a;
   --color-neutral-800: #201e1d;
 
-  /* --color-success: #20e52f;
-  --color-danger: #e52f20; */
-
-  --transition-bg-cubic-bezier: background-color 500ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-color-cubic-bezier: color 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-text-decoration-cubic-bezier: text-decoration 500ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-text-underline-offset-cubic-bezier: text-underline-offset 250ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-box-shadow-cubic-bezier: box-shadow 500ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-border-cubic-bezier: border 250ms
-    cubic-bezier(0.1, 0.2, 0.3, 0.4);
-
-
-  --color-dark-base: #2e3440;
-  --color-dark-bright: #3b4252;
-  --color-dark-brighter: #434c5e;
-  --color-dark-brightest: #4c566a;
-
-  --color-light-base: #d8dee9;
-  --color-light-bright: #e5e9f0;
-  --color-light-brighter: #eceff4;
-
-  --color-primary-base: #8fbcbb;
-  --color-primary-bright: #88c0d0;
-  --color-primary-dark: #81a1c1;
-  --color-primary-darker: #5e81ac;
-
-  --color-danger: #bf616a;
-  --color-warning: #ebcb8b;
-  --color-success: #a3be8c;
-  --color-info: #b48ead;
+  --transition-bg-cubic-bezier: background-color 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-color-cubic-bezier: color 250ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-text-decoration-cubic-bezier: text-decoration 250ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-text-underline-offset-cubic-bezier: text-underline-offset 125ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-box-shadow-cubic-bezier: box-shadow 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-border-cubic-bezier: border 250ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+
+  /* === BACKGROUNDS === */
+  --color-carbon-950: #0a0f18;
+  /* app background */
+  --color-carbon-900: #111827;
+  /* surface */
+  --color-carbon-800: #1f2937;
+  /* panels */
+  --color-carbon-700: #2b3545;
+  /* elevated */
+
+  /* Light Neutrals */
+  --color-fog-400: #b8c2ce;
+  --color-fog-300: #cbd5e1;
+  --color-fog-200: #e2e8f0;
+  --color-fog-100: #f1f5f9;
+
+  /* === BRAND === */
+  --color-brand-primary: #2f6f9f;
+  /* Mineral Blue – platform trust */
+  --color-brand-secondary: #4c7dff;
+  /* Electric Slate – infra energy */
+  --color-brand-tertiary: #d946ef;
+  /* Neural Magenta – AI signal *
+
+  /* === STATUS === */
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+  --color-info: var(--color-brand-secondary);
+
+  /* === BORDERS === */
+  --color-border-subtle: rgba(148, 163, 184, 0.12);
+  --color-border-strong: rgba(148, 163, 184, 0.25);
+
+  /* === GLOWS === */
+  --color-glow-primary: rgba(47, 111, 159, 0.25);
+  --color-glow-secondary: rgba(76, 125, 255, 0.25);
+  --color-glow-tertiary: rgba(217, 70, 239, 0.3);
+
+  --radius-s: 8px;
+  --radius-m: 16px;
+  --radius-l: 32px;
+
+  --color-primary-base: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
+  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.45);
+
+  --background-hero: linear-gradient(135deg,
+      #2f6f9f 0%,
+      #4c7dff 50%,
+      #d946ef 100%);
 }
 
 [data-theme="dark"] {
-  --color-main-background: var(--color-dark-base);
-  --color-main-color: var(--color-light-base);
-  color: var(--color-main-color) !important;
-  background-color: var(--color-main-background) !important;
+  --bg-app: var(--color-carbon-950);
+  --bg-surface: var(--color-carbon-900);
+  --bg-panel: var(--color-carbon-800);
+  --bg-elevated: var(--color-carbon-700);
+  --text-primary: var(--color-fog-100);
+  --text-secondary: var(--color-fog-200);
+  --text-muted: var(--color-fog-400);
+
+  color: var(--text-primary) !important;
+  background-color: var(--bg-app) !important;
 }
 
 [data-theme="light"] {
-  --color-main-background: var(--color-light-base);
-  --color-main-color: var(--color-dark-base);
-  color: var(--color-main-color) !important;
-  background-color: var(--color-main-background) !important;
+  --bg-app: var(--color-fog-100);
+  --bg-surface: var(--color-fog-200);
+  --bg-panel: var(--color-fog-300);
+  --bg-elevated: var(--color-fog-400);
+  --text-primary: var(--color-carbon-950);
+  --text-secondary: var(--color-carbon-900);
+  --text-muted: var(--color-carbon-700);
+
+  color: var(--text-primary) !important;
+  background-color: var(--bg-app) !important;
 }
 
 @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;
   }
+
   body {
     color: var(--color-main-color);
     background-color: var(--color-main-background);
@@ -209,6 +245,7 @@ h6 {
     font-weight: 700;
     line-height: 1.25;
   }
+
   * {
     font-size: var(--font-size-14);
   }
@@ -250,24 +287,22 @@ h6 {
     font-weight: 700;
     line-height: 1.25;
   }
+
   * {
     font-size: var(--font-size-12);
   }
 }
-
 .menu-button {
   align-items: center;
-  background-color: var(--color-dark-bright);
-  border-radius: var(--spacing-8) var(--spacing-12) var(--spacing-12)
-    var(--spacing-8);
-  border: none;
-  color: var(--color-light-bright);
+  background-color: var(--bg-surface);
+  border-radius: var(--radius-s);
+  border: 1px solid transparent;
+  color: var(--text-primary);
   cursor: pointer;
   display: flex;
   gap: var(--spacing-8);
-  height: var(--spacing-40);
   justify-content: flex-end;
-  padding: var(--spacing-4) var(--spacing-16);
+  padding: var(--spacing-12) var(--spacing-20);
   margin: var(--spacing-4) 0;
   text-decoration: none;
 }
@@ -283,160 +318,175 @@ h6 {
 }
 
 .menu-button:hover {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  box-shadow: 2px 4px 6px 0 var(--color-glow-primary);
   transition: var(--transition-bg-cubic-bezier),
     var(--transition-box-shadow-cubic-bezier);
 }
 
 .menu-button-dropdown {
-  background-color: var(--color-dark-bright) !important;
+  background-color: var(--bg-panel) !important;
   padding-right: var(--spacing-16) !important;
 }
 
 .menu-button-nested {
-  background-color: var(--color-dark-brightest);
+  background-color: var(--bg-surface);
   margin-left: var(--spacing-16);
   padding-right: var(--spacing-40);
 }
 
 .menu-button-subnested {
-  background-color: var(--color-dark-brightest);
+  background-color: var(--bg-surface);
   margin-left: var(--spacing-32);
   padding-right: var(--spacing-40);
 }
 
+.menu-button-dropdown:hover {
+  border-color: var(--color-brand-primary);
+}
+
 .menu-button-nested:hover {
-  background-color: var(--color-primary-dark) !important;
+  border-color: var(--color-brand-secondary);
 }
 
 .menu-button-subnested:hover {
-  background-color: var(--color-primary-dark) !important;
+  border-color: var(--color-brand-tertiary);
 }
 
 .menu-button-is-link:hover {
-  background-color: var(--color-primary-dark) !important;
+  border-color: var(--color-brand-tertiary);
   transition: var(--transition-bg-cubic-bezier);
 }
 
-.menu-button-dropdown:hover {
-  background-color: var(--color-primary-darker) !important;
-}
-
 .menu-button-is-selected {
-  background-color: var(--color-primary-darker);
+  background-color: var(--color-brand-secondary);
 }
 
-.button,
-.link {
+.button {
+  appearance: none;
   align-items: center;
-  border-radius: var(--spacing-32);
+  border-radius: var(--radius-s);
   border: none;
   color: inherit;
   cursor: pointer;
   display: flex;
-  justify-content: center;
-  gap: var(--spacing-8);
+  font-weight: 600;
   font-size: var(--font-size-16);
+  gap: var(--spacing-8);
+  justify-content: center;
+  padding: var(--spacing-8) var(--spacing-16);
+  transition: all 0.2s ease;
 }
 
-[data-theme="dark"] .button {
-  color: var(--color-light-brighter);
+.button:active {
+  transform: translateY(1px);
 }
 
 .button:disabled {
-  cursor: unset;
+  box-shadow: none;
+  cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;
 }
 
-.button:hover {
-  background-color: var(--color-primary-dark);
-  border: 3px solid var(--color-primary-dark);
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-bg-cubic-bezier),
-    var(--transition-box-shadow-cubic-bezier);
+.button__primary {
+  background: var(--color-primary-base);
+  color: var(--text-primary);
+  border: 1px solid transparent;
+  box-shadow:
+    0 4px 14px var(--color-glow-primary);
 }
 
-
-.button__primary {
-  background-color: var(--color-primary-bright);
-  border: 3px solid var(--color-primary-base);
+.button__primary:hover {
+  filter: brightness(1.08);
+  box-shadow:
+    0 6px 20px var(--color-glow-secondary);
 }
 
-.button__secondary,
-.link__secondary {
-  background-color: var(--color-main-background);
-  border: 3px solid var(--color-primary-base);
-  border-radius: var(--spacing-32);
-  text-decoration: unset;
+.button__secondary {
+  background: var(--bg-elevated);
+  border: 1px solid var(--color-border-strong);
+  color: var(--text-primary);
 }
 
+
 .button__secondary:hover {
-  box-shadow: unset;
-  border: 3px solid var(--color-primary-base);
+  border-color: var(--color-brand-secondary);
+  box-shadow: 0 0 0 1px var(--color-brand-secondary);
 }
 
 .button__icon {
-  background-color: var(--color-primary-bright);
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  border: 1px solid var(--color-border-subtle);
 }
 
 .button__icon:hover {
-  border: unset;
+  border-color: var(--color-brand-secondary);
+  color: var(--text-primary);
+
+  box-shadow: 0 0 0 1px var(--color-brand-secondary);
+}
+
+.button__icon:active,
+.button__secondary:active,
+.link__secondary:active {
+  background: linear-gradient(
+    135deg,
+    var(--color-brand-primary),
+    var(--color-brand-secondary)
+  );
+
+  color: var(--text-primary);
+  border-color: transparent;
+
+  box-shadow: 0 4px 14px var(--color-glow-primary);
 }
 
 .link__primary {
-  background-color: unset !important;
-  color: var(--color-primary-base) !important;
+  color: var(--color-brand-secondary);
+  font-weight: 600;
+  transition: color 0.15s ease;
   text-decoration: underline 1px var(--color-primary-base);
   text-underline-offset: var(--spacing-4);
 }
 
-[data-theme="light"] .link__primary {
-  color: var(--color-primary-darker) !important;
-  text-decoration: underline 1px var(--color-primary-darker);
-}
-
 .link__primary:hover {
-  border: unset;
-  box-shadow: unset;
-  color: var(--color-primary-dark) !important;
-  text-decoration: underline 2px var(--color-primary-base);
-  text-underline-offset: calc(var(--spacing-8) * 0.75);
+  color: var(--color-brand-tertiary);
+  text-decoration: underline;
+  text-underline-offset: 0.375rem;
   transition: var(--transition-color-cubic-bezier),
     var(--transition-text-underline-offset-cubic-bezier);
 }
 
+.link__secondary {
+  background: var(--bg-elevated);
+  border: 1px solid var(--color-border-strong);
+  color: var(--text-primary);
+  text-decoration: unset;
+}
+
 .link__secondary:hover {
-  background-color: var(--color-primary-dark);
-  border: 3px solid var(--color-primary-base);
-  box-shadow: unset;
-  transition: var(--transition-bg-cubic-bezier),
-    var(--transition-box-shadow-cubic-bezier);
+  border-color: var(--color-brand-secondary);
+  box-shadow: 0 0 0 1px var(--color-brand-secondary);
 }
 
 .link__icon {
   background-color: unset !important;
-  color: var(--color-primary-base) !important;
+  color: var(--color-brand-secondary) !important;
 }
 
-.link > a {
+.link>a {
   text-decoration: inherit;
   color: inherit;
 }
 
 .link__icon svg {
-  border: 2px solid transparent;
-  border-bottom: 2px solid var(--color-primary-base);
   border-radius: 2px;
   padding: var(--spacing-4);
 }
 
 [data-theme="light"] .link__icon {
-  color: var(--color-primary-darker) !important;
-}
-
-[data-theme="light"] .link__icon svg {
-  border-bottom: 2px solid var(--color-primary-darker);
+  color: var(--color-brand-primary) !important;
 }
 
 .link__icon:hover {
@@ -445,8 +495,8 @@ h6 {
 }
 
 .link__icon:hover svg {
-  color: var(--color-main-color) !important;
-  border: 2px solid var(--color-primary-dark);
+  color: var(--color-brand-tertiary) !important;
+  border-bottom: 1px solid var(--color-brand-tertiary);
   transition: var(--transition-color-cubic-bezier), var(--transition-border-cubic-bezier);
 }
 
@@ -455,7 +505,7 @@ h6 {
 }
 
 .button__medium {
-  padding: var(--spacing-8) var(--spacing-24);
+  padding: var(--spacing-8) var(--spacing-16);
 }
 
 .button__large {
@@ -465,7 +515,6 @@ h6 {
 .button__icon.button__medium {
   padding: var(--spacing-8) var(--spacing-12);
 }
-
 .form {
   align-items: center;
   display: flex;
@@ -497,22 +546,23 @@ h6 {
 }
 
 .input {
+  background: var(--bg-surface);
   box-sizing: border-box;
-  border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary-bright);
-  padding: var(--spacing-16) var(--spacing-24);
-  font-size: var(--font-size-16);
+  border-radius: var(--radius-s);
+  border: 1px solid var(--color-border-strong);
+  color: var(--text-primary);
+  padding: var(--spacing-12) var(--spacing-20);
+  font-size: 0.9rem;
+  transition: all 0.15s ease;
   width: 100%;
-}
-
-[data-theme="dark"] .input {
-  background-color: var(--color-dark-bright);
-  color: var(--color-light-bright);
+  outline: none;
 }
 
 [data-theme="light"] .input {
-  background-color: var(--color-light-bright);
-  color: var(--color-dark-bright);
+  border: 1px solid color-mix(in srgb,
+      transparent 60%,
+      var(--color-carbon-700));
+  background-color: var(--bg-app);
 }
 
 .input__header {
@@ -523,16 +573,16 @@ h6 {
 }
 
 .input__header--error {
-  font-size: 12px;
+  font-size: var(--font-size-12);
   color: var(--color-danger);
 }
 
 .input--icon {
-  padding: var(--spacing-16) var(--spacing-40);
+  padding: var(--spacing-12) var(--spacing-40);
 }
 
 .input__icon {
-  padding: var(--spacing-16) var(--spacing-16);
+  padding: var(--spacing-12) var(--spacing-16);
   position: absolute;
 }
 
@@ -544,15 +594,34 @@ h6 {
   left: 0;
 }
 
+.input:hover {
+  border-color: var(--color-brand-primary);
+}
+
 .input:enabled:hover {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  box-shadow: 1px 1px 6px 0 var(--color-glow-secondary);
   transition: var(--transition-box-shadow-cubic-bezier);
 }
 
 .input:focus {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
-  transition: var(--transition-box-shadow-cubic-bezier);
-  outline: none;
+  border-color: var(--color-brand-secondary);
+  box-shadow: 0 0 0 2px var(--color-glow-secondary);
+}
+
+.input__icon:has(+ .input:hover) {
+  color: var(--color-brand-secondary);
+}
+
+input:hover + .input__icon {
+  color: var(--color-brand-secondary);
+}
+
+.input__icon:has(+ .input:focus) {
+  color: var(--color-brand-secondary);
+}
+
+input:focus + .input__icon {
+  color: var(--color-brand-secondary);
 }
 
 .input:disabled {
@@ -560,12 +629,11 @@ h6 {
 }
 
 .input--error {
-  border: 3px solid var(--color-danger) !important;
+  border-color: var(--color-danger) !important;
 }
 
 .input--error:focus {
-  border: 3px solid var(--color-danger);
-  outline: none;
+  box-shadow: 0 0 0 2px var(--color-glow-tertiary);
 }
 
 .custom-class-name {
@@ -606,8 +674,8 @@ h6 {
 
 .textarea__input {
   box-sizing: border-box;
-  border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary-bright);
+  border-radius: var(--radius-s);
+  border: 1px solid var(--color-border-strong);
   cursor: text;
   outline: none;
   padding: var(--spacing-8) var(--spacing-16);
@@ -615,37 +683,28 @@ h6 {
   width: 100%;
 }
 
-[data-theme="dark"] .textarea__input {
-  background-color: var(--color-dark-bright);
-  color: var(--color-light-bright);
-}
-
 [data-theme="light"] .textarea__input {
-  background-color: var(--color-light-bright);
-  color: var(--color-dark-bright);
-}
-
-[data-theme="dark"] .textarea__input {
-  background-color: var(--color-dark-bright);
-  color: var(--color-light-bright);
-}
-
-[data-theme="light"] .textarea__input {
-  background-color: var(--color-light-bright);
-  color: var(--color-dark-bright);
+  border: 1px solid color-mix(in srgb, transparent 60%, var(--color-carbon-700));
+  background-color: var(--bg-app);
+  color: var(--text-primary);
 }
 
 .textarea__input--error {
   border: 3px solid var(--color-danger);
 }
 
+.textarea__input:hover {
+  border-color: var(--color-brand-primary);
+}
+
 .textarea__input:enabled:hover {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  box-shadow: 1px 1px 6px 0 var(--color-glow-secondary);
   transition: var(--transition-box-shadow-cubic-bezier);
 }
 
 .textarea__input:focus {
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  border-color: var(--color-brand-secondary);
+  box-shadow: 0 0 0 2px var(--color-glow-secondary);
   transition: var(--transition-box-shadow-cubic-bezier);
   outline: none;
 }
@@ -655,7 +714,7 @@ h6 {
 }
 
 .textarea__button.button {
-  border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
+  border-radius: 0px 0px var(--radius-s) var(--radius-s);
   bottom: 0;
   cursor: pointer;
   left: 0;
@@ -670,7 +729,7 @@ h6 {
 }
 
 .textarea__button > svg {
-  color: var(--color-main-color);
+  color: var(--bg-app);
 }
 
 .textarea__button:disabled {
@@ -679,10 +738,10 @@ h6 {
   pointer-events: none;
 }
 
-.textarea__button--show {
-  background-color: var(--color-primary-dark) !important;
-  border: 2px solid var(--color-primary-dark) !important;
-}
+/* .textarea__button--show {
+  background-color: var(--bg-surface) !important;
+  border: 2px solid var(--bg-surface) !important;
+} */
 
 .custom-label {
   color: red;
@@ -702,25 +761,22 @@ h6 {
   width: 100%;
 }
 
-.select {
+/* .select {
   box-sizing: border-box;
-  border-radius: var(--spacing-8);
+  border-radius: var(--radius-s);
   border: 2px solid var(--color-primary-bright);
   padding: var(--spacing-16) var(--spacing-24);
   font-size: var(--font-size-16);
   width: 100%;
-}
-
-.select--focus {
-  border-radius: var(--spacing-8) var(--spacing-8) 0 0 !important;
-}
+} */
 
 .select:focus {
-  border-radius: var(--spacing-8) var(--spacing-8) 0 0;
+  border-radius: var(--radius-s) var(--radius-s) 0 0;
 }
 
 .select:disabled {
   opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .select__arrow.input__icon {
@@ -729,8 +785,8 @@ h6 {
 
 .select__arrow-button.button {
   background-color: unset;
-  border-radius: 0 var(--spacing-8) var(--spacing-8) 0;
-  padding: 15px var(--spacing-24);
+  border-radius: 0 var(--radius-s) var(--radius-s) 0;
+  padding: var(--spacing-8) var(--spacing-24);
 }
 
 .select__arrow-button.button:hover {
@@ -742,9 +798,9 @@ h6 {
 }
 
 .select__box {
-  background-color: var(--color-main-background);
-  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
-  border: 2px solid var(--color-primary-bright);
+  background-color: var(--bg-app);
+  border-radius: 0 0 var(--radius-s) var(--radius-s);
+  border: 1px solid var(--color-brand-secondary);
   box-sizing: border-box;
   max-height: var(--size-m);
   overflow: scroll;
@@ -761,18 +817,23 @@ h6 {
 }
 
 .select__option.button {
+  background: var(--bg-app);
   border: none;
   border-radius: 0;
+  font-weight: 400;
+  font-size: var(--font-size-14);
   justify-content: start;
   width: 100%;
 }
 
 .select__option.button:hover {
+  background: var(--color-brand-secondary);
   border: unset;
+
 }
 
 .select__option.button:last-child {
-  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
+  border-radius: 0 0 var(--radius-s) var(--radius-s);
 }
 
 .select--error {
@@ -812,10 +873,10 @@ h6 {
 }
 
 .modal {
-  background: white;
-  border-radius: var(--spacing-8);
-  border: 1px solid var(--color-neutral-600);
-  color: var(--color-black);
+  background: var(--bg-elevated);
+  border-radius: var(--radius-s);
+  border: 1px solid var(--color-brand-primary);
+  color: var(--text-primary);
   left: 50%;
   padding: var(--spacing-4) var(--spacing-4);
   position: absolute;
@@ -833,8 +894,8 @@ h6 {
 }
 
 .modal__content {
-  border: 1px solid var(--color-neutral-100);
-  border-radius: var(--spacing-8);
+  border: 1px solid var(--color-brand-secondary);
+  border-radius: var(--radius-s);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
@@ -854,8 +915,8 @@ h6 {
 }
 
 .range__panel:hover {
-  border-radius: var(--spacing-8);
-  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  border-radius: var(--radius-s);
+  box-shadow: 2px 4px 6px 0 var(--color-glow-primary);
   transition: var(--transition-bg-cubic-bezier),
     var(--transition-box-shadow-cubic-bezier);
 }
@@ -868,7 +929,7 @@ h6 {
 }
 
 .range__track {
-  background-color: var(--color-primary-bright);
+  background-color: var(--bg-panel);
   border-radius: 0 var(--spacing-4) var(--spacing-4) 0;
   height: 100%;
   position: absolute;
@@ -886,7 +947,12 @@ h6 {
 }
 
 .range__content:hover {
-  box-shadow: 5px 2px 6px 0 var(--color-main-color);
+  background-color: color-mix(
+    in srgb,
+    var(--color-brand-secondary) 80%,
+    transparent 10%
+  );
+  box-shadow: 5px 2px 6px 0 var(--color-glow-secondary);
   transition: var(--transition-box-shadow-cubic-bezier);
 }
 
@@ -897,7 +963,7 @@ h6 {
 
 .range__tick {
   border-left: 2px solid
-    color-mix(in srgb, var(--color-primary-dark) 80%, transparent 10%);
+    color-mix(in srgb, var(--color-brand-secondary) 80%, transparent 10%);
   width: 100%;
 }
 
@@ -918,36 +984,29 @@ h6 {
 
 .range__value__period {
   border-left: 2px solid
-    color-mix(in srgb, var(--color-primary-dark) 80%, transparent 10%);
+    color-mix(in srgb, var(--color-brand-secondary) 80%, transparent 10%);
   width: calc(100% + var(--spacing-40));
 }
 
 .range__value--over {
-  background-color: var(--color-main-background) !important;
+  background-color: var(--bg-surface) !important;
   overflow: visible;
   white-space: unset;
   width: unset;
   position: absolute;
-  top: calc(var(--spacing-40) * 1);
+  top: var(--spacing-40);
 }
 
 .range__thumb {
   position: absolute;
   top: -32px;
-  background-color: transparent;
+  background-color: transparent !important;
 }
 
 .button__icon.range__play {
-  background-color: var(--color-main-background);
-  border: 1px solid var(--color-primary-dark);
-  border-radius: var(--spacing-32);
   z-index: 5;
 }
 
-.button__icon.range__play:hover {
-  border: 1px solid var(--color-primary-dark);
-}
-
 @media (max-width: 699px) {
   .range {
     flex-direction: column;
@@ -964,6 +1023,7 @@ h6 {
     max-width: 20rem;
   }
 }
+
 @property --angle {
   syntax: "<angle>";
   initial-value: 0deg;
@@ -989,8 +1049,8 @@ h6 {
   align-content: center;
   appearance: none;
   -webkit-appearance: none;
-  background-color: var(--color-main-background);
-  border-radius: 1rem;
+  background-color: var(--bg-elevated);
+  border-radius: var(--radius-s);
   display: flex;
   justify-content: start;
   padding: 0.1rem;
@@ -999,36 +1059,28 @@ h6 {
 }
 
 [data-theme="light"] .checkbox:checked {
-  background-color: color-mix(
-    in srgb,
-    var(--color-primary-dark),
-    var(--color-main-background)
-  );
+  background-color: color-mix(in srgb,
+      var(--color-brand-primary),
+      var(--bg-elevated));
 }
 
 [data-theme="dark"] .checkbox:checked {
-  background-color: color-mix(
-    in srgb,
-    var(--color-primary-darker),
-    var(--color-main-color)
-  );
+  background-color: color-mix(in srgb,
+      var(--color-brand-primary),
+      var(--bg-elevated));
 }
 
 .checkbox::after {
   animation: 1s spinout linear;
-  background-image: conic-gradient(
-    from var(--angle),
-    transparent 70%,
-    var(--conic-color-0),
-    var(--conic-color-1),
-    var(--conic-color-2)
-  );
-  background-color: color-mix(
-    in srgb,
-    transparent 20%,
-    var(--color-main-color)
-  );
-  border-radius: 1rem;
+  background-image: conic-gradient(from var(--angle),
+      transparent 70%,
+      var(--conic-color-0),
+      var(--conic-color-1),
+      var(--conic-color-2));
+  background-color: color-mix(in srgb,
+      transparent 20%,
+      var(--bg-app));
+  border-radius: var(--radius-s);
   content: "";
   height: 1.5rem;
   left: 50%;
@@ -1043,18 +1095,14 @@ h6 {
 .checkbox:checked::after {
   animation: 2s spin linear, 2s perc linear;
   animation-fill-mode: none, forwards;
-  background-color: color-mix(
-    in srgb,
-    transparent var(--perc),
-    var(--color-main-color)
-  );
-  background-image: conic-gradient(
-    from var(--angle),
-    transparent 70%,
-    var(--conic-color-0),
-    var(--conic-color-1),
-    var(--conic-color-2)
-  );
+  background-color: color-mix(in srgb,
+      transparent var(--perc),
+      var(--bg-app));
+  background-image: conic-gradient(from var(--angle),
+      transparent 70%,
+      var(--conic-color-0),
+      var(--conic-color-1),
+      var(--conic-color-2));
 }
 
 .checkbox::before {
@@ -1062,23 +1110,21 @@ h6 {
   width: 2.25rem;
   height: 1.5rem;
   transform: translate(0, 0);
-  background-color: color-mix(
-    in srgb,
-    transparent 80%,
-    var(--color-primary-dark)
-  );
-  border-radius: 1rem;
+  background-color: color-mix(in srgb,
+      transparent 80%,
+      var(--color-brand-secondary));
+  border-radius: var(--radius-s);
   transition: transform 0.2s ease-out, background-color 0.2s ease-out;
 }
 
 .checkbox:checked::before {
-  background-color: var(--color-primary-darker);
+  background: var(--color-primary-base);
   transform: translate(1.5rem, 0);
   transition: transform 0.2s ease-in, background-color 0.2s ease-in;
 }
 
 .checkbox:hover::before {
-  background-color: var(--color-primary-darker);
+  background-color: var(--color-brand-tertiary);
 }
 
 .checkbox:disabled {
@@ -1086,16 +1132,18 @@ h6 {
 }
 
 .checkbox--error::after {
-  background-color:  var(--color-danger);
+  background-color: var(--color-danger);
 }
 
 @keyframes perc {
   0% {
     --perc: 20%;
   }
+
   50% {
     --perc: 10%;
   }
+
   100% {
     --perc: 0%;
   }
@@ -1104,35 +1152,37 @@ h6 {
 @keyframes spin {
   0% {
     --angle: 0deg;
-    --conic-color-0: var(--color-light-base);
-    --conic-color-1: var(--color-light-bright);
-    --conic-color-2: var(--color-light-brighter);
+    --conic-color-0: var(--color-fog-100);
+    --conic-color-1: var(--color-200);
+    --conic-color-2: var(--color--300);
   }
+
   99% {
-    --conic-color-0: var(--color-light-base);
-    --conic-color-1: var(--color-light-bright);
-    --conic-color-2: var(--color-light-brighter);
+    --conic-color-0: var(--color-fog-100);
+    --conic-color-1: var(--color-200);
+    --conic-color-2: var(--color--300);
   }
+
   100% {
     --angle: 360deg;
-    --conic-color-0: var(--color-main-color);
-    --conic-color-1: var(--color-main-color);
-    --conic-color-2: var(--color-main-color);
+    --conic-color-0: var(--bg-app);
+    --conic-color-1: var(--bg-app);
+    --conic-color-2: var(--bg-app);
   }
 }
 
 @keyframes spinout {
   from {
     --angle: 360deg;
-    --conic-color-0: var(--color-light-base);
-    --conic-color-1: var(--color-light-bright);
-    --conic-color-2: var(--color-light-brighter);
+    --conic-color-0: var(--color-fog-100);
+    --conic-color-1: var(--color-200);
+    --conic-color-2: var(--color--300);
   }
 
   to {
     --angle: 0deg;
-    --conic-color-0: var(--color-light-base);
-    --conic-color-1: var(--color-light-bright);
-    --conic-color-2: var(--color-light-brighter);
+    --conic-color-0: var(--color-fog-100);
+    --conic-color-1: var(--color-200);
+    --conic-color-2: var(--color--300);
   }
-}
+}