boreal-ui 0.0.31 → 0.0.32

package/dist/core/style.css

@@ -65,7 +65,44 @@
 * $rounding: key-value pairs for component rounding levels
 * $shadow: key-value pairs for shadow levels
 */
+/**
+* -----------------------------------------------------
+* _breakpoints.scss
+* -----------------------------------------------------
+* These constants define the standard device-width breakpoints
+* used in responsive media queries throughout the theme.
+*
+* - $breakpoint-xs: 320px  (Extra small, portrait phones)
+* - $breakpoint-sm: 480px  (Small devices, larger phones)
+* - $breakpoint-md: 768px  (Medium devices, tablets)
+* - $breakpoint-lg: 1024px (Large devices, desktops)
+* - $breakpoint-xl: 1280px (Extra large desktops)
+* - $breakpoint-xxl: 1536px (Widescreens, large monitors)
+*
+* $breakpoints map:
+*  Use this map to loop over breakpoints or access named values.
+*/
+@media (prefers-reduced-motion: reduce) {
+  .accordion_header {
+    transition: none;
+  }
+  .accordion_content {
+    transition: none;
+  }
+}
+@media (hover: none) {
+  .accordion_header:hover {
+    background: none;
+  }
+}
+@media (forced-colors: active) {
+  .accordion_header {
+    border: 1px solid ButtonText;
+    outline-color: Highlight;
+  }
+}
 .accordion {
+  border-radius: 10px;
   margin-bottom: 8px;
   background-color: transparent !important;
   transition: box-shadow 0.3s ease-in-out;
@@ -74,14 +111,13 @@
 .accordion_round-None {
   border-radius: var(--border-radius-none);
 }
+
 .accordion_round-None .accordion_header {
   border-radius: var(--border-radius-none);
 }
-.accordion_round-None .accordion_content {
-  border-bottom-left-radius: var(--border-radius-none);
-  border-bottom-right-radius: var(--border-radius-none);
-}
-.accordion_round-None .accordion_expanded .accordion_content {
+
+.accordion_round-None .accordion_content,
+.accordion_round-None.accordion_expanded .accordion_content {
   border-bottom-left-radius: var(--border-radius-none);
   border-bottom-right-radius: var(--border-radius-none);
 }
@@ -89,14 +125,13 @@
 .accordion_round-Small {
   border-radius: var(--border-radius-sm);
 }
+
 .accordion_round-Small .accordion_header {
   border-radius: var(--border-radius-sm);
 }
-.accordion_round-Small .accordion_content {
-  border-bottom-left-radius: var(--border-radius-sm);
-  border-bottom-right-radius: var(--border-radius-sm);
-}
-.accordion_round-Small .accordion_expanded .accordion_content {
+
+.accordion_round-Small .accordion_content,
+.accordion_round-Small.accordion_expanded .accordion_content {
   border-bottom-left-radius: var(--border-radius-sm);
   border-bottom-right-radius: var(--border-radius-sm);
 }
@@ -104,14 +139,13 @@
 .accordion_round-Medium {
   border-radius: var(--border-radius-md);
 }
+
 .accordion_round-Medium .accordion_header {
   border-radius: var(--border-radius-md);
 }
-.accordion_round-Medium .accordion_content {
-  border-bottom-left-radius: var(--border-radius-md);
-  border-bottom-right-radius: var(--border-radius-md);
-}
-.accordion_round-Medium .accordion_expanded .accordion_content {
+
+.accordion_round-Medium .accordion_content,
+.accordion_round-Medium.accordion_expanded .accordion_content {
   border-bottom-left-radius: var(--border-radius-md);
   border-bottom-right-radius: var(--border-radius-md);
 }
@@ -119,14 +153,13 @@
 .accordion_round-Large {
   border-radius: var(--border-radius-lg);
 }
+
 .accordion_round-Large .accordion_header {
   border-radius: var(--border-radius-lg);
 }
-.accordion_round-Large .accordion_content {
-  border-bottom-left-radius: var(--border-radius-lg);
-  border-bottom-right-radius: var(--border-radius-lg);
-}
-.accordion_round-Large .accordion_expanded .accordion_content {
+
+.accordion_round-Large .accordion_content,
+.accordion_round-Large.accordion_expanded .accordion_content {
   border-bottom-left-radius: var(--border-radius-lg);
   border-bottom-right-radius: var(--border-radius-lg);
 }
@@ -134,14 +167,13 @@
 .accordion_round-Full {
   border-radius: var(--border-radius-full);
 }
+
 .accordion_round-Full .accordion_header {
   border-radius: var(--border-radius-full);
 }
-.accordion_round-Full .accordion_content {
-  border-bottom-left-radius: var(--border-radius-full);
-  border-bottom-right-radius: var(--border-radius-full);
-}
-.accordion_round-Full .accordion_expanded .accordion_content {
+
+.accordion_round-Full .accordion_content,
+.accordion_round-Full.accordion_expanded .accordion_content {
   border-bottom-left-radius: var(--border-radius-full);
   border-bottom-right-radius: var(--border-radius-full);
 }
@@ -177,33 +209,57 @@
   align-items: center;
   min-width: 250px;
   width: 100%;
+  min-height: 44px;
   color: var(--text-color-primary);
   padding: 8px;
-  font-size: 18px;
+  font-size: clamp(14px, 0.9rem + 0.2vw, 18px);
   font-weight: 700;
   cursor: pointer;
   background-color: transparent;
   border: none;
+  border-radius: 10px;
   outline: none;
   transition: background-color 0.3s ease-in-out, border-radius 0.3s ease-in-out;
 }
 .accordion_header:focus-visible {
-  outline: 2px solid var(--text-color-primary);
+  outline: 2px solid var(--focus-outline-color, var(--primary-color));
   outline-offset: 2px;
 }
+@media (width <= 479.98px) {
+  .accordion_header {
+    padding: 4px 8px;
+  }
+}
+@media (min-width: 480px) and (width <= 767.98px) {
+  .accordion_header {
+    padding: 8px 16px;
+  }
+}
+@media (min-width: 1024px) {
+  .accordion_header {
+    padding: 8px 24px;
+  }
+}
 
 .accordion_primary {
   background-color: var(--primary-color);
   color: var(--text-color-primary);
 }
+
 .accordion_primary:hover {
   background-color: var(--primary-color-hover);
 }
-.accordion_primary.accordion_outline {
+
+.accordion_outline.accordion_primary {
   background-color: transparent;
   border: 2px solid var(--primary-color);
 }
-.accordion_primary.accordion_outline:hover {
+@media (width <= 479.98px) {
+  .accordion_outline.accordion_primary {
+    border-width: 1.5px;
+  }
+}
+.accordion_outline.accordion_primary:hover {
   background-color: var(--primary-color-hover);
   color: var(--text-color-primary);
 }
@@ -212,14 +268,21 @@
   background-color: var(--secondary-color);
   color: var(--text-color-primary);
 }
+
 .accordion_secondary:hover {
   background-color: var(--secondary-color-hover);
 }
-.accordion_secondary.accordion_outline {
+
+.accordion_outline.accordion_secondary {
   background-color: transparent;
   border: 2px solid var(--secondary-color);
 }
-.accordion_secondary.accordion_outline:hover {
+@media (width <= 479.98px) {
+  .accordion_outline.accordion_secondary {
+    border-width: 1.5px;
+  }
+}
+.accordion_outline.accordion_secondary:hover {
   background-color: var(--secondary-color-hover);
   color: var(--text-color-secondary);
 }
@@ -228,14 +291,21 @@
   background-color: var(--tertiary-color);
   color: var(--text-color-primary);
 }
+
 .accordion_tertiary:hover {
   background-color: var(--tertiary-color-hover);
 }
-.accordion_tertiary.accordion_outline {
+
+.accordion_outline.accordion_tertiary {
   background-color: transparent;
   border: 2px solid var(--tertiary-color);
 }
-.accordion_tertiary.accordion_outline:hover {
+@media (width <= 479.98px) {
+  .accordion_outline.accordion_tertiary {
+    border-width: 1.5px;
+  }
+}
+.accordion_outline.accordion_tertiary:hover {
   background-color: var(--tertiary-color-hover);
   color: var(--text-color-primary);
 }
@@ -244,14 +314,21 @@
   background-color: var(--quaternary-color);
   color: var(--text-color-primary);
 }
+
 .accordion_quaternary:hover {
   background-color: var(--quaternary-color-hover);
 }
-.accordion_quaternary.accordion_outline {
+
+.accordion_outline.accordion_quaternary {
   background-color: transparent;
   border: 2px solid var(--quaternary-color);
 }
-.accordion_quaternary.accordion_outline:hover {
+@media (width <= 479.98px) {
+  .accordion_outline.accordion_quaternary {
+    border-width: 1.5px;
+  }
+}
+.accordion_outline.accordion_quaternary:hover {
   background-color: var(--quaternary-color-hover);
 }
 
@@ -259,37 +336,44 @@
   background-color: transparent;
   color: var(--text-color-primary);
 }
+
 .accordion_clear:hover {
   background-color: rgba(0, 0, 0, 0.2);
 }
-.accordion_clear.accordion_outline {
+
+.accordion_outline.accordion_clear {
   background-color: transparent;
   border: 2px solid var(--text-color-primary);
 }
-.accordion_clear.accordion_outline:hover {
+@media (width <= 479.98px) {
+  .accordion_outline.accordion_clear {
+    border-width: 1.5px;
+  }
+}
+.accordion_outline.accordion_clear:hover {
   background-color: rgba(0, 0, 0, 0.2);
   color: var(--disabled-color);
 }
 
-.accordion_disabled {
-  background-color: rgba(184, 184, 184, 0.8666666667);
-  cursor: not-allowed;
-  pointer-events: none;
-  opacity: 0.6;
-}
-
 .accordion_success {
   background-color: var(--success-color);
   color: var(--text-color-primary);
 }
+
 .accordion_success:hover {
   background-color: var(--success-color-hover);
 }
-.accordion_success.accordion_outline {
+
+.accordion_outline.accordion_success {
   background-color: transparent;
   border: 2px solid var(--success-color);
 }
-.accordion_success.accordion_outline:hover {
+@media (width <= 479.98px) {
+  .accordion_outline.accordion_success {
+    border-width: 1.5px;
+  }
+}
+.accordion_outline.accordion_success:hover {
   background-color: var(--success-color-hover);
   color: var(--text-color-primary);
 }
@@ -298,14 +382,21 @@
   background-color: var(--error-color);
   color: var(--text-color-primary);
 }
+
 .accordion_error:hover {
   background-color: var(--error-color-hover);
 }
-.accordion_error.accordion_outline {
+
+.accordion_outline.accordion_error {
   background-color: transparent;
   border: 2px solid var(--error-color);
 }
-.accordion_error.accordion_outline:hover {
+@media (width <= 479.98px) {
+  .accordion_outline.accordion_error {
+    border-width: 1.5px;
+  }
+}
+.accordion_outline.accordion_error:hover {
   background-color: var(--error-color-hover);
   color: var(--text-color-primary);
 }
@@ -314,37 +405,99 @@
   background-color: var(--warning-color);
   color: var(--text-color-primary);
 }
+
 .accordion_warning:hover {
   background-color: var(--warning-color-hover);
 }
-.accordion_warning.accordion_outline {
+
+.accordion_outline.accordion_warning {
   background-color: transparent;
   border: 2px solid var(--warning-color);
 }
-.accordion_warning.accordion_outline:hover {
+@media (width <= 479.98px) {
+  .accordion_outline.accordion_warning {
+    border-width: 1.5px;
+  }
+}
+.accordion_outline.accordion_warning:hover {
   background-color: var(--warning-color-hover);
   color: var(--text-color-primary);
 }
 
+.accordion_disabled {
+  background-color: rgba(184, 184, 184, 0.8666666667);
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
 .accordion_content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms ease, padding 0.3s ease-in-out, border-radius 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+  overflow: hidden;
   box-sizing: border-box;
   padding: 0 16px;
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
   background-color: var(--background-color-lighter);
   color: var(--text-color-primary);
-  transition: max-height 0.3s ease, padding 0.3s ease-in-out, border-radius 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  opacity: 0;
+}
+@media (width <= 479.98px) {
+  .accordion_content {
+    padding: 0 8px;
+  }
+}
+@media (min-width: 1024px) {
+  .accordion_content {
+    padding: 0 24px;
+  }
+}
+
+.accordion_content_inner {
+  min-height: 0;
+  overflow: hidden;
 }
 
 .accordion_expanded .accordion_content {
-  max-height: none;
+  grid-template-rows: 1fr;
   opacity: 1;
   padding: 32px 32px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+@media (width <= 479.98px) {
+  .accordion_expanded .accordion_content {
+    padding: 16px 16px;
+  }
+}
+@media (min-width: 1024px) {
+  .accordion_expanded .accordion_content {
+    padding: 32px 35.2px;
+  }
+}
+
+.accordion_content.loaded {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.accordion_content.loading {
+  opacity: 0.5;
+}
+
+.accordion_content_clear {
+  background-color: transparent;
+  border: 1px solid var(--text-color-primary);
+}
+@media (width <= 479.98px) {
+  .accordion_content_clear {
+    border-width: 1px;
+  }
 }
 
 .accordion_title {
   flex-grow: 1;
+  font-size: clamp(14px, 0.9rem + 0.2vw, 18px);
 }
 
 .accordion_icon {
@@ -352,6 +505,16 @@
   margin-right: 10px;
   transition: transform 0.3s ease-in-out;
 }
+@media (width <= 479.98px) {
+  .accordion_icon {
+    margin-right: 4px;
+  }
+}
+@media (min-width: 1024px) {
+  .accordion_icon {
+    margin-right: 8px;
+  }
+}
 
 .accordion_expanded .accordion_icon {
   transform: rotate(180deg);
@@ -359,43 +522,98 @@
 
 .accordion_xs .accordion_header {
   padding: 4px 8px;
-  font-size: 12px;
+  font-size: clamp(14px, 0.9rem + 0.25vw, 12px);
+}
+@media (min-width: 1024px) {
+  .accordion_xs .accordion_header {
+    font-size: calc(12px * 1.05);
+  }
 }
+
 .accordion_xs .accordion_icon {
   font-size: 1rem;
 }
+@media (min-width: 1024px) {
+  .accordion_xs .accordion_icon {
+    font-size: calc(1rem * 1.05);
+  }
+}
 
 .accordion_small .accordion_header {
   padding: 4px 16px;
-  font-size: 14px;
+  font-size: clamp(14px, 0.9rem + 0.25vw, 14px);
+}
+@media (min-width: 1024px) {
+  .accordion_small .accordion_header {
+    font-size: calc(14px * 1.05);
+  }
 }
+
 .accordion_small .accordion_icon {
   font-size: 1.2rem;
 }
+@media (min-width: 1024px) {
+  .accordion_small .accordion_icon {
+    font-size: calc(1.2rem * 1.05);
+  }
+}
 
 .accordion_medium .accordion_header {
   padding: 8px 24px;
-  font-size: 16px;
+  font-size: clamp(14px, 0.9rem + 0.25vw, 16px);
+}
+@media (min-width: 1024px) {
+  .accordion_medium .accordion_header {
+    font-size: calc(16px * 1.05);
+  }
 }
+
 .accordion_medium .accordion_icon {
   font-size: 1.5rem;
 }
+@media (min-width: 1024px) {
+  .accordion_medium .accordion_icon {
+    font-size: calc(1.5rem * 1.05);
+  }
+}
 
 .accordion_large .accordion_header {
   padding: 8px 32px;
-  font-size: 16px;
+  font-size: clamp(14px, 0.9rem + 0.25vw, 16px);
+}
+@media (min-width: 1024px) {
+  .accordion_large .accordion_header {
+    font-size: calc(16px * 1.05);
+  }
 }
+
 .accordion_large .accordion_icon {
   font-size: 1.8rem;
 }
+@media (min-width: 1024px) {
+  .accordion_large .accordion_icon {
+    font-size: calc(1.8rem * 1.05);
+  }
+}
 
 .accordion_xl .accordion_header {
   padding: 8px 32px;
-  font-size: 24px;
+  font-size: clamp(22px, 0.9rem + 0.25vw, 24px);
+}
+@media (min-width: 1024px) {
+  .accordion_xl .accordion_header {
+    font-size: calc(24px * 1.05);
+  }
 }
+
 .accordion_xl .accordion_icon {
   font-size: 2rem;
 }
+@media (min-width: 1024px) {
+  .accordion_xl .accordion_icon {
+    font-size: calc(2rem * 1.05);
+  }
+}
 /**
 * ---------------------------------------------------------------------
 * theme.scss
@@ -887,6 +1105,7 @@
   font-size: 14px;
   font-weight: 700;
   padding: 6px 12px;
+  border: none;
   border-radius: 5px;
   white-space: nowrap;
   transition: all 0.3s ease-in-out;
@@ -1572,7 +1791,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -1585,28 +1804,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -1821,11 +2041,505 @@ a:hover {
 * $rounding: key-value pairs for component rounding levels
 * $shadow: key-value pairs for shadow levels
 */
+/**
+* -----------------------------------------------------
+* _breakpoints.scss
+* -----------------------------------------------------
+* These constants define the standard device-width breakpoints
+* used in responsive media queries throughout the theme.
+*
+* - $breakpoint-xs: 320px  (Extra small, portrait phones)
+* - $breakpoint-sm: 480px  (Small devices, larger phones)
+* - $breakpoint-md: 768px  (Medium devices, tablets)
+* - $breakpoint-lg: 1024px (Large devices, desktops)
+* - $breakpoint-xl: 1280px (Extra large desktops)
+* - $breakpoint-xxl: 1536px (Widescreens, large monitors)
+*
+* $breakpoints map:
+*  Use this map to loop over breakpoints or access named values.
+*/
+/**
+* ---------------------------------------------------------------------
+* globals.scss
+* ---------------------------------------------------------------------
+* Global style definitions and base theme setup for Boreal UI.
+* This file is responsible for setting:
+* 
+* 1. CSS Variables (`:root`) — Derived from SCSS theme tokens
+*    - Automatically syncs SCSS color and font variables to global CSS variables
+*    - Enables theming and dynamic runtime overrides
+*
+* 2. Global Element Styles
+*    - `body`, headings (`h1–h6`), paragraphs, links, and layout defaults
+*    - Applies font, color, spacing, and background rules using theme tokens
+*
+* 3. Scrollbar Styling
+*    - Thin scrollbar with custom thumb and track colors
+*    - Supports hiding scrollbars with `.hideScrollbar` utility
+*
+* 4. Focus Outlines
+*    - Custom `:focus` styles using accessible high-contrast outlines
+*
+* 5. Utility Classes
+*    - `.noScroll`: disables scroll overflow
+*    - `.errorMessage`: standardized error message styling
+*    - `.loadingContainer`: centered layout for loading views
+*    - `.sr_only` and `:global(.sr_only)`: accessibility class for screen-reader-only content
+*
+* 6. Mixin: `visually-hidden`
+*    - Reusable mixin for accessibility-hidden content
+*    - Applied via `.sr_only` and `:global(.sr_only)`
+*
+* Dependencies:
+* - Resets: `modern-css-reset`
+* - SCSS Modules: `theme`, `animations`, `breakpoints`
+* - Sass Color Utilities: `sass:color`
+*
+* Note:
+* All transitions use the theme-defined `$transition-default` for consistency.
+* CSS variables allow dynamic switching between light/dark/custom themes.
+*/
+/**
+* -----------------------------------------------------
+* _animations.scss
+* -----------------------------------------------------
+* This file contains reusable keyframe animations
+* used across the component library for transitions,
+* loaders, and visual enhancements.
+*
+* List of Animations:
+*
+* 1. fade-in
+*    - Smoothly fades in an element by transitioning opacity from 0 to 1.
+*
+* 2. slide-up
+*    - Slides an element upward into view from below while fading in.
+*
+* 3. spin-3d
+*    - Rotates an element in 3D space along both X and Y axes (360°).
+*
+* 4. spin
+*    - Continuously rotates an element clockwise in 2D space.
+*
+* 5. pulse
+*    - Gently scales an element up and down to create a pulsing effect.
+*
+* 6. fade-in-up
+*    - Combines a fade-in with a slight upward motion (used for tooltips, popups).
+*
+* 7. progress-grow
+*    - Expands the width of a progress bar from 0% to 100%.
+*
+* 8. indeterminate-move
+*    - Moves an element from left to right in a loop, used in indeterminate loaders.
+*
+* 9. skeleton-loading
+*    - Creates a sweeping shimmer effect for skeleton loaders.
+*/
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes spin-3d {
+  0% {
+    transform: rotateX(0deg) rotateY(0deg);
+  }
+  100% {
+    transform: rotateX(360deg) rotateY(360deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes progress-grow {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+@keyframes indeterminate-move {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes skeleton-loading {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
+  margin: 0;
+}
+
+ul[role=list], ol[role=list] {
+  list-style: none;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+img, picture {
+  max-width: 100%;
+  display: block;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+:root {
+  /* ================================
+     PRIMARY COLOR PALETTE
+  ================================== */
+  --primary-color: #1c4d3a;
+  --primary-color-light: rgb(107.6, 201.4, 165.0285714286);
+  --primary-color-hover: rgb(14.4, 39.6, 29.8285714286);
+  --primary-text-color-contrast: rgb(0, 0, 0);
+  /* ================================a
+     SECONDARY COLOR PALETTE
+  ================================== */
+  --secondary-color: #6e502e;
+  --secondary-color-light: rgb(210.7692307692, 181.9230769231, 149.2307692308);
+  --secondary-color-hover: rgb(74.0384615385, 53.8461538462, 30.9615384615);
+  --secondary-text-color: rgb(0, 0, 0);
+  /* ================================
+     TERTIARY COLOR PALETTE
+  ================================== */
+  --tertiary-color: #092b1c;
+  --tertiary-color-light: rgb(44.9615384615, 211.0384615385, 137.7692307692);
+  --tertiary-color-hover: rgb(0.1730769231, 0.8269230769, 0.5384615385);
+  --tertiary-text-color: rgb(255, 255, 255);
+  /* ================================
+     QUATERNARY COLOR PALETTE
+  ================================== */
+  --quaternary-color: #a1733a;
+  --quaternary-color-light: rgb(231.9589041096, 213.6849315068, 191.0410958904);
+  --quaternary-color-hover: rgb(123.5068493151, 88.2191780822, 44.4931506849);
+  --quaternary-text-color: rgb(255, 255, 255);
+  /* ================================
+     FEEDBACK COLORS
+  ================================== */
+  --success-color: #51c703;
+  --success-color-hover: rgb(60.5495049505, 148.7574257426, 2.2425742574);
+  --warning-color: #fca505;
+  --warning-color-hover: rgb(203.557312253, 132.7193675889, 2.442687747);
+  --error-color: #f83838;
+  --error-color-hover: rgb(244.4029126214, 8.5970873786, 8.5970873786);
+  --disabled-color: rgba(184, 184, 184, 0.8666666667);
+  /* ================================
+     BACKGROUND COLORS
+  ================================== */
+  --background-color: #222e2e;
+  --background-color-light: rgb(55.675, 75.325, 75.325);
+  --background-color-lighter: rgb(77.35, 104.65, 104.65);
+  --background-color-dark: rgb(12.325, 16.675, 16.675);
+  --background-color-darker: hsl(180, 15%, -4.3137254902%);
+  /* ================================
+     TEXT COLORS
+  ================================== */
+  --text-color-primary: rgb(255, 255, 255);
+  --text-color: rgb(255, 255, 255);
+  --text-color-light: hsl(0, 0%, 120%);
+  --text-color-lighter: hsl(0, 0%, 140%);
+  /* ================================
+     LINK COLORS
+  ================================== */
+  --link-color: #8bb0c7;
+  --link-hover-color: #627e8f;
+  --link-hover-color-primary: rgb(22.4, 61.6, 46.4);
+  --link-hover-color-secondary: rgb(88, 64, 36.8);
+  /* ================================
+     FOCUS & INTERACTION
+  ================================== */
+  --focus-outline-color: var(--text-color-primary);
+  /* ===========================
+     Border Radius (Rounding)
+  =========================== */
+  --border-radius-none: 0;
+  --border-radius-sm: 4px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 16px;
+  --border-radius-full: 9999px;
+  /* ===========================
+     Shadows
+  =========================== */
+  --box-shadow-none: none;
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
+  /* ===========================
+     Inverted Shadows (Light UI)
+  =========================== */
+  --box-shadow-inverted-none: none;
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
+  /* ===========================
+     Divider & Overlay Colors
+  =========================== */
+  --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
+}
+
+body {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
+  color: var(--text-color-primary);
+  background-color: var(--background-color);
+  margin: 0;
+  padding: 0;
+  line-height: 1.5;
+  overflow-x: hidden;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Lora", arial, sans-serif;
+  margin: 0;
+  font-weight: 700;
+  transition: color 0.3s ease-in-out;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 1.3;
+}
+
+h3 {
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+h4 {
+  font-size: 18px;
+  line-height: 1.5;
+}
+
+h5,
+h6 {
+  font-size: 14px;
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+h6 {
+  text-transform: uppercase;
+}
+
+p {
+  font-size: 18px;
+  line-height: 1.6;
+  font-weight: 500;
+  margin-bottom: 16px;
+}
+
+a {
+  color: var(--link-color);
+  font-weight: 700;
+  text-decoration: none;
+  transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
+}
+a:hover {
+  color: var(--link-color-hover);
+  text-decoration: underline;
+}
+
+.noScroll {
+  overflow: hidden;
+}
+
+.errorMessage {
+  color: #f83838;
+  font-size: 14px;
+}
+
+.loadingContainer {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--primary-color) var(--background-color-light);
+}
+
+*:focus {
+  outline: 2px solid var(--focus-outline-color);
+  outline-offset: 2px;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background-color);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--primary-color);
+  border-radius: 6px;
+  border: 3px solid var(--background-color-light);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.hideScrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.hideScrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.sr_only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+:global(.sr_only) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+  .button_loader {
+    animation-duration: 2s;
+  }
+}
+@media (hover: none) {
+  .button:hover {
+    transform: none;
+  }
+}
+@media (forced-colors: active) {
+  .button {
+    border: 1px solid ButtonText;
+    outline-color: Highlight;
+  }
+}
 .button {
+  min-height: 44px;
+  min-width: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
+  flex-wrap: nowrap;
   width: fit-content;
   padding: 10px 20px;
   border: none;
@@ -1842,6 +2556,24 @@ a:hover {
   outline: 2px solid var(--focus-outline-color, var(--primary-color));
   outline-offset: 2px;
 }
+@media (width <= 479.98px) {
+  .button {
+    gap: 4px;
+    padding: 8px 14px;
+  }
+}
+@media (min-width: 480px) and (width <= 767.98px) {
+  .button {
+    gap: 8px;
+    padding: 10px 16px;
+  }
+}
+@media (min-width: 1024px) {
+  .button {
+    gap: 16px;
+    padding: 12px 20px;
+  }
+}
 .button_round-None {
   border-radius: var(--border-radius-none);
 }
@@ -1877,6 +2609,17 @@ a:hover {
   max-width: none;
   display: flex;
 }
+@media (min-width: 1280px) {
+  .button_full-width {
+    max-width: 640px;
+  }
+}
+@media (width <= 479.98px) {
+  .button_auto-full {
+    width: 100%;
+    display: flex;
+  }
+}
 .button_loader {
   width: 1.2rem;
   height: 1.2rem;
@@ -1891,8 +2634,18 @@ a:hover {
   align-items: center;
   margin-top: -0.1em;
 }
+@media (width <= 479.98px) {
+  .button_button-icon {
+    margin-right: 4px;
+  }
+}
+@media (min-width: 1024px) {
+  .button_button-icon {
+    margin-right: 8px;
+  }
+}
 .button_label {
-  font-size: 18px;
+  font-size: clamp(14px, 0.9rem + 0.2vw, 18px);
 }
 .button_clear {
   background-color: transparent;
@@ -1904,22 +2657,32 @@ a:hover {
   border: 2px solid currentcolor;
   box-shadow: none;
 }
+@media (width <= 479.98px) {
+  .button_outline {
+    border-width: 1.5px;
+  }
+}
+@media (min-width: 1024px) {
+  .button_outline {
+    border-width: 2px;
+  }
+}
 .button_primary {
   background-color: var(--primary-color);
   color: var(--text-color-primary);
 }
-.button_primary_primary:hover {
+.button_primary:hover {
   background-color: var(--primary-color-hover);
 }
-.button_primary_primary .loader {
+.button_primary .button_loader {
   border-top-color: var(--text-color-primary);
 }
-.button_primary.button_outline {
+.button_outline.button_primary {
   background-color: transparent;
   color: var(--text-color-primary);
   border-color: var(--primary-color);
 }
-.button_primary.button_outline:hover {
+.button_outline.button_primary:hover {
   border-color: var(--primary-color-hover);
   color: var(--text-color-primary);
   background-color: var(--primary-color);
@@ -1928,18 +2691,18 @@ a:hover {
   background-color: var(--secondary-color);
   color: var(--text-color-secondary);
 }
-.button_secondary_secondary:hover {
+.button_secondary:hover {
   background-color: var(--secondary-color-hover);
 }
-.button_secondary_secondary .loader {
+.button_secondary .button_loader {
   border-top-color: var(--text-color-secondary);
 }
-.button_secondary.button_outline {
+.button_outline.button_secondary {
   background-color: transparent;
   color: var(--text-color-secondary);
   border-color: var(--secondary-color);
 }
-.button_secondary.button_outline:hover {
+.button_outline.button_secondary:hover {
   border-color: var(--secondary-color-hover);
   color: var(--text-color-secondary);
   background-color: var(--secondary-color);
@@ -1948,18 +2711,18 @@ a:hover {
   background-color: var(--tertiary-color);
   color: var(--text-color-primary);
 }
-.button_tertiary_tertiary:hover {
+.button_tertiary:hover {
   background-color: var(--tertiary-color-hover);
 }
-.button_tertiary_tertiary .loader {
+.button_tertiary .button_loader {
   border-top-color: var(--text-color-primary);
 }
-.button_tertiary.button_outline {
+.button_outline.button_tertiary {
   background-color: transparent;
   color: var(--text-color-primary);
   border-color: var(--tertiary-color);
 }
-.button_tertiary.button_outline:hover {
+.button_outline.button_tertiary:hover {
   border-color: var(--tertiary-color-hover);
   color: var(--text-color-primary);
   background-color: var(--tertiary-color);
@@ -1968,18 +2731,18 @@ a:hover {
   background-color: var(--quaternary-color);
   color: var(--text-color-primary);
 }
-.button_quaternary_quaternary:hover {
+.button_quaternary:hover {
   background-color: var(--quaternary-color-hover);
 }
-.button_quaternary_quaternary .loader {
+.button_quaternary .button_loader {
   border-top-color: var(--text-color-primary);
 }
-.button_quaternary.button_outline {
+.button_outline.button_quaternary {
   background-color: transparent;
   color: var(--text-color-primary);
   border-color: var(--quaternary-color);
 }
-.button_quaternary.button_outline:hover {
+.button_outline.button_quaternary:hover {
   border-color: var(--quaternary-color-hover);
   color: var(--text-color-primary);
   background-color: var(--quaternary-color);
@@ -1988,18 +2751,18 @@ a:hover {
   background-color: transparent;
   color: var(--text-color-primary);
 }
-.button_clear_clear:hover {
+.button_clear:hover {
   background-color: rgba(0, 0, 0, 0.2);
 }
-.button_clear_clear .loader {
+.button_clear .button_loader {
   border-top-color: var(--text-color-primary);
 }
-.button_clear.button_outline {
+.button_outline.button_clear {
   background-color: transparent;
   color: var(--text-color-primary);
   border-color: var(--text-color-primary);
 }
-.button_clear.button_outline:hover {
+.button_outline.button_clear:hover {
   border-color: rgba(0, 0, 0, 0.2);
   color: var(--text-color-primary);
   background-color: transparent;
@@ -2008,18 +2771,18 @@ a:hover {
   background-color: var(--success-color);
   color: var(--text-color-primary);
 }
-.button_success_success:hover {
+.button_success:hover {
   background-color: var(--success-color-hover);
 }
-.button_success_success .loader {
+.button_success .button_loader {
   border-top-color: var(--text-color-primary);
 }
-.button_success.button_outline {
+.button_outline.button_success {
   background-color: transparent;
   color: var(--text-color-primary);
   border-color: var(--success-color);
 }
-.button_success.button_outline:hover {
+.button_outline.button_success:hover {
   border-color: var(--success-color-hover);
   color: var(--text-color-primary);
   background-color: var(--success-color);
@@ -2028,18 +2791,18 @@ a:hover {
   background-color: var(--error-color);
   color: var(--text-color-primary);
 }
-.button_error_error:hover {
+.button_error:hover {
   background-color: var(--error-color-hover);
 }
-.button_error_error .loader {
+.button_error .button_loader {
   border-top-color: var(--text-color-primary);
 }
-.button_error.button_outline {
+.button_outline.button_error {
   background-color: transparent;
   color: var(--text-color-primary);
   border-color: var(--error-color);
 }
-.button_error.button_outline:hover {
+.button_outline.button_error:hover {
   border-color: var(--error-color-hover);
   color: var(--text-color-primary);
   background-color: var(--error-color);
@@ -2048,18 +2811,18 @@ a:hover {
   background-color: var(--warning-color);
   color: var(--text-color-primary);
 }
-.button_warning_warning:hover {
+.button_warning:hover {
   background-color: var(--warning-color-hover);
 }
-.button_warning_warning .loader {
+.button_warning .button_loader {
   border-top-color: var(--text-color-primary);
 }
-.button_warning.button_outline {
+.button_outline.button_warning {
   background-color: transparent;
   color: var(--text-color-primary);
   border-color: var(--warning-color);
 }
-.button_warning.button_outline:hover {
+.button_outline.button_warning:hover {
   border-color: var(--warning-color-hover);
   color: var(--text-color-primary);
   background-color: var(--warning-color);
@@ -2072,60 +2835,165 @@ a:hover {
   opacity: 0.6;
   box-shadow: none;
 }
-.button_disabled_outline {
+.button_disabled.button_outline {
   border-color: rgba(184, 184, 184, 0.8666666667);
   color: rgba(184, 184, 184, 0.8666666667);
 }
 .button_xs {
   padding: 4px 8px;
 }
+@media (width <= 479.98px) {
+  .button_xs {
+    padding: max(8px, 0.6em) 10px;
+  }
+}
+@media (min-width: 1280px) {
+  .button_xs {
+    padding: 4px 8.8px 4px 8.8px;
+  }
+}
 .button_xs .button_label {
-  font-size: 12px;
+  font-size: clamp(14px, 0.9rem + 0.25vw, 12px);
+}
+@media (min-width: 1024px) {
+  .button_xs .button_label {
+    font-size: calc(12px * 1.05);
+  }
 }
 .button_xs .button_icon {
   width: 1rem;
   height: 1rem;
 }
+@media (min-width: 1024px) {
+  .button_xs .button_icon {
+    width: 1.05rem;
+    height: 1.05rem;
+  }
+}
 .button_small {
   padding: 6px 10px;
 }
+@media (width <= 479.98px) {
+  .button_small {
+    padding: max(8px, 0.6em) 10px;
+  }
+}
+@media (min-width: 1280px) {
+  .button_small {
+    padding: 6px 11px 6px 11px;
+  }
+}
 .button_small .button_label {
-  font-size: 14px;
+  font-size: clamp(14px, 0.9rem + 0.25vw, 14px);
+}
+@media (min-width: 1024px) {
+  .button_small .button_label {
+    font-size: calc(14px * 1.05);
+  }
 }
 .button_small .button_icon {
   width: 1rem;
   height: 1rem;
 }
+@media (min-width: 1024px) {
+  .button_small .button_icon {
+    width: 1.05rem;
+    height: 1.05rem;
+  }
+}
 .button_medium {
   padding: 6px 12px;
 }
+@media (width <= 479.98px) {
+  .button_medium {
+    padding: max(8px, 0.6em) 10px;
+  }
+}
+@media (min-width: 1280px) {
+  .button_medium {
+    padding: 6px 13.2px 6px 13.2px;
+  }
+}
 .button_medium .button_label {
-  font-size: 16px;
+  font-size: clamp(14px, 0.9rem + 0.25vw, 16px);
+}
+@media (min-width: 1024px) {
+  .button_medium .button_label {
+    font-size: calc(16px * 1.05);
+  }
 }
 .button_medium .button_icon {
   width: 1.2rem;
   height: 1.2rem;
 }
+@media (min-width: 1024px) {
+  .button_medium .button_icon {
+    width: 1.26rem;
+    height: 1.26rem;
+  }
+}
 .button_large {
   padding: 8px 16px;
 }
+@media (width <= 479.98px) {
+  .button_large {
+    padding: max(8px, 0.6em) 10px;
+  }
+}
+@media (min-width: 1280px) {
+  .button_large {
+    padding: 8px 17.6px 8px 17.6px;
+  }
+}
 .button_large .button_label {
-  font-size: 24px;
+  font-size: clamp(22px, 0.9rem + 0.25vw, 24px);
+}
+@media (min-width: 1024px) {
+  .button_large .button_label {
+    font-size: calc(24px * 1.05);
+  }
 }
 .button_large .button_icon {
   width: 1.3rem;
   height: 1.3rem;
 }
+@media (min-width: 1024px) {
+  .button_large .button_icon {
+    width: 1.365rem;
+    height: 1.365rem;
+  }
+}
 .button_xl {
   padding: 10px 18px;
 }
+@media (width <= 479.98px) {
+  .button_xl {
+    padding: max(8px, 0.6em) 10px;
+  }
+}
+@media (min-width: 1280px) {
+  .button_xl {
+    padding: 10px 19.8px 10px 19.8px;
+  }
+}
 .button_xl .button_label {
-  font-size: 32px;
+  font-size: clamp(30px, 0.9rem + 0.25vw, 32px);
+}
+@media (min-width: 1024px) {
+  .button_xl .button_label {
+    font-size: calc(32px * 1.05);
+  }
 }
 .button_xl .button_icon {
   width: 1.5rem;
   height: 1.5rem;
 }
+@media (min-width: 1024px) {
+  .button_xl .button_icon {
+    width: 1.575rem;
+    height: 1.575rem;
+  }
+}
 /**
 * ---------------------------------------------------------------------
 * theme.scss
@@ -3182,7 +4050,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -3195,28 +4063,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -3775,7 +4644,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -3788,28 +4657,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -4706,7 +5576,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -4719,28 +5589,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -5543,7 +6414,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -5556,28 +6427,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -6293,7 +7165,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -6306,28 +7178,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -6946,7 +7819,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -6959,28 +7832,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -7594,7 +8468,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -7607,28 +8481,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -8369,7 +9244,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -8382,28 +9257,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -9132,7 +10008,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -9145,28 +10021,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -9348,6 +10225,9 @@ a:hover {
 .data_table_wrapper .data_table .data_table_header_sortable {
   cursor: pointer;
 }
+.data_table_wrapper .data_table .data_table_header_sortable:focus {
+  outline-offset: 0.2px;
+}
 .data_table_wrapper .data_table_sort_icon {
   margin-left: 2px;
   font-size: 0.9em;
@@ -9362,6 +10242,9 @@ a:hover {
 .data_table_wrapper .data_table_row_clickable:hover:nth-child(even) {
   background-color: var(--background-color);
 }
+.data_table_wrapper .data_table_row_clickable:focus {
+  outline-offset: 0.2px;
+}
 .data_table_wrapper .data_table_row_striped:nth-child(even) {
   background-color: var(--background-color-darker);
 }
@@ -9868,7 +10751,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -9881,28 +10764,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -10104,6 +10988,10 @@ a:hover {
   transition: color 0.2s ease-in-out;
   color: var(--text-color-primary);
   line-height: 1em;
+  background-color: transparent;
+  border: none;
+  padding: 0px;
+  margin: 0px;
 }
 .datetime_picker_primary .datetime_picker_input {
   background-color: var(--primary-color);
@@ -10642,7 +11530,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -10655,28 +11543,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -11267,7 +12156,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -11280,28 +12169,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -11932,7 +12822,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -11945,28 +12835,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -12685,7 +13576,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -12698,28 +13589,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -13324,7 +14216,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -13337,28 +14229,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -13973,7 +14866,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -13986,28 +14879,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -14664,7 +15558,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -14677,28 +15571,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -15391,7 +16286,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -15404,28 +16299,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -16122,7 +17018,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -16135,28 +17031,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -16745,7 +17642,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -16758,28 +17655,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -17351,7 +18249,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -17364,28 +18262,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -18134,7 +19033,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -18147,28 +19046,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -18756,7 +19656,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -18769,28 +19669,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -18942,11 +19843,12 @@ a:hover {
 
 .nav {
   position: fixed;
+  left: 50%;
+  transform: translateX(-45%);
+  flex-direction: column;
+  justify-content: center;
   top: 10px;
   left: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   gap: 10px;
   background-color: transparent;
   transition: 0.3s ease-in-out;
@@ -19027,6 +19929,24 @@ a:hover {
   color: var(--secondary-color-darker);
   font-weight: bold;
 }
+.nav_list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  top: 10px;
+  left: 10px;
+  gap: 1em;
+  list-style: none;
+}
+@media (width <= 1250px) {
+  .nav_list {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: row;
+    justify-content: center;
+  }
+}
 .nav_item {
   display: flex;
   flex-direction: column;
@@ -19466,7 +20386,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -19479,28 +20399,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -20117,7 +21038,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -20130,28 +21051,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -20305,8 +21227,8 @@ a:hover {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
-  max-width: 90%;
-  margin: 24px;
+  width: fit-content;
+  margin: auto;
   justify-content: center;
   align-items: center;
 }
@@ -20319,6 +21241,10 @@ a:hover {
 .pagination_controls {
   display: flex;
   align-items: center;
+  justify-content: center;
+  list-style: none;
+  margin: auto;
+  padding: 0px;
 }
 @media (width <= 480px) {
   .pagination_controls {
@@ -20336,6 +21262,7 @@ a:hover {
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
+  list-style-type: none;
 }
 @media (width <= 480px) {
   .pagination_buttons {
@@ -20706,7 +21633,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -20719,28 +21646,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -20899,6 +21827,7 @@ a:hover {
 .popover_trigger {
   cursor: pointer;
   outline: none;
+  border: none;
 }
 .popover_trigger:focus-visible {
   outline: 2px solid var(--primary-color);
@@ -21374,7 +22303,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -21387,28 +22316,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -22078,7 +23008,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -22091,28 +23021,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -22426,6 +23357,8 @@ a:hover {
   cursor: pointer;
   background-color: transparent;
   border: none;
+  padding: 0px;
+  margin: 0px;
 }
 .scrollToTop_icon {
   font-size: 3em;
@@ -22435,34 +23368,34 @@ a:hover {
   width: 100%;
   height: 100%;
 }
-.scrollToTop_round-None {
+.scrollToTop_round-None .button_icon {
   border-radius: var(--border-radius-none);
 }
-.scrollToTop_round-Small {
+.scrollToTop_round-Small .button_icon {
   border-radius: var(--border-radius-sm);
 }
-.scrollToTop_round-Medium {
+.scrollToTop_round-Medium .button_icon {
   border-radius: var(--border-radius-md);
 }
-.scrollToTop_round-Large {
+.scrollToTop_round-Large .button_icon {
   border-radius: var(--border-radius-lg);
 }
-.scrollToTop_round-Full {
+.scrollToTop_round-Full .button_icon {
   border-radius: var(--border-radius-full);
 }
-.scrollToTop_shadow-None {
+.scrollToTop_shadow-None .button_icon {
   box-shadow: var(--box-shadow-none);
 }
-.scrollToTop_shadow-Light {
+.scrollToTop_shadow-Light .button_icon {
   box-shadow: var(--box-shadow-light);
 }
-.scrollToTop_shadow-Medium {
+.scrollToTop_shadow-Medium .button_icon {
   box-shadow: var(--box-shadow-medium);
 }
-.scrollToTop_shadow-Strong {
+.scrollToTop_shadow-Strong .button_icon {
   box-shadow: var(--box-shadow-heavy);
 }
-.scrollToTop_shadow-Intense {
+.scrollToTop_shadow-Intense .button_icon {
   box-shadow: var(--box-shadow-intense);
 }
 @media (width <= 480px) {
@@ -22823,7 +23756,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -22836,28 +23769,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -23008,7 +23942,6 @@ a:hover {
 }
 
 .sidebar {
-  position: relative;
   width: 240px;
   height: 100vh;
   background-color: var(--background-color-light);
@@ -23056,7 +23989,7 @@ a:hover {
   border: 2px solid var(--primary-color);
 }
 .sidebar_clear.sidebar_primary .sidebar_active {
-  border: 2px solid var(--primary-color);
+  background-color: transparent;
 }
 .sidebar_secondary .sidebar_active {
   background-color: var(--secondary-color);
@@ -23066,7 +23999,7 @@ a:hover {
   border: 2px solid var(--secondary-color);
 }
 .sidebar_clear.sidebar_secondary .sidebar_active {
-  border: 2px solid var(--secondary-color);
+  background-color: transparent;
 }
 .sidebar_tertiary .sidebar_active {
   background-color: var(--tertiary-color);
@@ -23076,7 +24009,7 @@ a:hover {
   border: 2px solid var(--tertiary-color);
 }
 .sidebar_clear.sidebar_tertiary .sidebar_active {
-  border: 2px solid var(--tertiary-color);
+  background-color: transparent;
 }
 .sidebar_quaternary .sidebar_active {
   background-color: var(--quaternary-color);
@@ -23086,7 +24019,7 @@ a:hover {
   border: 2px solid var(--quaternary-color);
 }
 .sidebar_clear.sidebar_quaternary .sidebar_active {
-  border: 2px solid var(--quaternary-color);
+  background-color: transparent;
 }
 .sidebar_clear .sidebar_active {
   background-color: transparent;
@@ -23098,7 +24031,7 @@ a:hover {
   border: 2px solid var(--text-color-primary);
 }
 .sidebar_clear.sidebar_clear .sidebar_active {
-  border: 2px solid var(--text-color-primary);
+  background-color: transparent;
 }
 .sidebar_success .sidebar_active {
   background-color: var(--success-color);
@@ -23157,7 +24090,6 @@ a:hover {
   align-items: center;
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border-radius: var(--border-radius-sm);
   color: var(--text-color-secondary);
   text-decoration: none;
   background: none;
@@ -23173,7 +24105,7 @@ a:hover {
 }
 .sidebar_link:focus {
   outline: 2px solid var(--text-color-primary);
-  outline-offset: 2px;
+  outline-offset: 0.2px;
 }
 
 .sidebar_active {
@@ -23181,7 +24113,7 @@ a:hover {
   letter-spacing: 0.1em;
 }
 
-.sidebar_child-link {
+.sidebar_child_link {
   font-size: 0.9rem;
 }
 
@@ -23199,7 +24131,7 @@ a:hover {
   height: 1em;
 }
 
-.sidebar_chevronOpen {
+.sidebar_chevron_open {
   transform: rotate(180deg);
 }
 
@@ -23209,14 +24141,18 @@ a:hover {
   transition: max-height 0.25s ease;
 }
 
-.sidebar_child-list {
+.sidebar_submenu_open {
+  max-height: max-content;
+}
+
+.sidebar_child_list {
   border-left: 3px solid var(--background-color-darker);
   margin: 0.25rem 0;
 }
 
 .sidebar_footer {
   position: absolute;
-  bottom: 0px;
+  bottom: 0;
   margin-top: auto;
   width: 100%;
   padding: 1rem;
@@ -23226,19 +24162,19 @@ a:hover {
   gap: 0.5rem;
 }
 
-.sidebar_footer-link {
+.sidebar_footer_link {
   font-size: 0.85rem;
   text-decoration: none;
 }
-.sidebar_footer-link:hover {
+.sidebar_footer_link:hover {
   color: var(--text-color-primary);
 }
-.sidebar_footer-link:focus {
+.sidebar_footer_link:focus {
   outline: 2px solid var(--text-color-primary);
-  outline-offset: 2px;
+  outline-offset: 1.2px;
 }
 
-.sidebar_footer-version {
+.sidebar_footer_version {
   font-size: 0.75rem;
   opacity: 0.7;
   margin-top: 0.5rem;
@@ -23596,7 +24532,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -23609,28 +24545,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -24311,7 +25248,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -24324,28 +25261,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -24950,7 +25888,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -24963,28 +25901,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -25605,7 +26544,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -25618,28 +26557,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -26386,7 +27326,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -26399,28 +27339,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -27295,7 +28236,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -27308,28 +28249,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -28266,7 +29208,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -28279,28 +29221,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -28921,7 +29864,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -28934,28 +29877,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;
@@ -29772,7 +30716,7 @@ input, button, textarea, select {
   /* ================================
      FOCUS & INTERACTION
   ================================== */
-  --focus-outline-color: #1c4d3a;
+  --focus-outline-color: var(--text-color-primary);
   /* ===========================
      Border Radius (Rounding)
   =========================== */
@@ -29785,28 +30729,29 @@ input, button, textarea, select {
      Shadows
   =========================== */
   --box-shadow-none: none;
-  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-heavy: 0 6px 12px rgba(0, 0, 0, 0.3);
-  --box-shadow-intense: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --box-shadow-light: 0 2px 4px rgb(0 0 0 / 10%);
+  --box-shadow-medium: 0 4px 8px rgb(0 0 0 / 20%);
+  --box-shadow-heavy: 0 6px 12px rgb(0 0 0 / 30%);
+  --box-shadow-intense: 0 8px 16px rgb(0 0 0 / 40%);
   /* ===========================
      Inverted Shadows (Light UI)
   =========================== */
   --box-shadow-inverted-none: none;
-  --box-shadow-inverted-light: 0 2px 4px rgba(255, 255, 255, 0.05);
-  --box-shadow-inverted-medium: 0 4px 8px rgba(255, 255, 255, 0.08);
-  --box-shadow-inverted-strong: 0 6px 12px rgba(255, 255, 255, 0.12);
-  --box-shadow-inverted-intense: 0 8px 16px rgba(255, 255, 255, 0.2);
+  --box-shadow-inverted-light: 0 2px 4px rgb(255 255 255 / 5%);
+  --box-shadow-inverted-medium: 0 4px 8px rgb(255 255 255 / 8%);
+  --box-shadow-inverted-strong: 0 6px 12px rgb(255 255 255 / 12%);
+  --box-shadow-inverted-intense: 0 8px 16px rgb(255 255 255 / 20%);
   /* ===========================
      Divider & Overlay Colors
   =========================== */
   --divider-color: rgb(99.025, 133.975, 133.975); /* subtle dividers */
-  --overlay-color: rgba(0, 0, 0, 0.5); /* for modals or overlays */
+  --overlay-color: rgb(0 0 0 / 50%); /* for modals or overlays */
+  --font-family-primary: Lora, arial, sans-serif;
 }
 
 body {
-  font-family: "Lora", arial, sans-serif;
-  font-size: 18px;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-base);
   color: var(--text-color-primary);
   background-color: var(--background-color);
   margin: 0;