@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans");/* ========================================
   LOGIN TOKENS (LIGHT DEFAULT)
======================================== */

:root {
  /* BACKGROUNDS */
  --login-left-bg: #ffffff;
  --login-right-bg: #ededed;

  /* TEXT COLORS */
  --login-text-title: #0d0d0d;
  --login-text-subtitle: #949494;
  --login-text-body: #0d0d0d;

  /* TYPOGRAPHY SCALE (Text L) */
  --text-l-size: 16px;
  --text-l-line: 24px;
  --text-l-weight: 400;

  /* TYPOGRAPHY SCALE (H3) */
  --h3-size: 32px;
  --h3-line: 34px;
  --h3-weight: 700;

  /* TREND */
  --trend-bg: rgba(0, 0, 0, 0.08);
  --trend-color: #5c5c5c;

  /* CAROUSEL */
  --login-carousel-dot-active: #5c5c5c;
}

/* ========================================
   DARK THEME
======================================== */

[data-theme='dark'] {
  --login-left-bg: #171923;
  --login-right-bg: #0d0d0d;

  --login-text-title: #ffffff;
  --login-text-subtitle: #949494;
  --login-text-body: #ffffff;

  --select-border-color: #2d3748;

  /* TREND */
  --trend-bg: rgba(255, 255, 255, 0.08);
  --trend-color: #a0a0a0;

  /* CAROUSEL */
  --login-carousel-dot-active: #a0a0a0;

  /* Input specific for dark mode from Figma */
  --login-input-bg: #2a2d3d;
}

/* ACTIONS (Side-by-side buttons) */
.login .login__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.login .register__actions {
  grid-template-columns: 1fr;
}

.login .register__terms {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--login-text-subtitle);
  margin: 0;
}

.login .register__terms::before,
.login .register__terms::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--select-border-color, #ededed);
}

.login .register__terms::before {
  margin-right: 16px;
}

.login .register__terms::after {
  margin-left: 16px;
}

.login .register__remember-invitation {
  text-align: center;
  color: var(--login-text-subtitle);
  font-size: 12px;
  line-height: 16px;
  margin: -24px 0 0 0;
}

/* ========================================
   ICONS / IMAGES
======================================== */

.login .login__logo,
.login .google__logo,
.login .microsoft__logo,
.login .login__image {
  filter: none;
}

.login .google__logo,
.login .microsoft__logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.login .login__forgot-img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

/* IMPORTANT:
   Carousel image NOT inverted (keeps real image colors)
*/
[data-theme='dark'] .login__image {
  filter: none;
}

/* ========================================
   RESET
======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background: transparent;
  color: var(--login-text-body);
  font-family: 'IBM Plex Sans', sans-serif;
}

/* ========================================
   LAYOUT
======================================== */

.login {
  width: 100%;
  height: 100dvh;

  display: grid;
  /* Proporciones exactas de Figma: 766px / 674px */
  grid-template-columns: 53.2% 46.8%;

  overflow: hidden;
  color: var(--login-text-body);
}

/* ========================================
   LEFT
======================================== */

.login .login__left {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: clamp(32px, 5vw, 120px);

  background: var(--login-left-bg);
  min-width: 0;
  max-width: 100%;
}

.login .login__content {
  width: 100%;
  max-width: 520px;

  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.login .login__logo {
  width: clamp(140px, 14vw, 220px);
  height: auto;
}

.login .login__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* TITLE (H3) */
.login h1.login__title {
  margin: 0;

  color: var(--login-text-title);

  font-family: 'IBM Plex Sans', sans-serif;

  font-size: var(--h3-size);
  font-style: normal;
  font-weight: var(--h3-weight);
  line-height: var(--h3-line);

  font-feature-settings:
    'liga' off,
    'clig' off;
}

/* SUBTITLE (Text L) */
.login p.login__subtitle {
  margin: 0;

  color: var(--login-text-subtitle);

  font-size: var(--text-l-size);
  font-style: normal;
  font-weight: var(--text-l-weight);
  line-height: var(--text-l-line);

  font-feature-settings:
    'liga' off,
    'clig' off;
}

/* FORM */
.login .login__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.login .register__password-container {
  display: grid;
  grid-template-columns: 1fr 157px;
  gap: 20px;
  align-items: stretch;
}

.login .register__password-inputs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.login .password-requirements {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  gap: 6px;
  border-radius: 4px;
  background: var(--Grey-Grey-300, #ededed);
  height: 100%;
}

[data-theme='dark'] .login .password-requirements {
  background: #2a2d3d;
}

.login .password-requirements__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition: all 0.25s ease;
}

.login .password-requirements__icon {
  display: flex;
  align-items: center;
  margin-top: 2px;
  flex-shrink: 0;
  color: #949494;
}

[data-theme='dark'] .login .password-requirements__icon {
  color: #5c5c5c;
}

.login .password-requirements__item--met .password-requirements__icon {
  color: #14be6c;
}

.login .password-requirements__text-wrap {
  display: flex;
  flex-direction: column;
}

.login .password-requirements__text {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--login-text-body);
}

/* FORGOT PASSWORD */
.login .login__forgot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  background: transparent;
  border: none;

  padding: 0;
  margin: -8px 0 0;

  cursor: pointer;
  text-decoration: none;
}

.login .login__forgot:hover .login__forgot-text {
  text-decoration: underline;
}

.login .login__forgot-icon {
  width: 14px;
  height: 14px;
  color: var(--login-text-subtitle, #949494);
  display: block;
}

.login .login__forgot-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--login-text-subtitle, #949494);
  line-height: 19px;
  display: block;
}

/* DIVIDER */
.login .login__divider {
  display: flex;
  align-items: center;
  gap: 16px;
}

.login .login__divider span {
  flex: 1;
  height: 1px;
  background: var(--select-border-color, #ededed);
}

.login .login__divider p {
  margin: 0;
  color: var(--login-text-subtitle);
  white-space: nowrap;
}

/* REGISTER DIVIDER */
.login .register__divider {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* SOCIALS */
.login .login__socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.login .login__socials button,
.login .login__socials > *,
.login .login__socials span,
.login .login__socials p {
  white-space: nowrap !important;
  font-size: 13.5px !important;
}

.login .login__socials button,
.login .login__socials > * {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* ========================================
   RIGHT
======================================== */

.login .login__right {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: clamp(24px, 3vw, 48px);

  background: var(--login-right-bg);
}

/* CARD */
.login .login__card {
  width: 100%;
  max-width: 680px;
  height: 100%;

  display: flex;
  flex-direction: column;

  justify-content: space-between;
  align-items: center;
}

/* MAIN */
.login .login__card-main {
  flex: 1;
  width: 100%;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  gap: clamp(18px, 1.6vw, 32px);
}

/* IMAGE */
.login .login__image-wrapper {
  width: 100%;
  max-width: 560px;

  min-height: 300px;
  max-height: 340px;

  margin-bottom: 24px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.login .login__image {
  max-width: 520px;
  max-height: 360px;

  width: auto;
  height: auto;

  object-fit: contain;
}

/* INFO */
.login .login__info {
  width: 100%;
  max-width: 560px;

  display: flex;
  flex-direction: column;
}

.login .login__eyebrow {
  margin-bottom: 4px;

  color: var(--login-text-subtitle);

  font-size: var(--text-l-size);
  font-style: normal;
  font-weight: var(--text-l-weight);
  line-height: var(--text-l-line);

  font-feature-settings:
    'liga' off,
    'clig' off;
}

.login h2.login__info-title {
  margin: 0 0 14px;
  color: var(--login-text-title);

  /* Explicitly override host h2 styles from GlobalStyle */
  font-size: var(--h3-size) !important;
  font-weight: var(--h3-weight) !important;
  line-height: var(--h3-line) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* LIST */
.login .login__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login .login__list li {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: var(--text-l-size);
  line-height: var(--text-l-line);
}

/* TREND */
.login .login__trend {
  width: 28px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  font-size: 14px;
  font-weight: 700;

  background: var(--trend-bg);
  color: var(--trend-color);
}

/* CAROUSEL */
.login .login__carousel {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 12px;
  padding-bottom: 8px;
}

.login .login__dot {
  width: 10px;
  height: 10px;

  border: none;
  border-radius: 999px;

  background: var(--select-border-color);
  opacity: 0.5;

  cursor: pointer;

  transition: all 0.25s ease;
}

.login .login__dot--active {
  width: 32px;
  opacity: 1;
  background: var(--login-carousel-dot-active);
}

/* ANIMATION */
.login .login__fade {
  animation: fadeSlide 0.35s ease;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1200px) {
  body {
    overflow-y: auto;
  }

  .login {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .login .login__right {
    display: none;
  }
}

/* Para móviles (hasta 767px) */
@media (max-width: 767px) {
  .login .login__left {
    padding: 24px 16px;
  }

  .login .login__content {
    gap: 24px;
  }

  .login .login__actions,
  .login .login__socials {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .login .register__password-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Evita que componentes como <Input /> o <Button /> de AntD rompan el ancho disponible */
  .login .login__form > *,
  .login .login__actions > *,
  .login .login__socials > * {
    width: 100%;
    max-width: 100%;
  }
}

/* Para móviles pequeños (393px de ancho o menos) */
@media (max-width: 393px) {
  .login .password-requirements {
    display: none !important;
  }
}


/* =========================================================
   DESIGN TOKENS (Primitive & Base Variables)
   ========================================================= */

:root {
  /* --- 1. TYPOGRAPHY --- */
  --font-family-base: "IBM Plex Sans", sans-serif;

  /* Font Sizes Primitive Scale */
  --font-size-3xs: 9px;
  --font-size-2xs: 10px;
  --font-size-2xs-11: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-sm-18: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-4xl: 58px;

  /* Font Weights Primitive Scale */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights Primitive Scale */
  --line-height-2xs: 12px;
  --line-height-2xs-13: 13px;
  --line-height-xs: 16px;
  --line-height-xs-17: 17px;
  --line-height-sm-18: 18px;
  --line-height-sm-19: 19px;
  --line-height-sm: 20px;
  --line-height-md: 24px;
  --line-height-md-26: 26px;
  --line-height-lg: 28px;
  --line-height-lg-30: 30px;
  --line-height-lg-34: 34px;
  --line-height-xl: 32px;
  --line-height-xl-50: 50px;
  --line-height-2xl: 40px;
  --line-height-2xl-80: 80px;

  /* Letter Spacing Primitive Scale */
  --letter-spacing-normal: normal;
  --letter-spacing-overline: 1.5px;
  --letter-spacing-label-l: 3.08px;
  --letter-spacing-label-m: 2.42px;
  --letter-spacing-label-s: 1.8px;

  /* --- UNIFIED BASIC COLOR PRIMITIVES --- */
  --color-white-val: #FFFFFF;
  --color-overlay-val: #3F3E5D;
  --color-dark-overlay-val: #29293D;
  --color-notification-val: #D0345C;
  --color-emergency: #171923;
  --color-neutral-800-val: #212330;
  --color-critical: #EE084D;
  --color-critical-bg-light: #F9A9C1;
  --color-critical-bg-dark: #821138;
  --color-high: #FF891C;
  --color-high-bg-light: #FFC48D;
  --color-high-bg-dark: #8B5120;
  --color-medium: #FFE81C;
  --color-medium-bg-light: #FFF38D;
  --color-medium-bg-dark: #837713;
  --color-low: #FFB9D2;
  --color-low-bg-light: #FFDCE9;
  --color-low-bg-dark: #83606E;
  --color-good: #A0EC53;
  --color-good-bg-light: #CFF6A9;
  --color-normal: #14BE6C;
  --color-normal-bg-light: #89DFB5;
  --color-critical-sensor: #3FA9FF;
  --color-critical-sensor-bg-light: #9FD4FF;
  --color-active: #264DC1;
  --color-active-bg-light: #CBD8FF;
  --color-emergency-bg-light: #363636;

  /* --- 2. BRAND COLORS (Monom Purple Palette) --- */
  --color-purple-200: #f1e6f7;
  --color-purple-400: #d688ff;
  --color-purple-500: #b34be9;
  --color-purple-700: #57206f;
  --color-purple-800: #6a1b9a;

  /* --- 3. NEUTRAL COLORS --- */
  --color-neutral-white: var(--color-white-val);
  --color-neutral-050: #fafafa;
  --color-neutral-100: #f2f2f2;
  --color-neutral-150: #ededed;
  --color-neutral-200: #dbdbdb;
  --color-neutral-300: #b5b5b5;
  --color-neutral-400: #949494;
  --color-neutral-500: #6b6b6b;
  --color-neutral-600: #4a4a4a;
  --color-neutral-700: #2c2c2c;
  --color-neutral-800: var(--color-neutral-800-val);
  --color-neutral-900: #0d0d0d;
  --color-neutral-1000: #111111;

   /* Aliases for external/legacy compatibility */
  --Grey-Grey-900: var(--color-grey-900);
  --Grey-Grey-800: var(--color-grey-800);
  --Grey-Grey-700: var(--color-grey-700);
  --Grey-Grey-600: var(--color-grey-600);
  --Grey-Grey-500: var(--color-grey-500);
  --Grey-Grey-400: var(--color-grey-400);
  --Grey-Grey-300: var(--color-grey-300);
  --Grey-Grey-200: var(--color-grey-200);
  --Grey-Grey-100: var(--color-grey-100);

  --DarkBlue-DarkBlue-900: var(--color-darkblue-900);
  --DarkBlue-DarkBlue-800: var(--color-darkblue-800);
  --DarkBlue-DarkBlue-700: var(--color-darkblue-700);
  --DarkBlue-DarkBlue-600: var(--color-darkblue-600);
  --DarkBlue-DarkBlue-500: var(--color-darkblue-500);
  --DarkBlue-DarkBlue-400: var(--color-darkblue-400);
  --DarkBlue-DarkBlue-300: var(--color-darkblue-300);
  --DarkBlue-DarkBlue-200: var(--color-darkblue-200);
  --DarkBlue-DarkBlue-100: var(--color-darkblue-100);

  --Purple-Purple-950: var(--color-purple-950);
  --Purple-Purple-900: var(--color-purple-900);
  --Purple-Purple-850: var(--color-purple-850);
  --Purple-Purple-800: var(--color-purple-800);
  --Purple-Purple-700: var(--color-purple-700);
  --Purple-Purple-600: var(--color-purple-600);
  --Purple-Purple-500: var(--color-purple-500);
  --Purple-Purple-400: var(--color-purple-400);
  --Purple-Purple-300: var(--color-purple-300);
  --Purple-Purple-200: var(--color-purple-200);

  /* --- 4. SLATE / SYSTEM BLUE COLORS (Used in complex panels/tables) --- */
  --color-slate-200: var(--color-neutral-200);
  --color-slate-700: var(--color-darkblue-600);
  --color-slate-800: var(--color-darkblue-700);
  --color-slate-900: #1e2030;
  --color-slate-950: var(--color-darkblue-800);
  --color-slate-hover: var(--color-darkblue-500);
  --color-slate-border: var(--color-darkblue-400);

  /* --- CHART COLORS --- */
  --color-chart-grid-light: #e8e8e9;
  --color-chart-event-marker: #00e0bb;

  /* --- 5. ALERT & CHIPS STATUS COLORS --- */
  /* Emergency */
  --color-emergency-bg: #363636;
  --color-emergency-border-light: #0D0D0D;
  --color-emergency-border-dark: #F2F3F5;
  --color-emergency-text: #FFFFFF;

  /* Critical */
  --color-status-critical-bg-light: var(--color-critical-bg-light);
  --color-status-critical-bg-dark: var(--color-critical-bg-dark);
  --color-status-critical-border: var(--color-critical);

  /* High */
  --color-status-high-bg-light: var(--color-high-bg-light);
  --color-status-high-bg-dark: var(--color-high-bg-dark);
  --color-status-high-border: var(--color-high);

  /* Medium */
  --color-status-medium-bg-light: var(--color-medium-bg-light);
  --color-status-medium-bg-dark: var(--color-medium-bg-dark);
  --color-status-medium-border: var(--color-medium);

  /* Low */
  --color-status-low-bg-light: var(--color-low-bg-light);
  --color-status-low-bg-dark: var(--color-low-bg-dark);
  --color-status-low-border: var(--color-low);

  /* Good */
  --color-status-good-bg-light: var(--color-good-bg-light);
  --color-status-good-bg-dark: #53792F;
  --color-status-good-border: var(--color-good);

  /* Normal */
  --color-status-normal-bg-light: var(--color-normal-bg-light);
  --color-status-normal-bg-dark: #166C48;
  --color-status-normal-border: var(--color-normal);

  /* Critical Sensor */
  --color-status-criticalSensor-bg-light: var(--color-critical-sensor-bg-light);
  --color-status-criticalSensor-bg-dark: #235885;
  --color-status-criticalSensor-border: var(--color-critical-sensor);

  /* Active */
  --color-status-active-bg-light: var(--color-active-bg-light);
  --color-status-active-bg-dark: #1F3372;
  --color-status-active-border: var(--color-active);

  /* Auto 400 (grey) */
  --color-status-auto400-bg-light: var(--color-neutral-200);
  --color-status-auto400-bg-dark: var(--color-darkblue-500);
  --color-status-auto400-border: transparent;

  /* Auto 500 (purple) */
  --color-status-auto500-bg-light: var(--color-purple-300);
  --color-status-auto500-bg-dark: var(--color-darkblue-400);
  --color-status-auto500-border: transparent;

  /* Unknown */
  --color-status-unknown-bg-light: var(--color-neutral-200);
  --color-status-unknown-bg-dark: #858585;
  --color-status-unknown-border-light: var(--color-neutral-300);
  --color-status-unknown-border-dark: var(--color-neutral-200);

  /* Auto */
  --color-status-auto-bg-light: var(--color-status-unknown-bg-light);
  --color-status-auto-bg-dark: var(--color-status-unknown-bg-dark);
  --color-status-auto-border-light: var(--color-status-unknown-border-light);
  --color-status-auto-border-dark: var(--color-status-unknown-border-dark);

  /* --- 6. TOAST ALERTS PALETTE --- */
  --color-toast-ok-bg: #edf9f2;
  --color-toast-ok-border: var(--color-good);
  --color-toast-ok-bar: var(--color-normal);

  --color-toast-alert-bg: #fef0f4;
  --color-toast-alert-border: var(--color-critical-bg-light);
  --color-toast-alert-bar: var(--color-critical);

  --color-toast-alert-orange-bg: #fef7ee;
  --color-toast-alert-orange-border: var(--color-high-bg-light);
  --color-toast-alert-orange-bar: var(--color-high);

  --color-toast-info-bg: #eef1fb;
  --color-toast-info-border: var(--color-active-bg-light);
  --color-toast-info-bar: var(--color-active);

  --color-toast-system-bg: var(--color-emergency-bg-light);
  --color-toast-system-border: #dbdbdb;
  --color-toast-system-bar: #6b6b6b;

  /* --- 7. ADDITIONAL DESIGN SYSTEM COLORS & OPACITIES --- */
  /* Hex colors */
  --color-status-error-hex: var(--color-notification-val);
  --color-neutral-scrollbar-thumb-light: #C4C4C4;
  --color-neutral-off-white: #FEFEFE;
  --color-neutral-card-border-default: #d9d9d9;
  --color-neutral-login-hover-dark: #E6E6E6;
  --color-neutral-login-disabled-text-dark: #858585;
  --color-neutral-emergency-border: #EBECF0;

  /* RGBA opacities */
  --color-rgba-scrollbar-thumb-light: rgba(255, 255, 255, 0.35);
  --color-rgba-input-label-disabled-light: rgba(13, 13, 13, 0.2);
  --color-rgba-input-helper-disabled: rgba(148, 148, 148, 0.2);
  --color-rgba-input-arrows-hover: rgba(0, 0, 0, 0.08);
  --color-rgba-modal-overlay: rgba(0, 0, 0, 0.6);
  --color-rgba-shadow-modal-grouping: rgba(41, 41, 61, 0.08);
  --color-rgba-shadow-toast: rgba(0, 0, 0, 0.18);
  --color-rgba-shadow-menu: rgba(41, 41, 61, 0.12);
  --color-rgba-tab-hover-dark: rgba(255, 255, 255, 0.04);
  --color-rgba-pagination-hover-light: rgba(0, 0, 0, 0.05);
  --color-rgba-scrollbar-thumb-dark: rgba(0, 0, 0, 0.35);
  --color-rgba-tab-hover-light: rgba(0, 0, 0, 0.04);
  --color-rgba-input-label-disabled-dark: rgba(255, 255, 255, 0.2);
  --color-rgba-pagination-hover-dark: rgba(255, 255, 255, 0.05);
  --color-transparent: transparent;
  --color-rgba-white-01: rgba(255, 255, 255, 0.01);
  --color-rgba-white-02: rgba(255, 255, 255, 0.02);
  --color-rgba-white-03: rgba(255, 255, 255, 0.03);
  --color-rgba-white-06: rgba(255, 255, 255, 0.06);
  --color-rgba-white-08: rgba(255, 255, 255, 0.08);
  --color-rgba-white-10: rgba(255, 255, 255, 0.1);
  --color-rgba-white-15: rgba(255, 255, 255, 0.15);
  --color-rgba-white-40: rgba(255, 255, 255, 0.4);
  --color-rgba-white-45: rgba(255, 255, 255, 0.45);
  --color-rgba-black-02: rgba(0, 0, 0, 0.02);
  --color-rgba-black-03: rgba(0, 0, 0, 0.03);
  --color-rgba-black-06: rgba(0, 0, 0, 0.06);
  --color-rgba-black-10: rgba(0, 0, 0, 0.1);
  --color-rgba-black-15: rgba(0, 0, 0, 0.15);
  --color-rgba-black-20: rgba(0, 0, 0, 0.2);
  --color-rgba-black-40: rgba(0, 0, 0, 0.4);
  --color-rgba-purple-500-06: rgba(179, 75, 233, 0.06);
  --color-rgba-purple-500-10: rgba(179, 75, 233, 0.1);
  --color-rgba-active-15: rgba(38, 77, 193, 0.15);
  --color-rgba-neutral-400-15: rgba(128, 128, 128, 0.15);

  /* --- FIGMA DESIGN TOKENS SYNC --- */
  /* Complete Figma Purple Shades (Non-overlapping) */
  --color-purple-950: #20092A;
  --color-purple-900: #300D3F;
  --color-purple-850: #321D3B;
  --color-purple-600: #7D22AC;
  --color-purple-300: #ECD1FA;
  --color-purple-200-figma: #F9F1FD;
  --color-purple-800-figma: #3E174F;

  /* Figma Green Palette */
  --color-green-975: #1F2701;
  --color-green-950: #2A3501;
  --color-green-900: #3B4B02;
  --color-green-875: #4B6002;
  --color-green-850: #566E03;
  --color-green-800: #647F03;
  --color-green-700: #718F04;
  --color-green-600: #7D9E04;
  --color-green-500: #91B805;
  --color-green-400: #A3CE05;
  --color-green-300: #B6E706;
  --color-green-200: #C4F806;
  --color-green-150: #DCFB6A;
  --color-green-100: #EBFDAA;
  --color-green-050: #F3FECD;
  --color-green-025: #F9FEE6;

  /* Figma Dark Blue Palette */
  --color-darkblue-900: #0A051A;
  --color-darkblue-800: var(--color-emergency);
  --color-darkblue-700: var(--color-neutral-800-val);
  --color-darkblue-600: #2A2D3D;
  --color-darkblue-500: #35394E;
  --color-darkblue-400: #3E3659;
  --color-darkblue-300: #3E425B;
  --color-darkblue-200: #484D6A;
  --color-darkblue-100: #535879;

  /* Figma Grey Palette */
  --color-grey-900: #0D0D0D;
  --color-grey-800: #4D4D4D;
  --color-grey-700: #858585;
  --color-grey-600: #949494;
  --color-grey-500: #B5B5B5;
  --color-grey-400: #DBDBDB;
  --color-grey-300: #EDEDED;
  --color-grey-200: #F2F2F2;
  --color-grey-100: #FAFAFA;

  /* Figma Brand & Special Colors */
  --color-overlay: var(--color-overlay-val);
  --color-dark-overlay: var(--color-dark-overlay-val);
  --color-notification: var(--color-notification-val);

  /* Figma Alarm Severities */
  --color-alarm-severity-emergency: var(--color-emergency);
  --color-alarm-severity-critical: var(--color-critical);
  --color-alarm-severity-high: var(--color-high);
  --color-alarm-severity-med: var(--color-medium);
  --color-alarm-severity-low: var(--color-low);
  --color-alarm-severity-good: var(--color-good);
  --color-alarm-severity-normal: var(--color-normal);
  --color-alarm-severity-critical-sensor: var(--color-critical-sensor);
  --color-alarm-severity-active: var(--color-active);
  --color-alarm-severity-emergency-50-dark: #363636;
  --color-alarm-severity-emergency-50-light: var(--color-emergency-bg-light);
  --color-alarm-severity-critical-50-dark: var(--color-critical-bg-dark);
  --color-alarm-severity-critical-10-dark: #1E0711;
  --color-alarm-severity-critical-50-light: var(--color-critical-bg-light);
  --color-alarm-severity-critical-8-light: #FEEBF1;
  --color-alarm-severity-high-50-dark: var(--color-high-bg-dark);
  --color-alarm-severity-high-10-dark: #20140C;
  --color-alarm-severity-high-50-light: var(--color-high-bg-light);
  --color-alarm-severity-high-10-light: #FFF3E8;
  --color-alarm-severity-med-50-dark: var(--color-medium-bg-dark);
  --color-alarm-severity-med-10-dark: #201D0C;
  --color-alarm-severity-med-50-light: var(--color-medium-bg-light);
  --color-alarm-severity-med-10-light: #FFFDE8;
  --color-alarm-severity-low-50-dark: var(--color-low-bg-dark);
  --color-alarm-severity-low-10-dark: #20191E;
  --color-alarm-severity-low-50-light: var(--color-low-bg-light);
  --color-alarm-severity-low-10-light: #FFF8FA;
  --color-alarm-severity-good-50-dark: #53792F;
  --color-alarm-severity-good-10-dark: #161E11;
  --color-alarm-severity-good-50-light: var(--color-good-bg-light);
  --color-alarm-severity-good-10-light: #F5FDEE;
  --color-alarm-severity-normal-50-dark: #166C48;
  --color-alarm-severity-normal-10-dark: #081914;
  --color-alarm-severity-normal-50-light: var(--color-normal-bg-light);
  --color-alarm-severity-normal-10-light: #E7F8F0;
  --color-alarm-severity-critical-sensor-50-dark: #235885;
  --color-alarm-severity-critical-sensor-10-dark: #0C1723;
  --color-alarm-severity-critical-sensor-50-light: var(--color-critical-sensor-bg-light);
  --color-alarm-severity-critical-sensor-10-light: #ECF6FF;
  --color-alarm-severity-active-50-dark: #1F3372;
  --color-alarm-severity-active-10-dark: #0A0E1C;
  --color-alarm-severity-active-50-light: var(--color-active-bg-light);
  --color-alarm-severity-active-10-light: #E9EDF9;
  --color-alarm-severity-db-500-50-dark: #1D1F2C;
  --color-alarm-severity-db-500-50-light: #9A9CA7;
  --color-alarm-severity-db-400-50-dark: #221E31;
  --color-alarm-severity-db-400-50-light: #9F9BAC;
}

/* =========================================================
   1. DEFAULT BASE VARIABLES
   ========================================================= */

:root {
  /* Base typography */
  --font-family: var(--font-family-base);

  /* --- TYPOGRAPHY SEMANTIC TOKENS --- */
  --font-h1-size: var(--font-size-4xl);
  --font-h1-weight: var(--font-weight-regular);
  --font-h1-line-height: var(--line-height-2xl-80);
  --font-h1-letter-spacing: var(--letter-spacing-normal);

  --font-h2-size: var(--font-size-3xl);
  --font-h2-weight: var(--font-weight-regular);
  --font-h2-line-height: var(--line-height-xl-50);
  --font-h2-letter-spacing: var(--letter-spacing-normal);

  --font-h3-size: var(--font-size-2xl);
  --font-h3-weight: var(--font-weight-bold);
  --font-h3-line-height: var(--line-height-lg-34);
  --font-h3-letter-spacing: var(--letter-spacing-normal);

  --font-h4-size: var(--font-size-xl);
  --font-h4-weight: var(--font-weight-regular);
  --font-h4-line-height: var(--line-height-lg-30);
  --font-h4-letter-spacing: var(--letter-spacing-normal);

  --font-h5-size: var(--font-size-sm-18);
  --font-h5-weight: var(--font-weight-regular);
  --font-h5-line-height: var(--line-height-md-26);
  --font-h5-letter-spacing: var(--letter-spacing-normal);

  --font-h6-size: var(--font-size-xs);
  --font-h6-weight: var(--font-weight-semibold);
  --font-h6-line-height: var(--line-height-xs);
  --font-h6-letter-spacing: var(--letter-spacing-normal);

  /* Subtitles */
  --font-subtitle-large-size: var(--font-size-md);
  --font-subtitle-large-weight: var(--font-weight-medium);
  --font-subtitle-large-line-height: var(--line-height-md);
  --font-subtitle-large-letter-spacing: var(--letter-spacing-normal);

  --font-subtitle-medium-size: var(--font-size-sm);
  --font-subtitle-medium-weight: var(--font-weight-medium);
  --font-subtitle-medium-line-height: var(--line-height-sm);
  --font-subtitle-medium-letter-spacing: var(--letter-spacing-normal);

  --font-subtitle-small-size: var(--font-size-xs);
  --font-subtitle-small-weight: var(--font-weight-medium);
  --font-subtitle-small-line-height: var(--line-height-xs);
  --font-subtitle-small-letter-spacing: var(--letter-spacing-normal);

  /* Body */
  --font-body-large-bold-size: var(--font-size-md);
  --font-body-large-bold-weight: var(--font-weight-bold);
  --font-body-large-bold-line-height: var(--line-height-md);
  --font-body-large-bold-letter-spacing: var(--letter-spacing-normal);

  --font-body-large-regular-size: var(--font-size-md);
  --font-body-large-regular-weight: var(--font-weight-regular);
  --font-body-large-regular-line-height: var(--line-height-md);
  --font-body-large-regular-letter-spacing: var(--letter-spacing-normal);

  --font-body-medium-bold-size: var(--font-size-sm);
  --font-body-medium-bold-weight: var(--font-weight-bold);
  --font-body-medium-bold-line-height: var(--line-height-sm-19);
  --font-body-medium-bold-letter-spacing: var(--letter-spacing-normal);

  --font-body-medium-regular-size: var(--font-size-sm);
  --font-body-medium-regular-weight: var(--font-weight-regular);
  --font-body-medium-regular-line-height: var(--line-height-sm-19);
  --font-body-medium-regular-letter-spacing: var(--letter-spacing-normal);

  --font-body-small-bold-size: var(--font-size-xs);
  --font-body-small-bold-weight: var(--font-weight-bold);
  --font-body-small-bold-line-height: var(--line-height-xs-17);
  --font-body-small-bold-letter-spacing: var(--letter-spacing-normal);

  --font-body-small-regular-size: var(--font-size-xs);
  --font-body-small-regular-weight: var(--font-weight-regular);
  --font-body-small-regular-line-height: var(--line-height-xs-17);
  --font-body-small-regular-letter-spacing: var(--letter-spacing-normal);

  /* Button */
  --font-button-large-size: var(--font-size-md);
  --font-button-large-weight: var(--font-weight-semibold);
  --font-button-large-line-height: var(--line-height-md);
  --font-button-large-letter-spacing: var(--letter-spacing-normal);

  --font-button-medium-size: var(--font-size-sm);
  --font-button-medium-weight: var(--font-weight-semibold);
  --font-button-medium-line-height: var(--line-height-sm);
  --font-button-medium-letter-spacing: var(--letter-spacing-normal);

  --font-button-small-size: var(--font-size-xs);
  --font-button-small-weight: var(--font-weight-semibold);
  --font-button-small-line-height: var(--line-height-xs);
  --font-button-small-letter-spacing: var(--letter-spacing-normal);

  /* Caption & Overline */
  --font-caption-bold-size: var(--font-size-2xs);
  --font-caption-bold-weight: var(--font-weight-bold);
  --font-caption-bold-line-height: var(--line-height-2xs-13);
  --font-caption-bold-letter-spacing: var(--letter-spacing-normal);

  --font-caption-regular-size: var(--font-size-2xs);
  --font-caption-regular-weight: var(--font-weight-regular);
  --font-caption-regular-line-height: var(--line-height-2xs-13);
  --font-caption-regular-letter-spacing: var(--letter-spacing-normal);

  --font-overline-bold-size: var(--font-size-2xs);
  --font-overline-bold-weight: var(--font-weight-semibold);
  --font-overline-bold-line-height: var(--line-height-2xs);
  --font-overline-bold-letter-spacing: var(--letter-spacing-overline);

  --font-overline-regular-size: var(--font-size-2xs);
  --font-overline-regular-weight: var(--font-weight-regular);
  --font-overline-regular-line-height: var(--line-height-2xs);
  --font-overline-regular-letter-spacing: var(--letter-spacing-overline);

  /* Labels */
  --font-label-large-size: var(--font-size-sm);
  --font-label-large-weight: var(--font-weight-medium);
  --font-label-large-line-height: var(--line-height-sm-18);
  --font-label-large-letter-spacing: var(--letter-spacing-label-l);

  --font-label-large-bold-size: var(--font-size-sm);
  --font-label-large-bold-weight: var(--font-weight-bold);
  --font-label-large-bold-line-height: var(--line-height-sm-18);
  --font-label-large-bold-letter-spacing: var(--letter-spacing-label-l);

  --font-label-medium-size: var(--font-size-2xs-11);
  --font-label-medium-weight: var(--font-weight-medium);
  --font-label-medium-line-height: var(--line-height-sm-18);
  --font-label-medium-letter-spacing: var(--letter-spacing-label-m);

  --font-label-medium-bold-size: var(--font-size-2xs-11);
  --font-label-medium-bold-weight: var(--font-weight-bold);
  --font-label-medium-bold-line-height: var(--line-height-sm-18);
  --font-label-medium-bold-letter-spacing: var(--letter-spacing-label-m);

  --font-label-small-size: var(--font-size-3xs);
  --font-label-small-weight: var(--font-weight-medium);
  --font-label-small-line-height: var(--line-height-2xs);
  --font-label-small-letter-spacing: var(--letter-spacing-label-s);

  --font-label-small-bold-size: var(--font-size-3xs);
  --font-label-small-bold-weight: var(--font-weight-bold);
  --font-label-small-bold-line-height: var(--line-height-2xs);
  --font-label-small-bold-letter-spacing: var(--letter-spacing-label-s);

  /* Purple */
  --purple-400: var(--color-purple-400);

  /* Colores base */
  --primary-color: var(--color-purple-400);
  --color-bg: var(--color-neutral-1000);
  --color-text: var(--color-neutral-white);
  --color-text-button: var(--color-neutral-white);
  --color-text-secondary: var(--color-purple-800);
  --color-text-disabled: var(--color-neutral-400);

  /* Button badge */
  --button-badge-text-color: var(--color-neutral-white);
  --button-badge-notification-bg: var(--input-error-color);
  --button-badge-primary-bg: var(--color-purple-400);

  /* Variants */
  --background-color-primary: var(--color-purple-500);

  /* Variants hover */
  --background-color-primary-hover: var(--color-purple-700);
  --background-color-secondary-hover: var(--color-purple-200);
  --background-color-filter: var(--color-slate-700);
  --background-color-filter-hover: var(--color-slate-hover);
  --background-color-filter-disabled: var(--color-slate-800);
  --color-text-filter: var(--color-neutral-white);
  --color-text-filter-disabled: var(--color-slate-700);

  /* Variants disabled */
  --background-color-primary-disabled: var(--color-neutral-200);
  --border-color-secondary-disabled: var(--color-neutral-300);

  /* Variants login */
  --background-color-login: var(--color-neutral-900);
  --background-color-login-hover: var(--color-neutral-700);
  --background-color-login-disabled: var(--color-neutral-200);
  --color-text-login: var(--color-neutral-white);
  --color-text-login-disabled: var(--color-neutral-500);

  /* Chips Spacing */
  --chip-height-sm: 14px;
  --chip-height-md: 18px;
  --chip-height-lg: 24px;
  --chip-height-xl: 30px;

  --chip-radius: 100px;
  --chip-font-size-sm: 9px;
  --chip-font-size-md: 9px;
  --chip-font-size-lg: 11px;
  --chip-font-size-xl: 14px;

  --chip-letter-spacing-sm: 1.8px;
  --chip-letter-spacing-md: 1.8px;
  --chip-letter-spacing-lg: 2.42px;
  --chip-letter-spacing-xl: 3.08px;

  --chip-font-weight: 500;
  --chip-gap: 6px;

  /* Fallback de colores de chip */
  --chip-emergency-bg: var(--color-emergency-bg);
  --chip-emergency-border: var(--color-emergency-border-light);
  --chip-emergency-text: var(--color-emergency-text);

  --chip-critical-bg: var(--color-status-critical-bg-light);
  --chip-critical-border: var(--color-status-critical-border);

  --chip-high-bg: var(--color-status-high-bg-light);
  --chip-high-border: var(--color-status-high-border);

  --chip-medium-bg: var(--color-status-medium-bg-light);
  --chip-medium-border: var(--color-status-medium-border);

  --chip-low-bg: var(--color-status-low-bg-light);
  --chip-low-border: var(--color-status-low-border);

  --chip-good-bg: var(--color-status-good-bg-light);
  --chip-good-border: var(--color-status-good-border);

  --chip-normal-bg: var(--color-status-normal-bg-light);
  --chip-normal-border: var(--color-status-normal-border);

  --chip-criticalSensor-bg: var(--color-status-criticalSensor-bg-light);
  --chip-criticalSensor-border: var(--color-status-criticalSensor-border);

  --chip-active-bg: var(--color-status-active-bg-light);
  --chip-active-border: var(--color-status-active-border);

  --chip-auto400-bg: var(--color-status-auto400-bg-light);
  --chip-auto400-border: var(--color-status-auto400-border);

  --chip-auto500-bg: var(--color-status-auto500-bg-light);
  --chip-auto500-border: var(--color-status-auto500-border);

  --chip-unknown-bg: var(--color-status-unknown-bg-light);
  --chip-unknown-border: var(--color-status-unknown-border-light);

  --chip-auto-bg: var(--color-status-auto-bg-light);
  --chip-auto-border: var(--color-status-auto-border-light);

  --chip-text: var(--color-neutral-900);
  --chip-counter: var(--color-neutral-200);

  /* Status Dot (light) */
  --statusdot-unknown-color: var(--color-grey-600);
  --statusdot-auto500-color: var(--color-grey-500);
  --statusdot-auto400-color: var(--color-purple-300);

  /* Dropdown */
  --select-control-bg: var(--color-slate-700);
  --select-dropdown-bg: var(--color-slate-700);
  --select-dropdown-text: var(--color-neutral-white);
  --select-border-color: var(--color-slate-border);
  --select-scrollbar-thumb: var(--color-rgba-scrollbar-thumb-light);
  --select-placeholder-color: var(--color-neutral-600);

  /* Input */
  --input-bg: var(--color-neutral-150);
  --input-label-color: var(--color-neutral-900);
  --input-label-disabled-color: var(--color-rgba-input-label-disabled-light);
  --input-text-color: var(--color-neutral-900);
  --input-placeholder-color: var(--color-neutral-400);
  --textarea-placeholder-color: var(--color-neutral-400);
  --textarea-formated-placeholder-color: var(--color-neutral-400);
  --input-border-color: var(--color-neutral-150);
  --input-border-focus-color: var(--color-purple-500);
  --input-border-error-color: var(--color-status-error-hex);
  --input-icon-color: var(--color-neutral-400);
  --input-helper-color: var(--color-neutral-400);
  --input-helper-disabled-color: var(--color-rgba-input-helper-disabled);
  --input-error-color: var(--color-status-error-hex);
  --input-scrollbar-thumb: var(--color-neutral-scrollbar-thumb-light);
  --input-scrollbar-track: transparent;
  --input-arrows-hover-bg: var(--color-rgba-input-arrows-hover);
  --opacity-disabled: 0.2;

  /* Checkbox */
  --checkbox-border: var(--color-neutral-200);
  --checkbox-bg: var(--color-neutral-100);
  --checkbox-icon-color: var(--color-neutral-off-white);
  --checkbox-label-color: var(--color-neutral-900);
  --checkbox-active-bg: var(--color-purple-500);
  --checkbox-active-border: var(--color-purple-500);

  /* RadioButton */
  --radio-button-border: var(--color-neutral-400);
  --radio-button-bg: transparent;
  --radio-button-active-bg: transparent;
  --radio-button-active-border: var(--color-purple-400);
  --radio-button-active-dot: var(--color-purple-400);
  --radio-button-check-bg: var(--color-purple-500);
  --radio-button-check-icon: var(--color-neutral-white);
  --radio-button-disabled-bg: transparent;
  --radio-button-disabled-opacity: var(--opacity-disabled);
  --radio-button-label-color: var(--color-neutral-900);
  --radio-button-label-active-color: var(--color-neutral-900);

  /* Modal */
  --modal-bg: var(--color-neutral-050);
  --modal-overlay-bg: var(--color-rgba-modal-overlay);
  --modal-border-color: var(--color-neutral-200);
  --modal-border-radius: 6px;
  --modal-shadow: 0px 0px 12px 0px var(--color-rgba-shadow-modal-grouping);
  --modal-title-color: var(--color-neutral-900);
  --modal-subtitle-color: var(--color-neutral-400);
  --modal-close-color: var(--color-neutral-900);

  /* Card */
  --card-solid-bg: var(--color-neutral-050);
  --card-solid-border: var(--color-neutral-100);
  --card-outline-bg: transparent;
  --card-outline-border: var(--color-neutral-100);
  --card-only-border-bg: transparent;
  --card-only-border-border: var(--color-neutral-100);
  --card-title-color: var(--color-neutral-900);
  --card-action-color: var(--color-purple-500);
  --card-hover-bg: var(--color-neutral-100);

  /* Empty */
  --empty-bg: var(--color-neutral-150);
  --empty-text-color: var(--color-neutral-900);
  --empty-action-color: var(--color-purple-500);
  --empty-icon-wrapper-bg: var(--color-neutral-200);
  --empty-monom-bg: var(--color-neutral-200);
  --empty-monom-path: var(--color-neutral-400);

  /* Notification */
  --notification-list-bg: var(--color-neutral-050);
  --notification-list-border: var(--color-neutral-300);
  --notification-list-radius: 4px;
  --notification-item-bg: var(--color-neutral-100);
  --notification-item-bg-hover: var(--color-neutral-150);
  --notification-title-color: var(--color-neutral-900);
  --notification-subtitle-color: var(--color-neutral-400);
  --notification-description-color: var(--color-neutral-400);
  --notification-value-color: var(--color-neutral-900);
  --notification-date-color: var(--color-neutral-400);
  --notification-header-color: var(--color-neutral-900);
  --notification-action-color: var(--color-purple-500);
  --notification-empty-color: var(--color-neutral-900);
  --notification-empty-icon-color: var(--color-neutral-900);
  --notification-icon-color: var(--color-neutral-white);

  --notification-emergency-bar: var(--color-status-emergency-border-light);
  --notification-emergency-icon-bg: var(--color-status-emergency-bg-light);
  --notification-emergency-icon-color: var(--color-status-emergency-border-light);

  --notification-critical-bar: var(--color-status-critical-border);
  --notification-critical-icon-bg: var(--color-status-critical-bg-light);
  --notification-critical-icon-color: var(--color-neutral-900);

  --notification-high-bar: var(--color-status-high-border);
  --notification-high-icon-bg: var(--color-status-high-bg-light);
  --notification-high-icon-color: var(--color-neutral-900);

  --notification-medium-bar: var(--color-status-medium-border);
  --notification-medium-icon-bg: var(--color-status-medium-bg-light);
  --notification-medium-icon-color: var(--color-neutral-900);

  --notification-low-bar: var(--color-status-low-border);
  --notification-low-icon-bg: var(--color-status-low-bg-light);
  --notification-low-icon-color: var(--color-neutral-900);

  --notification-good-bar: var(--color-status-good-border);
  --notification-good-icon-bg: var(--color-status-good-bg-light);
  --notification-good-icon-color: var(--color-neutral-900);

  --notification-normal-bar: var(--color-status-normal-border);
  --notification-normal-icon-bg: var(--color-status-normal-bg-light);
  --notification-normal-icon-color: var(--color-neutral-900);

  --notification-criticalSensor-bar: var(--color-status-criticalSensor-border);
  --notification-criticalSensor-icon-bg: var(--color-status-criticalSensor-bg-light);
  --notification-criticalSensor-icon-color: var(--color-neutral-900);

  --notification-active-bar: var(--color-status-active-border);
  --notification-active-icon-bg: var(--color-status-active-bg-light);
  --notification-active-icon-color: var(--color-neutral-900);

  --notification-auto400-bar: var(--color-status-auto400-bg-light);
  --notification-auto400-icon-bg: var(--color-status-auto400-bg-light);
  --notification-auto400-icon-color: var(--color-neutral-900);

  --notification-auto500-bar: var(--color-status-auto500-bg-light);
  --notification-auto500-icon-bg: var(--color-status-auto500-bg-light);
  --notification-auto500-icon-color: var(--color-neutral-900);

  --notification-unknown-bar: var(--color-status-unknown-border-light);
  --notification-unknown-icon-bg: var(--color-status-unknown-bg-light);
  --notification-unknown-icon-color: var(--color-neutral-900);

  /* Toast */
  --toast-width: 364px;
  --toast-border-radius: 8px;
  --toast-shadow: 0px 2px 16px 0px var(--color-rgba-shadow-toast);
  --toast-title-color: var(--color-neutral-900);
  --toast-description-color: var(--color-neutral-600);
  --toast-close-color: var(--color-neutral-600);

  --toast-ok-bg: var(--color-toast-ok-bg);
  --toast-ok-border: var(--color-toast-ok-border);
  --toast-ok-bar: var(--color-toast-ok-bar);

  --toast-alert-bg: var(--color-toast-alert-bg);
  --toast-alert-border: var(--color-toast-alert-border);
  --toast-alert-bar: var(--color-toast-alert-bar);

  --toast-alert-orange-bg: var(--color-toast-alert-orange-bg);
  --toast-alert-orange-border: var(--color-toast-alert-orange-border);
  --toast-alert-orange-bar: var(--color-toast-alert-orange-bar);

  --toast-info-bg: var(--color-toast-info-bg);
  --toast-info-border: var(--color-toast-info-border);
  --toast-info-bar: var(--color-toast-info-bar);

  --toast-system-bg: var(--color-toast-system-bg);
  --toast-system-border: var(--color-toast-system-border);
  --toast-system-bar: var(--color-toast-system-bar);

  /* GROUPING */
  --grouping-bg: var(--color-neutral-white);
  --grouping-border-color: var(--color-neutral-200);
  --grouping-shadow: 0px 0px 12px 0px var(--color-rgba-shadow-modal-grouping);

  /* Menu */
  --menu-bg: var(--color-neutral-white);
  --menu-border-color: var(--color-neutral-200);
  --menu-radius: 6px;
  --menu-shadow: 0px 4px 16px 0px var(--color-rgba-shadow-menu);
  --menu-text-color: var(--color-neutral-900);
  --menu-trigger-color: var(--color-neutral-900);
  --menu-trigger-hover-bg: var(--color-neutral-100);
  --menu-trigger-hover-color: var(--color-neutral-900);
  --menu-trigger-open-color: var(--color-neutral-white);
  --menu-item-color: var(--color-neutral-900);
  --menu-item-hover-bg: var(--color-purple-500);
  --menu-item-hover-color: var(--color-neutral-white);
  --menu-item-active-color: var(--color-neutral-white);
  --menu-accent-color: var(--color-purple-500);

  /* Action Table */
  --action-table-bg: var(--color-purple-200);
  --action-table-text: var(--color-neutral-900);
  --action-table-radius: 6px;
  --action-table-gap: 6px;
  --action-table-font-size: 14px;
  --action-table-font-weight: 400;
  --action-table-title-max-width: 170px;

  /* Header Cell */
  --header-cell-text: var(--color-neutral-900);
  --header-cell-gap: 4px;
  --header-cell-font-size: 11px;
  --header-cell-font-weight: 500;
  --header-cell-width: 220px;
  --header-cell-title-max-width: 180px;

  /* Row */
  --row-bg: var(--color-neutral-050);
  --row-bg-hover: var(--color-neutral-200);
  --row-radius: 6px;
  --row-padding-y: 8px;
  --row-padding-x: 10px;
  --row-gap: 10px;
  --row-cell-max-width: 215px;
  --row-cell-color: var(--color-neutral-900);

  /* Empty Table */
  --empty-table-bg: var(--color-neutral-050);

  /* Table */
  --table-row-gap: 4px;
  --table-column-gap: 10px;
  --table-main-col-width: 215px;
  --table-bulk-action-active-color: var(--color-neutral-300);
  --table-bulk-action-disabled-color: var(--color-neutral-300);
  --table-bulk-action-hover-bg: var(--color-neutral-200);

  /* Add Button */
  --add-button-size: 32px;
  --add-button-radius: 6px;
  --add-button-bg: var(--color-slate-700);
  --add-button-bg-hover: var(--color-slate-border);
  --add-button-color: var(--color-neutral-white);

  /* Tabs */
  --tab-bg: var(--color-neutral-white);
  --tab-color: var(--color-neutral-300);
  --tab-bg-hover: var(--color-rgba-tab-hover-dark);
  --tab-active-bg: var(--color-neutral-100);
  --tab-panel-bg: var(--color-neutral-white);
  --tab-border-color: var(--color-neutral-200);
  --tab-panel-border-color: var(--color-neutral-200);
  --tab-border-active: var(--color-neutral-200);
  --tab-active-color: var(--color-neutral-white);
  --tab-radius: 6px;
  --tab-height: 40px;
  --tab-gap: 8px;
  --tab-font-size: 14px;
  --tab-font-weight: 500;
  --tab-label-max-width: 180px;
  --tab-panel-padding: 16px;
  --tabs-gap: 10px;

  /* Line Tabs */
  --line-tab-color: var(--color-neutral-900);
  --line-tab-inactive-color: var(--color-neutral-400);
  --line-tab-hover-color: var(--color-purple-400);
  --line-tab-active-color: var(--color-neutral-900);
  --line-tab-accent-color: var(--color-purple-500);
  --line-tab-focus-color: var(--line-tab-accent-color);
  --line-tab-panel-color: var(--color-neutral-900);
  --line-tab-divider-color: var(--color-neutral-200);
  --tabs-view-active-bg: var(--color-neutral-100);
  --tabs-background-bg: var(--color-neutral-white);
  --tabs-background-color: var(--color-neutral-900);
  --tabs-background-border: var(--color-neutral-200);
  --tabs-background-active-border: var(--color-neutral-200);
  --tabs-badge-bg: var(--color-neutral-200);
  --tabs-badge-color: var(--color-neutral-900);
  --tabs-badge-active-bg: var(--color-status-auto500-bg-light);
  --tabs-badge-active-color: var(--color-neutral-900);
  --tabs-add-color: var(--color-purple-500);
  --tabs-metric-color: var(--color-neutral-400);
  --tabs-metric-active-color: var(--color-neutral-900);

  /* Divider */
  --divider-color: var(--color-neutral-200);

  /* Pagination */
  --pagination-color: var(--color-neutral-900);
  --pagination-hover-bg: var(--color-rgba-pagination-hover-light);
  --pagination-active-bg: var(--color-purple-500);
  --pagination-active-color: var(--color-neutral-white);
  --pagination-disabled-opacity: 0.4;

  /* Tooltip */
  --tooltip-bg: var(--color-darkblue-800);
  --tooltip-text: var(--color-neutral-white);
  --tooltip-border: var(--color-neutral-800);
  --tooltip-shadow: var(--color-rgba-shadow-modal-grouping);
}

/* =========================================================
   2. THEME LIGHT
   ========================================================= */

[data-theme="light"],
[data-theme="LIGHT"] {
  --primary-color: var(--color-purple-400);
  --color-bg: var(--color-neutral-1000);
  --color-text: var(--color-neutral-900);
  --color-text-button: var(--color-neutral-white);
  --color-text-secondary: var(--color-purple-400);
  --color-text-disabled: var(--color-neutral-400);

  /* Button badge */
  --button-badge-text-color: var(--color-neutral-white);
  --button-badge-notification-bg: var(--input-error-color);
  --button-badge-primary-bg: var(--color-purple-400);

  /* Variants */
  --background-color-primary: var(--color-purple-500);

  /* Variants hover */
  --background-color-primary-hover: var(--color-purple-700);
  --background-color-secondary-hover: var(--color-purple-200);
  --background-color-filter: var(--color-neutral-200);
  --background-color-filter-hover: var(--color-neutral-300);
  --background-color-filter-disabled: var(--color-neutral-150);
  --color-text-filter: var(--color-neutral-900);
  --color-text-filter-disabled: var(--color-neutral-200);

  /* Variants disabled */
  --background-color-primary-disabled: var(--color-neutral-200);
  --border-color-secondary-disabled: var(--color-neutral-300);

  /* Variants login */
  --background-color-login: var(--color-neutral-900);
  --background-color-login-hover: var(--color-neutral-700);
  --background-color-login-disabled: var(--color-neutral-200);
  --color-text-login: var(--color-neutral-white);
  --color-text-login-disabled: var(--color-neutral-500);

  /* Chip Light Variants */
  --chip-emergency-bg: var(--color-emergency-bg);
  --chip-emergency-border: var(--color-emergency-border-light);
  --chip-emergency-text: var(--color-emergency-text);

  --chip-critical-bg: var(--color-status-critical-bg-light);
  --chip-critical-border: var(--color-status-critical-border);

  --chip-high-bg: var(--color-status-high-bg-light);
  --chip-high-border: var(--color-status-high-border);

  --chip-medium-bg: var(--color-status-medium-bg-light);
  --chip-medium-border: var(--color-status-medium-border);

  --chip-low-bg: var(--color-status-low-bg-light);
  --chip-low-border: var(--color-status-low-border);

  --chip-good-bg: var(--color-status-good-bg-light);
  --chip-good-border: var(--color-status-good-border);

  --chip-normal-bg: var(--color-status-normal-bg-light);
  --chip-normal-border: var(--color-status-normal-border);

  --chip-criticalSensor-bg: var(--color-status-criticalSensor-bg-light);
  --chip-criticalSensor-border: var(--color-status-criticalSensor-border);

  --chip-active-bg: var(--color-status-active-bg-light);
  --chip-active-border: var(--color-status-active-border);

  --chip-auto400-bg: var(--color-status-auto400-bg-light);
  --chip-auto500-bg: var(--color-status-auto500-bg-light);

  --chip-unknown-bg: var(--color-status-unknown-bg-light);
  --chip-unknown-border: var(--color-status-unknown-border-light);

  --chip-auto-bg: var(--color-status-auto-bg-light);
  --chip-auto-border: var(--color-status-auto-border-light);

  --chip-text: var(--color-neutral-900);
  --chip-counter: var(--color-neutral-200);

  /* Status Dot (light) */
  --statusdot-unknown-color: var(--color-grey-600);
  --statusdot-auto500-color: var(--color-grey-500);
  --statusdot-auto400-color: var(--color-purple-300);

  /* dropdown */
  --select-dropdown-bg: var(--color-neutral-white);
  --select-dropdown-text: var(--color-neutral-900);
  --select-control-bg: var(--color-neutral-150);
  --select-border-color: var(--color-neutral-300);
  --select-scrollbar-thumb: var(--color-rgba-scrollbar-thumb-dark);
  --select-placeholder-color: var(--color-neutral-600);

  /* Input Light */
  --input-bg: var(--color-neutral-150);
  --input-label-color: var(--color-neutral-900);
  --input-label-disabled-color: var(--color-rgba-input-label-disabled-light);
  --input-text-color: var(--color-neutral-900);
  --input-placeholder-color: var(--color-neutral-400);
  --textarea-placeholder-color: var(--color-neutral-400);
  --textarea-formated-placeholder-color: var(--color-neutral-400);
  --input-border-color: var(--color-neutral-150);
  --input-border-focus-color: var(--color-purple-500);
  --input-border-error-color: var(--color-status-error-hex);
  --input-icon-color: var(--color-neutral-400);
  --input-helper-color: var(--color-neutral-400);
  --input-helper-disabled-color: var(--color-rgba-input-helper-disabled);
  --input-error-color: var(--color-status-error-hex);
  --input-scrollbar-thumb: var(--color-neutral-scrollbar-thumb-light);
  --input-scrollbar-track: transparent;
  --input-arrows-hover-bg: var(--color-rgba-input-arrows-hover);

  /* Checkbox Light */
  --checkbox-border: var(--color-neutral-200);
  --checkbox-bg: var(--color-neutral-100);
  --checkbox-icon-color: var(--color-neutral-white);
  --checkbox-label-color: var(--color-neutral-900);
  --checkbox-active-bg: var(--color-purple-500);
  --checkbox-active-border: var(--color-purple-500);

  /* RadioButton Light */
  --radio-button-border: var(--color-neutral-400);
  --radio-button-bg: transparent;
  --radio-button-active-bg: transparent;
  --radio-button-active-border: var(--color-purple-400);
  --radio-button-active-dot: var(--color-purple-400);
  --radio-button-check-bg: var(--color-purple-500);
  --radio-button-check-icon: var(--color-neutral-white);
  --radio-button-disabled-bg: transparent;
  --radio-button-disabled-opacity: var(--opacity-disabled);
  --radio-button-label-color: var(--color-neutral-900);
  --radio-button-label-active-color: var(--color-neutral-900);

  /* Card Light */
  --card-solid-bg: var(--color-neutral-050);
  --card-solid-border: var(--color-neutral-100);
  --card-outline-bg: transparent;
  --card-outline-border: var(--color-neutral-100);
  --card-only-border-bg: transparent;
  --card-only-border-border: var(--color-neutral-100);
  --card-title-color: var(--color-neutral-900);
  --card-action-color: var(--color-purple-500);
  --card-hover-bg: var(--color-neutral-100);

  /* Empty Light */
  --empty-bg: var(--color-neutral-150);
  --empty-text-color: var(--color-neutral-900);
  --empty-action-color: var(--color-purple-500);
  --empty-icon-wrapper-bg: var(--color-neutral-200);
  --empty-monom-bg: var(--color-neutral-200);
  --empty-monom-path: var(--color-neutral-400);

  /* Notification Light */
  --notification-list-bg: var(--color-neutral-050);
  --notification-list-border: var(--color-neutral-300);
  --notification-item-bg: var(--color-neutral-100);
  --notification-item-bg-hover: var(--color-neutral-150);
  --notification-title-color: var(--color-neutral-900);
  --notification-subtitle-color: var(--color-neutral-400);
  --notification-description-color: var(--color-neutral-400);
  --notification-value-color: var(--color-neutral-900);
  --notification-date-color: var(--color-neutral-400);
  --notification-header-color: var(--color-neutral-900);
  --notification-action-color: var(--color-purple-500);
  --notification-empty-color: var(--color-neutral-900);
  --notification-empty-icon-color: var(--color-neutral-900);
  --notification-icon-color: var(--color-neutral-white);

  --notification-emergency-bar: var(--color-status-emergency-border-light);
  --notification-emergency-icon-bg: var(--color-status-emergency-bg-light);
  --notification-emergency-icon-color: var(--color-status-emergency-border-light);

  --notification-critical-bar: var(--color-status-critical-border);
  --notification-critical-icon-bg: var(--color-status-critical-bg-light);
  --notification-critical-icon-color: var(--color-neutral-900);

  --notification-high-bar: var(--color-status-high-border);
  --notification-high-icon-bg: var(--color-status-high-bg-light);
  --notification-high-icon-color: var(--color-neutral-900);

  --notification-medium-bar: var(--color-status-medium-border);
  --notification-medium-icon-bg: var(--color-status-medium-bg-light);
  --notification-medium-icon-color: var(--color-neutral-900);

  --notification-low-bar: var(--color-status-low-border);
  --notification-low-icon-bg: var(--color-status-low-bg-light);
  --notification-low-icon-color: var(--color-neutral-900);

  --notification-good-bar: var(--color-status-good-border);
  --notification-good-icon-bg: var(--color-status-good-bg-light);
  --notification-good-icon-color: var(--color-neutral-900);

  --notification-normal-bar: var(--color-status-normal-border);
  --notification-normal-icon-bg: var(--color-status-normal-bg-light);
  --notification-normal-icon-color: var(--color-neutral-900);

  --notification-criticalSensor-bar: var(--color-status-criticalSensor-border);
  --notification-criticalSensor-icon-bg: var(--color-status-criticalSensor-bg-light);
  --notification-criticalSensor-icon-color: var(--color-neutral-900);

  --notification-active-bar: var(--color-status-active-border);
  --notification-active-icon-bg: var(--color-status-active-bg-light);
  --notification-active-icon-color: var(--color-neutral-900);

  --notification-auto400-bar: var(--color-status-auto400-bg-light);
  --notification-auto400-icon-bg: var(--color-status-auto400-bg-light);
  --notification-auto400-icon-color: var(--color-neutral-900);

  --notification-auto500-bar: var(--color-status-auto500-bg-light);
  --notification-auto500-icon-bg: var(--color-status-auto500-bg-light);
  --notification-auto500-icon-color: var(--color-neutral-900);

  --notification-unknown-bar: var(--color-status-unknown-border-light);
  --notification-unknown-icon-bg: var(--color-status-unknown-bg-light);
  --notification-unknown-icon-color: var(--color-neutral-900);

  /* Modal Light */
  --modal-bg: var(--color-neutral-050);
  --modal-title-color: var(--color-neutral-900);
  --modal-subtitle-color: var(--color-neutral-400);
  --modal-close-color: var(--color-neutral-900);
  --modal-border-color: var(--color-neutral-200);

  /* Toast Light */
  --toast-title-color: var(--color-neutral-900);
  --toast-description-color: var(--color-neutral-600);
  --toast-close-color: var(--color-neutral-600);

  --toast-ok-bg: var(--color-toast-ok-bg);
  --toast-ok-border: var(--color-toast-ok-border);
  --toast-ok-bar: var(--color-toast-ok-bar);

  --toast-alert-bg: var(--color-toast-alert-bg);
  --toast-alert-border: var(--color-toast-alert-border);
  --toast-alert-bar: var(--color-toast-alert-bar);

  --toast-alert-orange-bg: var(--color-toast-alert-orange-bg);
  --toast-alert-orange-border: var(--color-toast-alert-orange-border);
  --toast-alert-orange-bar: var(--color-toast-alert-orange-bar);

  --toast-info-bg: var(--color-toast-info-bg);
  --toast-info-border: var(--color-toast-info-border);
  --toast-info-bar: var(--color-toast-info-bar);

  --toast-system-bg: var(--color-toast-system-bg);
  --toast-system-border: var(--color-toast-system-border);
  --toast-system-bar: var(--color-toast-system-bar);

  /* Menu Light */
  --menu-bg: var(--color-neutral-white);
  --menu-border-color: var(--color-neutral-200);
  --menu-text-color: var(--color-neutral-900);
  --menu-trigger-color: var(--color-neutral-900);
  --menu-trigger-hover-bg: var(--color-neutral-100);
  --menu-trigger-hover-color: var(--color-neutral-900);
  --menu-trigger-open-color: var(--color-neutral-white);
  --menu-item-color: var(--color-neutral-900);
  --menu-item-hover-bg: var(--color-purple-500);
  --menu-item-hover-color: var(--color-neutral-white);
  --menu-item-active-color: var(--color-neutral-white);
  --menu-accent-color: var(--color-purple-500);

  /* Action Table Light */
  --action-table-bg: var(--color-purple-200);
  --action-table-text: var(--color-neutral-900);

  /* Header Cell Light */
  --header-cell-text: var(--color-neutral-900);

  /* Row Light */
  --row-bg: var(--color-neutral-050);
  --row-bg-hover: var(--color-neutral-200);
  --row-cell-color: var(--color-neutral-900);

  /* Table Light */
  --empty-table-bg: var(--color-neutral-050);
  --table-bulk-action-active-color: var(--color-neutral-900);
  --table-bulk-action-disabled-color: var(--color-neutral-300);
  --table-bulk-action-hover-bg: var(--color-neutral-200);

  /* Add Button Light */
  --add-button-bg: var(--color-neutral-150);
  --add-button-bg-hover: var(--color-neutral-200);
  --add-button-color: var(--color-neutral-900);

  /* Tabs Light */
  --tab-bg: var(--color-neutral-white);
  --tab-color: var(--color-neutral-300);
  --tab-bg-hover: var(--color-rgba-tab-hover-light);
  --tab-active-bg: var(--color-neutral-100);
  --tab-panel-bg: var(--color-neutral-white);
  --tab-border-color: var(--color-neutral-200);
  --tab-panel-border-color: var(--color-neutral-200);
  --tab-border-active: var(--color-neutral-200);
  --tab-active-color: var(--color-neutral-900);

  /* Line Tabs Light */
  --line-tab-color: var(--color-neutral-900);
  --line-tab-inactive-color: var(--color-neutral-400);
  --line-tab-active-color: var(--color-neutral-900);
  --line-tab-accent-color: var(--color-purple-500);
  --line-tab-focus-color: var(--line-tab-accent-color);
  --line-tab-panel-color: var(--color-neutral-900);
  --line-tab-divider-color: var(--color-neutral-200);
  --tabs-view-active-bg: var(--color-neutral-100);
  --tabs-background-bg: var(--color-neutral-white);
  --tabs-background-color: var(--color-neutral-900);
  --tabs-background-border: var(--color-neutral-200);
  --tabs-background-active-border: var(--color-neutral-200);
  --tabs-badge-bg: var(--color-neutral-200);
  --tabs-badge-bg-last: var(--color-neutral-150);
  --tabs-badge-color: var(--color-neutral-900);
  --tabs-badge-color-last: var(--color-neutral-900);
  --tabs-badge-active-bg: var(--color-status-auto500-bg-light);
  --tabs-badge-active-color: var(--color-neutral-900);
  --tabs-add-color: var(--color-purple-500);
  --tabs-metric-color: var(--color-neutral-400);
  --tabs-metric-active-color: var(--color-neutral-900);

  /* Divider Light */
  --divider-color: var(--color-slate-hover);

  /* Pagination Light */
  --pagination-color: var(--color-neutral-900);
  --pagination-hover-bg: var(--color-rgba-pagination-hover-light);
  --pagination-active-bg: var(--color-purple-500);
  --pagination-active-color: var(--color-neutral-white);

  /* Banner Light */
  --banner-title-color: var(--color-neutral-900);
  --banner-subtitle-color: var(--color-neutral-500);
  --banner-subtitle-bg: var(--color-neutral-150);
  --banner-illustration-bg: var(--color-neutral-150);
  --banner-illustration-error-monom: url("data:image/svg+xml,%3csvg%20width='171'%20height='100'%20viewBox='0%200%20171%20100'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M75.3296%204.36619C75.5035%204.19231%2075.6822%204.02326%2075.8657%203.85421C75.9479%203.78177%2076.03%203.70931%2076.1121%203.64169C76.2135%203.55475%2076.3101%203.46783%2076.4164%203.38089C76.5275%203.28912%2076.6385%203.20217%2076.7545%203.11523C76.8317%203.05727%2076.909%202.99448%2076.9863%202.93652C77.1119%202.84475%2077.2375%202.75298%2077.3679%202.66604C77.4403%202.61774%2077.5079%202.56945%2077.5755%202.52115C77.706%202.43421%2077.8412%202.34727%2077.9764%202.26516C78.0489%202.22169%2078.1165%202.17338%2078.189%202.13474C78.3242%202.05263%2078.4546%201.98019%2078.5899%201.90291C78.6671%201.85944%2078.7444%201.81596%2078.8217%201.77249C78.9473%201.70487%2079.0777%201.63725%2079.2081%201.57446C79.2999%201.53099%2079.3868%201.48269%2079.4786%201.43922C79.5945%201.38126%2079.7152%201.33297%2079.836%201.27984C79.9423%201.23154%2080.0485%201.18324%2080.1548%201.13977C80.261%201.0963%2080.3673%201.05282%2080.4735%201.01418C80.5991%200.965882%2080.7199%200.917593%2080.8455%200.874123C80.9372%200.840313%2081.0338%200.811327%2081.1256%200.777517C81.2657%200.729217%2081.4009%200.685748%2081.5458%200.642278C81.6279%200.618128%2081.7149%200.593981%2081.797%200.569831C81.9467%200.526362%2082.0964%200.482892%2082.251%200.449082C82.3283%200.429762%2082.4104%200.410434%2082.4876%200.395944C82.6422%200.362134%2082.8016%200.323499%2082.961%200.294519C83.0431%200.280029%2083.1252%200.265541%2083.2073%200.251051C83.3619%200.222071%2083.5164%200.193089%2083.6758%200.173769C83.7724%200.159279%2083.8642%200.149616%2083.9608%200.139956C84.1057%200.120636%2084.2506%200.101323%2084.3955%200.086833C84.5211%200.0723431%2084.6515%200.0675142%2084.7771%200.0578543C84.893%200.0481943%2085.0041%200.0385255%2085.12%200.0336955C85.3663%200.0240355%2085.6127%200.0143862%2085.859%200.0143862C86.1053%200.0143862%2086.3516%200.0192056%2086.598%200.0336955C86.7139%200.0385255%2086.825%200.0481943%2086.9409%200.0578543C87.0665%200.0675142%2087.1969%200.0723431%2087.3225%200.086833C87.4674%200.101323%2087.6123%200.120636%2087.7523%200.139956C87.8489%200.154446%2087.9407%200.164114%2088.0373%200.178604C88.1919%200.202754%2088.3464%200.231735%2088.5058%200.255885C88.5879%200.270375%2088.67%200.284864%2088.7521%200.299353C88.9115%200.328333%2089.0661%200.366969%2089.2206%200.400779C89.3027%200.420099%2089.38%200.434597%2089.4621%200.453917C89.6119%200.492556%2089.7616%200.531196%2089.9113%200.574666C89.9983%200.598816%2090.0804%200.622963%2090.1673%200.647113C90.3074%200.690583%2090.4426%200.734052%2090.5827%200.782352C90.6793%200.816162%2090.7711%200.845133%2090.8677%200.878943C90.9933%200.922413%2091.114%200.970717%2091.2348%201.01902C91.341%201.06249%2091.4521%201.10113%2091.5584%201.1446C91.6646%201.18807%2091.7709%201.23637%2091.8771%201.28467C91.9979%201.3378%2092.1186%201.39093%2092.2394%201.44889C92.3311%201.49236%2092.4181%201.53583%2092.5099%201.5793C92.6403%201.64692%2092.7707%201.70971%2092.9011%201.77733C92.9784%201.8208%2093.0557%201.86426%2093.1329%201.90773C93.2682%201.98501%2093.4034%202.0623%2093.5386%202.13958C93.6063%202.18305%2093.6787%202.22651%2093.7464%202.26998C93.8816%202.35692%2094.0168%202.43903%2094.1521%202.5308C94.2197%202.5791%2094.2873%202.62741%2094.3549%202.67088C94.4853%202.76265%2094.6158%202.84958%2094.7413%202.94618C94.8186%203.00414%2094.8911%203.0621%2094.9683%203.12006C95.0843%203.207%2095.2002%203.29877%2095.3113%203.39054C95.4079%203.47265%2095.5044%203.55475%2095.6011%203.64169C95.688%203.71897%2095.7749%203.79143%2095.8619%203.86388C96.2241%204.19232%2096.5767%204.54008%2096.9052%204.90716C96.9824%204.9941%2097.0549%205.08103%2097.1321%205.16797C97.2143%205.26457%2097.3012%205.36117%2097.3833%205.45777C97.4751%205.56886%2097.5669%205.68478%2097.6538%205.8007C97.7118%205.87798%2097.7697%205.95043%2097.8277%206.02771C97.9243%206.15329%2098.0112%206.28371%2098.103%206.41412C98.1513%206.48174%2098.1996%206.54935%2098.2431%206.61697C98.3348%206.75221%2098.4169%206.88744%2098.5039%207.02268C98.5474%207.0903%2098.5908%207.15793%2098.6343%207.23038C98.7164%207.36562%2098.7937%207.50086%2098.871%207.6361C98.9144%207.71338%2098.9579%207.79066%2098.9966%207.86311C99.0642%207.99352%2099.1318%208.12393%2099.1946%208.25434C99.238%208.34128%2099.2863%208.43304%2099.325%208.51998C99.3829%208.64073%2099.4361%208.76148%2099.4892%208.88223C99.5375%208.98849%2099.581%209.08992%2099.6244%209.19618C99.6679%209.30244%2099.7114%209.41353%2099.75%209.51979C99.7983%209.64054%2099.8466%209.76613%2099.8901%209.88688C99.9239%209.98347%2099.9529%2010.0752%2099.9867%2010.1718C100.035%2010.3071%20100.078%2010.4471%20100.122%2010.5872C100.146%2010.6742%20100.17%2010.7563%20100.194%2010.8432C100.238%2010.9929%20100.276%2011.1427%20100.315%2011.2924C100.334%2011.3745%20100.354%2011.4518%20100.373%2011.5339C100.407%2011.6884%20100.446%2011.843%20100.475%2012.0024C100.489%2012.0845%20100.503%2012.1666%20100.518%2012.2536C100.547%2012.4081%20100.571%2012.5627%20100.595%2012.7172C100.61%2012.8138%20100.619%2012.9104%20100.634%2013.007C100.653%2013.1519%20100.673%2013.292%20100.687%2013.4369C100.702%2013.5673%20100.706%2013.6929%20100.716%2013.8233C100.726%2013.9344%20100.735%2014.0503%20100.74%2014.1614C100.75%2014.4077%20100.759%2014.6541%20100.759%2014.9004V35.5292L70.9633%2065.393V50.8693L26.199%2095.6336C23.2914%2098.5412%2019.4757%2099.9999%2015.6648%2099.9999C7.42486%2099.9999%20-0.810258%2093.2089%200.0639689%2079.6318L75.3248%204.37103L75.3296%204.36619Z'%20fill='%230D0D0D'/%3e%3cpath%20d='M170.133%2033.9257V91.5812C156.995%20106.535%20140.336%2097.4207%20140.336%2084.4184V63.7895L170.133%2033.9257Z'%20fill='%230D0D0D'/%3e%3cpath%20d='M144.688%204.37596C147.601%201.45865%20151.416%200%20155.237%200C159.043%200%20162.854%201.44899%20165.761%204.35181C171.586%2010.1623%20171.596%2019.5952%20165.786%2025.4202L96.4222%2094.9382C93.5097%2097.8555%2089.694%2099.3141%2085.8735%2099.3141C82.053%2099.3141%2078.2566%2097.8651%2075.349%2094.9623C69.524%2089.1519%2070.7315%2078.4872%2070.7315%2078.4872L144.688%204.37596Z'%20fill='%230D0D0D'/%3e%3cpath%20d='M15.9207%2030.3756C24.0914%2030.3756%2030.715%2023.752%2030.715%2015.5813C30.715%207.41069%2024.0914%200.787078%2015.9207%200.787078C7.75009%200.787078%201.12648%207.41069%201.12648%2015.5813C1.12648%2023.752%207.75009%2030.3756%2015.9207%2030.3756Z'%20fill='%230D0D0D'/%3e%3c/svg%3e");

  /* Tooltip Light */
  --tooltip-bg: var(--color-neutral-050);
  --tooltip-text: var(--color-neutral-900);
  --tooltip-border: var(--color-neutral-200);
  --tooltip-shadow: var(--color-rgba-shadow-toast);
}

/* =========================================================
   3. THEME DARK
   ========================================================= */

[data-theme="dark"],
[data-theme="DARK"] {
  --primary-color: var(--color-purple-500);
  --color-bg: var(--color-neutral-1000);
  --color-text: var(--color-neutral-white);
  --color-text-button: var(--color-neutral-white);
  --color-text-secondary: var(--color-purple-400);
  --color-text-disabled: var(--color-neutral-400);

  /* Button badge */
  --button-badge-text-color: var(--color-neutral-white);
  --button-badge-notification-bg: var(--input-error-color);
  --button-badge-primary-bg: var(--color-purple-400);

  /* Variants */
  --background-color-primary: var(--color-purple-500);

  /* Variants hover */
  --background-color-primary-hover: var(--color-purple-700);
  --background-color-secondary-hover: var(--color-slate-border);
  --background-color-filter: var(--color-slate-700);
  --background-color-filter-hover: var(--color-slate-hover);
  --background-color-filter-disabled: var(--color-slate-800);
  --color-text-filter: var(--color-neutral-white);
  --color-text-filter-disabled: var(--color-slate-700);

  /* Variants disabled */
  --background-color-primary-disabled: var(--color-slate-border);
  --border-color-secondary-disabled: var(--color-neutral-300);

  /* Variants login */
  --background-color-login: var(--color-neutral-white);
  --background-color-login-hover: var(--color-neutral-login-hover-dark);
  --background-color-login-disabled: var(--color-slate-border);
  --color-text-login: var(--color-neutral-900);
  --color-text-login-disabled: var(--color-neutral-login-disabled-text-dark);

  /* Chip Dark Variants */
  --chip-emergency-bg: var(--color-emergency-bg);
  --chip-emergency-border: var(--color-emergency-border-dark);
  --chip-emergency-text: var(--color-emergency-text);

  --chip-critical-bg: var(--color-status-critical-bg-dark);
  --chip-critical-border: var(--color-status-critical-border);

  --chip-high-bg: var(--color-status-high-bg-dark);
  --chip-high-border: var(--color-status-high-border);

  --chip-medium-bg: var(--color-status-medium-bg-dark);
  --chip-medium-border: var(--color-status-medium-border);

  --chip-low-bg: var(--color-status-low-bg-dark);
  --chip-low-border: var(--color-status-low-border);

  --chip-good-bg: var(--color-status-good-bg-dark);
  --chip-good-border: var(--color-status-good-border);

  --chip-normal-bg: var(--color-status-normal-bg-dark);
  --chip-normal-border: var(--color-status-normal-border);

  --chip-criticalSensor-bg: var(--color-status-criticalSensor-bg-dark);
  --chip-criticalSensor-border: var(--color-status-criticalSensor-border);

  --chip-active-bg: var(--color-status-active-bg-dark);
  --chip-active-border: var(--color-status-active-border);

  --chip-auto400-bg: var(--color-status-auto400-bg-dark);
  --chip-auto500-bg: var(--color-status-auto500-bg-dark);

  --chip-unknown-bg: var(--color-status-unknown-bg-dark);
  --chip-unknown-border: var(--color-status-unknown-border-dark);

  --chip-auto-bg: var(--color-status-auto-bg-dark);
  --chip-auto-border: var(--color-status-auto-border-dark);

  --chip-text: var(--color-neutral-white);
  --chip-counter: var(--color-slate-border);

  /* Status Dot (dark) */
  --statusdot-unknown-color: var(--color-grey-700);
  --statusdot-auto500-color: var(--color-darkblue-500);
  --statusdot-auto400-color: var(--color-darkblue-400);

  /* dropdown */
  --select-dropdown-bg: var(--color-slate-700);
  --select-dropdown-text: var(--color-neutral-white);
  --select-control-bg: var(--color-slate-700);
  --select-border-color: var(--color-slate-border);
  --select-scrollbar-thumb: var(--color-rgba-scrollbar-thumb-light);
  --select-placeholder-color: var(--color-neutral-400);

  /* Input Dark */
  --input-bg: var(--color-slate-700);
  --input-label-color: var(--color-neutral-white);
  --input-label-disabled-color: var(--color-rgba-input-label-disabled-dark);
  --input-text-color: var(--color-neutral-white);
  --input-placeholder-color: var(--color-neutral-500);
  --textarea-placeholder-color: var(--color-neutral-400);
  --textarea-formated-placeholder-color: var(--color-neutral-400);
  --input-border-color: var(--color-slate-800);
  --input-border-focus-color: var(--color-purple-500);
  --input-border-error-color: var(--color-status-error-hex);
  --input-icon-color: var(--color-neutral-500);
  --input-helper-color: var(--color-neutral-500);
  --input-helper-disabled-color: var(--color-rgba-input-helper-disabled);
  --input-error-color: var(--color-status-error-hex);
  --input-scrollbar-thumb: var(--color-neutral-600);
  --input-scrollbar-track: transparent;
  --input-arrows-hover-bg: var(--color-slate-900);

  /* Checkbox Dark */
  --checkbox-border: var(--color-neutral-200);
  --checkbox-bg: var(--color-slate-700);
  --checkbox-icon-color: var(--color-neutral-white);
  --checkbox-label-color: var(--color-neutral-white);
  --checkbox-active-bg: var(--color-purple-400);
  --checkbox-active-border: var(--color-purple-400);

  /* RadioButton Dark */
  --radio-button-border: var(--color-neutral-200);
  --radio-button-bg: var(--color-slate-700);
  --radio-button-active-bg: transparent;
  --radio-button-active-border: var(--color-purple-400);
  --radio-button-active-dot: var(--color-purple-400);
  --radio-button-check-bg: var(--color-purple-400);
  --radio-button-check-icon: var(--color-neutral-white);
  --radio-button-disabled-bg: transparent;
  --radio-button-disabled-opacity: var(--opacity-disabled);
  --radio-button-label-color: var(--color-neutral-white);
  --radio-button-label-active-color: var(--color-neutral-off-white);

  /* Card Dark */
  --card-solid-bg: var(--color-slate-800);
  --card-solid-border: var(--color-slate-border);
  --card-outline-bg: transparent;
  --card-outline-border: var(--color-slate-border);
  --card-only-border-bg: transparent;
  --card-only-border-border: var(--color-slate-border);
  --card-title-color: var(--color-neutral-white);
  --card-action-color: var(--color-purple-400);
  --card-hover-bg: var(--color-slate-hover);

  /* Empty Dark */
  --empty-bg: var(--color-slate-800);
  --empty-text-color: var(--color-neutral-white);
  --empty-action-color: var(--color-purple-400);
  --empty-icon-wrapper-bg: var(--color-slate-700);
  --empty-monom-bg: var(--color-slate-700);
  --empty-monom-path: var(--color-neutral-400);

  /* Notification Dark */
  --notification-list-bg: var(--color-slate-800);
  --notification-list-border: var(--color-slate-700);
  --notification-item-bg: var(--color-slate-700);
  --notification-item-bg-hover: var(--color-slate-hover);
  --notification-title-color: var(--color-neutral-white);
  --notification-subtitle-color: var(--color-neutral-400);
  --notification-description-color: var(--color-neutral-400);
  --notification-value-color: var(--color-neutral-white);
  --notification-date-color: var(--color-neutral-400);
  --notification-header-color: var(--color-neutral-white);
  --notification-action-color: var(--color-purple-400);
  --notification-empty-color: var(--color-neutral-white);
  --notification-empty-icon-color: var(--color-neutral-white);
  --notification-icon-color: var(--color-neutral-white);

  --notification-emergency-bar: var(--color-neutral-emergency-border);
  --notification-emergency-icon-bg: var(--color-neutral-600);
  --notification-emergency-icon-color: var(--color-neutral-emergency-border);

  --notification-critical-bar: var(--color-status-critical-border);
  --notification-critical-icon-bg: var(--color-status-critical-bg-dark);
  --notification-critical-icon-color: var(--color-neutral-white);

  --notification-high-bar: var(--color-status-high-border);
  --notification-high-icon-bg: var(--color-status-high-bg-dark);
  --notification-high-icon-color: var(--color-neutral-white);

  --notification-medium-bar: var(--color-status-medium-border);
  --notification-medium-icon-bg: var(--color-status-medium-bg-dark);
  --notification-medium-icon-color: var(--color-neutral-white);

  --notification-low-bar: var(--color-status-low-border);
  --notification-low-icon-bg: var(--color-status-low-bg-dark);
  --notification-low-icon-color: var(--color-neutral-white);

  --notification-good-bar: var(--color-status-good-border);
  --notification-good-icon-bg: var(--color-status-good-bg-dark);
  --notification-good-icon-color: var(--color-neutral-white);

  --notification-normal-bar: var(--color-status-normal-border);
  --notification-normal-icon-bg: var(--color-status-normal-bg-dark);
  --notification-normal-icon-color: var(--color-neutral-white);

  --notification-criticalSensor-bar: var(--color-status-criticalSensor-border);
  --notification-criticalSensor-icon-bg: var(--color-status-criticalSensor-bg-dark);
  --notification-criticalSensor-icon-color: var(--color-neutral-white);

  --notification-active-bar: var(--color-status-active-border);
  --notification-active-icon-bg: var(--color-status-active-bg-dark);
  --notification-active-icon-color: var(--color-neutral-white);

  --notification-auto400-bar: var(--color-status-auto400-bg-dark);
  --notification-auto400-icon-bg: var(--color-status-auto400-bg-dark);
  --notification-auto400-icon-color: var(--color-neutral-white);

  --notification-auto500-bar: var(--color-status-auto500-bg-dark);
  --notification-auto500-icon-bg: var(--color-status-auto500-bg-dark);
  --notification-auto500-icon-color: var(--color-neutral-white);

  --notification-unknown-bar: var(--color-status-unknown-border-dark);
  --notification-unknown-icon-bg: var(--color-status-unknown-bg-dark);
  --notification-unknown-icon-color: var(--color-neutral-white);

  /* Modal Dark */
  --modal-bg: var(--color-slate-950);
  --modal-title-color: var(--color-neutral-white);
  --modal-subtitle-color: var(--color-neutral-400);
  --modal-close-color: var(--color-neutral-white);
  --modal-border-color: var(--color-slate-border);

  /* Toast Dark */
  --toast-title-color: var(--color-neutral-white);
  --toast-description-color: var(--color-neutral-400);
  --toast-close-color: var(--color-neutral-400);

  --toast-ok-bg: var(--color-slate-800);
  --toast-ok-border: var(--color-status-normal-border);
  --toast-ok-bar: var(--color-status-normal-border);

  --toast-alert-bg: var(--color-slate-800);
  --toast-alert-border: var(--color-status-critical-border);
  --toast-alert-bar: var(--color-status-critical-border);

  --toast-alert-orange-bg: var(--color-slate-800);
  --toast-alert-orange-border: var(--color-status-high-border);
  --toast-alert-orange-bar: var(--color-status-high-border);

  --toast-info-bg: var(--color-slate-800);
  --toast-info-border: var(--color-status-active-border);
  --toast-info-bar: var(--color-status-active-border);

  --toast-system-bg: var(--color-slate-800);
  --toast-system-border: var(--color-neutral-600);
  --toast-system-bar: var(--color-neutral-500);

  /* Menu Dark */
  --menu-bg: var(--color-slate-700);
  --menu-border-color: var(--color-slate-border);
  --menu-text-color: var(--color-neutral-white);
  --menu-trigger-color: var(--color-neutral-white);
  --menu-trigger-hover-bg: var(--color-slate-hover);
  --menu-trigger-hover-color: var(--color-neutral-white);
  --menu-trigger-open-color: var(--color-neutral-white);
  --menu-item-color: var(--color-neutral-white);
  --menu-item-hover-bg: var(--color-purple-500);
  --menu-item-hover-color: var(--color-neutral-white);
  --menu-item-active-color: var(--color-neutral-white);
  --menu-accent-color: var(--color-purple-500);

  /* Action Table Dark */
  --action-table-bg: var(--color-slate-border);
  --action-table-text: var(--color-neutral-white);

  /* Header Cell Dark */
  --header-cell-text: var(--color-neutral-white);

  /* Row Dark */
  --row-bg: var(--color-slate-800);
  --row-bg-hover: var(--color-slate-700);
  --row-cell-color: var(--color-neutral-white);

  /* Empty Table Dark */
  --empty-table-bg: var(--color-slate-800);

  /* Table Dark */
  --table-border-color: var(--color-slate-border);
  --table-bulk-action-active-color: var(--color-neutral-white);
  --table-bulk-action-disabled-color: var(--color-slate-hover);
  --table-bulk-action-hover-bg: var(--color-slate-700);

  /* Add Button Dark */
  --add-button-bg: var(--color-slate-700);
  --add-button-bg-hover: var(--color-slate-border);
  --add-button-color: var(--color-neutral-white);

  /* Tabs Dark */
  --tab-bg: var(--color-slate-800);
  --tab-color: var(--color-neutral-500);
  --tab-bg-hover: var(--color-rgba-tab-hover-dark);
  --tab-active-bg: var(--color-slate-700);
  --tab-panel-bg: var(--color-slate-800);
  --tab-border-color: var(--color-slate-border);
  --tab-panel-border-color: var(--color-slate-hover);
  --tab-border-active: var(--color-slate-border);
  --tab-active-color: var(--color-neutral-white);

  /* Line Tabs Dark */
  --line-tab-color: var(--color-neutral-white);
  --line-tab-inactive-color: var(--color-neutral-400);
  --line-tab-active-color: var(--color-neutral-white);
  --line-tab-accent-color: var(--color-purple-400);
  --line-tab-focus-color: var(--line-tab-accent-color);
  --line-tab-panel-color: var(--color-neutral-white);
  --line-tab-divider-color: var(--color-slate-hover);
  --tabs-view-active-bg: var(--color-slate-hover);
  --tabs-background-bg: var(--color-slate-800);
  --tabs-background-color: var(--color-neutral-white);
  --tabs-background-border: var(--color-slate-800);
  --tabs-background-active-border: var(--color-status-auto500-bg-light);
  --tabs-badge-bg: var(--color-neutral-200);
  --tabs-badge-bg-last: var(--color-slate-700);
  --tabs-badge-color: var(--color-neutral-900);
  --tabs-badge-color-last: var(--color-neutral-white);
  --tabs-badge-active-bg: var(--color-status-auto500-bg-light);
  --tabs-badge-active-color: var(--color-neutral-900);
  --tabs-add-color: var(--color-purple-400);
  --tabs-metric-color: var(--color-neutral-400);
  --tabs-metric-active-color: var(--color-neutral-white);

  /* Divider Dark */
  --divider-color: var(--color-slate-hover);

  /* Pagination Dark */
  --pagination-color: var(--color-neutral-white);
  --pagination-hover-bg: var(--color-rgba-pagination-hover-dark);
  --pagination-active-bg: var(--color-purple-500);
  --pagination-active-color: var(--color-neutral-white);

  /* Banner Dark */
  --banner-title-color: var(--color-neutral-white);
  --banner-subtitle-color: var(--color-neutral-400);
  --banner-subtitle-bg: var(--color-slate-800);
  --banner-illustration-bg: var(--color-slate-800);
  --banner-illustration-error-monom: url("data:image/svg+xml,%3csvg%20width='171'%20height='100'%20viewBox='0%200%20171%20100'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M75.3296%204.36619C75.5035%204.19231%2075.6822%204.02326%2075.8657%203.85421C75.9479%203.78177%2076.03%203.70931%2076.1121%203.64169C76.2135%203.55475%2076.3101%203.46783%2076.4164%203.38089C76.5275%203.28912%2076.6385%203.20217%2076.7545%203.11523C76.8317%203.05727%2076.909%202.99448%2076.9863%202.93652C77.1119%202.84475%2077.2375%202.75298%2077.3679%202.66604C77.4403%202.61774%2077.5079%202.56945%2077.5755%202.52115C77.706%202.43421%2077.8412%202.34727%2077.9764%202.26516C78.0489%202.22169%2078.1165%202.17338%2078.189%202.13474C78.3242%202.05263%2078.4546%201.98019%2078.5899%201.90291C78.6671%201.85944%2078.7444%201.81596%2078.8217%201.77249C78.9473%201.70487%2079.0777%201.63725%2079.2081%201.57446C79.2999%201.53099%2079.3868%201.48269%2079.4786%201.43922C79.5945%201.38126%2079.7152%201.33297%2079.836%201.27984C79.9423%201.23154%2080.0485%201.18324%2080.1548%201.13977C80.261%201.0963%2080.3673%201.05282%2080.4735%201.01418C80.5991%200.965882%2080.7199%200.917593%2080.8455%200.874123C80.9372%200.840313%2081.0338%200.811327%2081.1256%200.777517C81.2657%200.729217%2081.4009%200.685748%2081.5458%200.642278C81.6279%200.618128%2081.7149%200.593981%2081.797%200.569831C81.9467%200.526362%2082.0964%200.482892%2082.251%200.449082C82.3283%200.429762%2082.4104%200.410434%2082.4876%200.395944C82.6422%200.362134%2082.8016%200.323499%2082.961%200.294519C83.0431%200.280029%2083.1252%200.265541%2083.2073%200.251051C83.3619%200.222071%2083.5164%200.193089%2083.6758%200.173769C83.7724%200.159279%2083.8642%200.149616%2083.9608%200.139956C84.1057%200.120636%2084.2506%200.101323%2084.3955%200.086833C84.5211%200.0723431%2084.6515%200.0675142%2084.7771%200.0578543C84.893%200.0481943%2085.0041%200.0385255%2085.12%200.0336955C85.3663%200.0240355%2085.6127%200.0143862%2085.859%200.0143862C86.1053%200.0143862%2086.3516%200.0192056%2086.598%200.0336955C86.7139%200.0385255%2086.825%200.0481943%2086.9409%200.0578543C87.0665%200.0675142%2087.1969%200.0723431%2087.3225%200.086833C87.4674%200.101323%2087.6123%200.120636%2087.7523%200.139956C87.8489%200.154446%2087.9407%200.164114%2088.0373%200.178604C88.1919%200.202754%2088.3464%200.231735%2088.5058%200.255885C88.5879%200.270375%2088.67%200.284864%2088.7521%200.299353C88.9115%200.328333%2089.0661%200.366969%2089.2206%200.400779C89.3027%200.420099%2089.38%200.434597%2089.4621%200.453917C89.6119%200.492556%2089.7616%200.531196%2089.9113%200.574666C89.9983%200.598816%2090.0804%200.622963%2090.1673%200.647113C90.3074%200.690583%2090.4426%200.734052%2090.5827%200.782352C90.6793%200.816162%2090.7711%200.845133%2090.8677%200.878943C90.9933%200.922413%2091.114%200.970717%2091.2348%201.01902C91.341%201.06249%2091.4521%201.10113%2091.5584%201.1446C91.6646%201.18807%2091.7709%201.23637%2091.8771%201.28467C91.9979%201.3378%2092.1186%201.39093%2092.2394%201.44889C92.3311%201.49236%2092.4181%201.53583%2092.5099%201.5793C92.6403%201.64692%2092.7707%201.70971%2092.9011%201.77733C92.9784%201.8208%2093.0557%201.86426%2093.1329%201.90773C93.2682%201.98501%2093.4034%202.0623%2093.5386%202.13958C93.6063%202.18305%2093.6787%202.22651%2093.7464%202.26998C93.8816%202.35692%2094.0168%202.43903%2094.1521%202.5308C94.2197%202.5791%2094.2873%202.62741%2094.3549%202.67088C94.4853%202.76265%2094.6158%202.84958%2094.7413%202.94618C94.8186%203.00414%2094.8911%203.0621%2094.9683%203.12006C95.0843%203.207%2095.2002%203.29877%2095.3113%203.39054C95.4079%203.47265%2095.5044%203.55475%2095.6011%203.64169C95.688%203.71897%2095.7749%203.79143%2095.8619%203.86388C96.2241%204.19232%2096.5767%204.54008%2096.9052%204.90716C96.9824%204.9941%2097.0549%205.08103%2097.1321%205.16797C97.2143%205.26457%2097.3012%205.36117%2097.3833%205.45777C97.4751%205.56886%2097.5669%205.68478%2097.6538%205.8007C97.7118%205.87798%2097.7697%205.95043%2097.8277%206.02771C97.9243%206.15329%2098.0112%206.28371%2098.103%206.41412C98.1513%206.48174%2098.1996%206.54935%2098.2431%206.61697C98.3348%206.75221%2098.4169%206.88744%2098.5039%207.02268C98.5474%207.0903%2098.5908%207.15793%2098.6343%207.23038C98.7164%207.36562%2098.7937%207.50086%2098.871%207.6361C98.9144%207.71338%2098.9579%207.79066%2098.9966%207.86311C99.0642%207.99352%2099.1318%208.12393%2099.1946%208.25434C99.238%208.34128%2099.2863%208.43304%2099.325%208.51998C99.3829%208.64073%2099.4361%208.76148%2099.4892%208.88223C99.5375%208.98849%2099.581%209.08992%2099.6244%209.19618C99.6679%209.30244%2099.7114%209.41353%2099.75%209.51979C99.7983%209.64054%2099.8466%209.76613%2099.8901%209.88688C99.9239%209.98347%2099.9529%2010.0752%2099.9867%2010.1718C100.035%2010.3071%20100.078%2010.4471%20100.122%2010.5872C100.146%2010.6742%20100.17%2010.7563%20100.194%2010.8432C100.238%2010.9929%20100.276%2011.1427%20100.315%2011.2924C100.334%2011.3745%20100.354%2011.4518%20100.373%2011.5339C100.407%2011.6884%20100.446%2011.843%20100.475%2012.0024C100.489%2012.0845%20100.503%2012.1666%20100.518%2012.2536C100.547%2012.4081%20100.571%2012.5627%20100.595%2012.7172C100.61%2012.8138%20100.619%2012.9104%20100.634%2013.007C100.653%2013.1519%20100.673%2013.292%20100.687%2013.4369C100.702%2013.5673%20100.706%2013.6929%20100.716%2013.8233C100.726%2013.9344%20100.735%2014.0503%20100.74%2014.1614C100.75%2014.4077%20100.759%2014.6541%20100.759%2014.9004V35.5292L70.9633%2065.393V50.8693L26.199%2095.6336C23.2914%2098.5412%2019.4757%2099.9999%2015.6648%2099.9999C7.42486%2099.9999%20-0.810258%2093.2089%200.0639689%2079.6318L75.3248%204.37103L75.3296%204.36619Z'%20fill='white'/%3e%3cpath%20d='M170.133%2033.9257V91.5812C156.995%20106.535%20140.336%2097.4207%20140.336%2084.4184V63.7895L170.133%2033.9257Z'%20fill='white'/%3e%3cpath%20d='M144.688%204.37596C147.601%201.45865%20151.416%200%20155.237%200C159.043%200%20162.854%201.44899%20165.761%204.35181C171.586%2010.1623%20171.596%2019.5952%20165.786%2025.4202L96.4222%2094.9382C93.5097%2097.8555%2089.694%2099.3141%2085.8735%2099.3141C82.053%2099.3141%2078.2566%2097.8651%2075.349%2094.9623C69.524%2089.1519%2070.7315%2078.4872%2070.7315%2078.4872L144.688%204.37596Z'%20fill='white'/%3e%3cpath%20d='M15.9207%2030.3756C24.0914%2030.3756%2030.715%2023.752%2030.715%2015.5813C30.715%207.41069%2024.0914%200.787078%2015.9207%200.787078C7.75009%200.787078%201.12648%207.41069%201.12648%2015.5813C1.12648%2023.752%207.75009%2030.3756%2015.9207%2030.3756Z'%20fill='white'/%3e%3c/svg%3e");

  /* Tooltip Dark */
  --tooltip-bg: var(--color-darkblue-800);
  --tooltip-text: var(--color-neutral-white);
  --tooltip-border: var(--color-neutral-800);
  --tooltip-shadow: var(--color-rgba-shadow-modal-grouping);
}
/*$vite$:1*/