:root {
    --blue-50:#e3e4e7;
    --blue-100:#b9bcc2;
    --blue-200:#8a8f99;
    --blue-300:#5b6270;
    --blue-400:#374152;
    --blue-500:#141f33;
    --blue-600:#121b2e;
    --blue-700:#0e1727;
    --blue-800:#0b1220;
    --blue-900:#060a14;
    --blue-A100:#5679ff;
    --blue-A200:#2350ff;
    --blue-A400:#0031ef;
    --blue-A700:#002cd5;

        --blue-transparent-50: rgba(227, 228, 231, 0.5, 0.5);
        --blue-transparent-100: rgba(185, 188, 194, 0.5);
        --blue-transparent-200: rgba(138, 143, 153, 0.5);
        --blue-transparent-300: rgba(91, 98, 112, 0.5);
        --blue-transparent-400: rgba(55, 65, 82, 0.5);
        --blue-transparent-500: rgba(20, 31, 51, 0.5);
        --blue-transparent-600: rgba(18, 27, 46, 0.5);
        --blue-transparent-700: rgba(14, 23, 39, 0.5);
        --blue-transparent-800: rgba(11, 18, 32, 0.5);
        --blue-transparent-900: rgba(6, 10, 20, 0.5);
        --blue-transparent-A100: rgba(86, 121, 255, 0.5);
        --blue-transparent-A200: rgba(35, 80, 255, 0.5);
        --blue-transparent-A400: rgba(0, 49, 239, 0.5);
        --blue-transparent-A700: rgba(0, 44, 213, 0.5);

    --blue-light-50:#e4e6ea;
    --blue-light-100:#bcc1cb;
    --blue-light-200:#9098a8;
    --blue-light-300:#636f85;
    --blue-light-400:#41506b;
    --blue-light-500:#203151;
    --blue-light-600:#1c2c4a;
    --blue-light-700:#182540;
    --blue-light-800:#131f37;
    --blue-light-900:#0b1327;
    --blue-light-A100:#658aff;
    --blue-light-A200:#3263ff;
    --blue-light-A400:#003dfe;
    --blue-light-A700:#0036e5;
    
        --blue-light-transparent-50: rgba(228, 230, 234, 0.5);
        --blue-light-transparent-100: rgba(188, 193, 203, 0.5);
        --blue-light-transparent-200: rgba(144, 152, 168, 0.5);
        --blue-light-transparent-300: rgba(99, 111, 133, 0.5);
        --blue-light-transparent-400: rgba(65, 80, 107, 0.5);
        --blue-light-transparent-500-15: rgba(32, 49, 81, 0.15);
        --blue-light-transparent-500-25: rgba(32, 49, 81, 0.25);
        --blue-light-transparent-500-50: rgba(32, 49, 81, 0.5);
        --blue-light-transparent-500-60: rgba(32, 49, 81, 0.6);
        --blue-light-transparent-500-75: rgba(32, 49, 81, 0.75);
        --blue-light-transparent-500-90: rgba(32, 49, 81, 0.9);
        --blue-light-transparent-600: rgba(28, 44, 74, 0.5);
        --blue-light-transparent-700: rgba(24, 37, 64, 0.5);
        --blue-light-transparent-800: rgba(19, 31, 55, 0.5);
        --blue-light-transparent-900: rgba(11, 19, 39, 0.5);
        --blue-light-transparent-A100: rgba(101, 138, 255, 0.5);
        --blue-light-transparent-A200: rgba(50, 99, 255, 0.5);
        --blue-light-transparent-A400: rgba(0, 61, 254, 0.5);
        --blue-light-transparent-A700: rgba(0, 54, 229, 0.5);

    --off-white-50:#fafafa;
    --off-white-100:#f3f2f2;
    --off-white-200:#ebe9e9;
    --off-white-300:#e2e0e0;
    --off-white-400:#dcd9d9;
    --off-white-500:#d6d2d2;
    --off-white-600:#d1cdcd;
    --off-white-700:#ccc7c7;
    --off-white-800:#c6c1c1;
    --off-white-900:#bcb6b6;
    --off-white-A100:#ffffff;
    --off-white-A200:#ffffff;
    --off-white-A400:#ffffff;
    --off-white-A700:#fff7f7;
    
        --off-white-transparent-50: rgba(250, 250, 250, 0.5);
        --off-white-transparent-100: rgba(243, 242, 242, 0.5);
        --off-white-transparent-200: rgba(235, 233, 233, 0.5);
        --off-white-transparent-300: rgba(226, 224, 224, 0.5);
        --off-white-transparent-400: rgba(220, 217, 217, 0.5);
        --off-white-transparent-500: rgba(214, 210, 210, 0.5);
        --off-white-transparent-600: rgba(209, 205, 205, 0.5);
        --off-white-transparent-700: rgba(204, 199, 199, 0.5);
        --off-white-transparent-800: rgba(198, 193, 193, 0.5);
        --off-white-transparent-900: rgba(188, 182, 182, 0.5);
        --off-white-transparent-A100: rgba(255, 255, 255, 0.5);
        --off-white-transparent-A200: rgba(255, 255, 255, 0.5);
        --off-white-transparent-A400: rgba(255, 255, 255, 0.5);
        --off-white-transparent-A700: rgba(255, 247, 247, 0.5);

    --red-50:#ffe7e7;
    --red-100:#ffc2c3;
    --red-200:#ff999c;
    --red-300:#ff7074;
    --red-400:#ff5256;
    --red-500:#ff3338;
    --red-600:#ff2e32;
    --red-700:#ff272b;
    --red-800:#ff2024;
    --red-900:#ff1417;
    --red-A100:#ffffff;
    --red-A200:#fffbfb;
    --red-A400:#ffc8c8;
    --red-A700:#ffaeaf;
    
        --red-transparent-50: rgba(255, 231, 231, 0.5);
        --red-transparent-100: rgba(255, 194, 195, 0.5);
        --red-transparent-200: rgba(255, 153, 156, 0.5);
        --red-transparent-300: rgba(255, 112, 116, 0.5);
        --red-transparent-400: rgba(255, 82, 86, 0.5);
        --red-transparent-500-15: rgba(255, 51, 56, 0.15);
        --red-transparent-500-25: rgba(255, 51, 56, 0.25);
        --red-transparent-500-50: rgba(255, 51, 56, 0.5);
        --red-transparent-500-75: rgba(255, 51, 56, 0.75);
        --red-transparent-500-90: rgba(255, 51, 56, 0.90);
        --red-transparent-600: rgba(255, 46, 50, 0.5);
        --red-transparent-700: rgba(255, 39, 43, 0.5);
        --red-transparent-800: rgba(255, 32, 36, 0.5);
        --red-transparent-900: rgba(255, 20, 23, 0.5);
        --red-transparent-A100: rgba(255, 255, 255, 0.5);
        --red-transparent-A200: rgba(255, 251, 251, 0.5);
        --red-transparent-A400: rgba(255, 200, 200, 0.5);
        --red-transparent-A700: rgba(255, 174, 175, 0.5);

    --bluegray-50:#f7f8f9;
    --bluegray-100:#dadee3;
    --bluegray-200:#bcc3cd;
    --bluegray-300:#9fa9b7;
    --bluegray-400:#818ea1;
    --bluegray-500:#64748b;
    --bluegray-600:#556376;
    --bluegray-700:#465161;
    --bluegray-800:#37404c;
    --bluegray-900:#282e38;
    --bluegray-A100:#ffffff;
    --bluegray-A200:#f7f8f9;
    --bluegray-A400:#dadee3;
    --bluegray-A700:#bcc3cd;
        
        --bluegray-transparent-50: rgba(247, 248, 249, 0.5);
        --bluegray-transparent-100: rgba(218, 222, 227, 0.5);
        --bluegray-transparent-200: rgba(188, 195, 205, 0.5);
        --bluegray-transparent-300: rgba(159, 169, 183, 0.5);
        --bluegray-transparent-400: rgba(129, 142, 161, 0.5);
        --bluegray-transparent-500: rgba(100, 116, 139, 0.5);
        --bluegray-transparent-600: rgba(85, 99, 118, 0.5);
        --bluegray-transparent-700: rgba(70, 81, 97, 0.5);
        --bluegray-transparent-800: rgba(55, 64, 76, 0.5);
        --bluegray-transparent-900: rgba(40, 46, 56, 0.5);
        --bluegray-transparent-A100: rgba(247, 248, 249, 0.5);
        --bluegray-transparent-A200: rgba(218, 222, 227, 0.5);
        --bluegray-transparent-A400: rgba(129, 142, 161, 0.5);
        --bluegray-transparent-A700: rgba(40, 46, 56, 0.5);

    --primary-50:#f7fbff;
    --primary-100:#d9e9fe;
    --primary-200:#bbd8fd;
    --primary-300:#9cc7fc;
    --primary-400:#7eb6fb;
    --primary-500:#60a5fa;
    --primary-600:#528cd5;
    --primary-700:#4374af;
    --primary-800:#355b8a;
    --primary-900:#264264;
    --primary-A100:#8cd4ff;
    --primary-A200:#5abfff;
    --primary-A400:#29a9ff;
    --primary-A700:#0f9fff;
    
        --primary-transparent-50: rgba(247, 251, 255, 0.5);
        --primary-transparent-100: rgba(217, 233, 254, 0.5);
        --primary-transparent-200: rgba(187, 216, 253, 0.5);
        --primary-transparent-300: rgba(156, 199, 252, 0.5);
        --primary-transparent-400: rgba(126, 182, 251, 0.5);
        --primary-transparent-500: rgba(96, 165, 250, 0.5);
        --primary-transparent-600: rgba(82, 140, 213, 0.5);
        --primary-transparent-700: rgba(67, 116, 175, 0.5);
        --primary-transparent-800: rgba(53, 91, 138, 0.5);
        --primary-transparent-900: rgba(38, 66, 100, 0.5);
        --primary-transparent-A100: rgba(96, 165, 250, 0.5);
        --primary-transparent-A200: rgba(96, 165, 250, 0.5);
        --primary-transparent-A400: rgba(96, 165, 250, 0.5);
        --primary-transparent-A700: rgba(96, 165, 250, 0.5);
        color-scheme: dark;
  }
:root[class*='app-dark'] {
  font-family: 'IBM Plex Sans", sans-serif';
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variation-settings: normal;
  --font-family: "IBM Plex Sans", sans-serif;
  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --text-color: #D6D2D2;
  --text-color-reverse: rgba(20, 31, 51);
  --text-primary-highlight-color: #e7e3e3;
  --paginator-highlight-color: #626262;
  --text-color-secondary: rgba(255, 255, 255, 0.6);
  --text-color-muted: rgb(167 167 167);
  --primary-color: #D6D2D2; /* #FF3338 OPT-RED */
  --primary-color-red: var(--red-500);
  --primary-color-red-button-transparent: var(--red-transparent-500-75);
  --primary-color-red-border-transparent: var(--red-transparent-500-50);
  --primary-color-red-tag-title: var(--red-transparent-500-90);
  --primary-color-light-blue: var(--blue-light-500);
  --primary-color-blue: var(--blue-500);
  --primary-color-text: var(--off-white-500);
  --primary-color-hover:var(--red-transparent-500-15);

  --surface-hover: var(--primary-color-hover);
  --surface-ground: var(--p-light-surface-500);
  --surface-topbar: var(--blue-600);
  --surface-section: var(--blue-light-transparent-500-75);
  --surface-card: var(--blue-light-500);/* var(--blue-light-500) OPT-RED */
  --surface-card-transparent: rgba(32, 49, 81, 0.36);/* var(--blue-light-500) OPT-RED */
  --surface-card-image: var(--blue-500);
  --card-image-icon: var(--red-500);
  --surface-map-card: var(--blue-light-transparent-500-75);
  --danger-surface: var(--red-transparent-500-50);
  --surface-overlay: var(--primary-color-blue);
  --surface-border: rgba(255, 255, 255, 0.25);
  --surface-900: var(--off-white-50);
  --content-padding: 1.25rem;
  --inline-spacing: 0.5rem;
  --border-radius: 6px;
  --focus-ring: 0 0 0 0.1rem var(--primary-color-red-border-transparent);
  --maskbg: rgba(0, 0, 0, 0.4);
  --primary-box-shadow:
      0px 3px 10px -2px rgba(0, 0, 0, 0.2),
      0px 2px 2px 0px rgba(0, 0, 0, 0.14),
      0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --dragged-box-shadow:
          0px 3px 10px -2px rgb(32, 49, 81),
          0px 2px 2px 0px rgba(18, 101, 255, 0.2),
          0px 1px 5px 0px rgba(32, 49, 81, 0.2);
  /* color-scheme: dark; */
  --p-card-color:'red'
}
:root {
  font-family: 'IBM Plex Sans", sans-serif';
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variation-settings: normal;
  --font-family: "IBM Plex Sans", sans-serif;
  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --text-color: rgba(20, 31, 51, 0.87);
  --text-color-reverse: #d6d2d2;
  --text-primary-highlight-color: #e7e3e3;
  --paginator-highlight-color: #626262;
  --text-color-secondary: rgba(255, 255, 255, 0.6);
  --text-color-muted: rgba(255, 255, 255, 0.6);
  --primary-color: #D6D2D2; /* #FF3338 OPT-RED */
  --primary-color-red: var(--red-500);
  --primary-color-red-button-transparent: var(--red-transparent-500-75);
  --primary-color-red-border-transparent: var(--red-transparent-500-50);
  --primary-color-red-tag-title: var(--red-transparent-500-90);
  --primary-color-light-blue: var(--blue-light-500);
  --primary-color-blue: var(--blue-500);
  --primary-color-text: var(--off-white-500);
  --primary-color-hover:var(--red-transparent-500-15);
  
  --surface-hover: var(--primary-color-hover);
  --surface-ground: var(--off-white-500);
  --surface-topbar: var(--blue-500);
  --surface-section: var(--blue-light-transparent-500-75);
  --surface-card: var(--off-white-500);
  --surface-card-image: var(--off-white-500);
  --card-image-icon: var(--blue-500);
  --surface-map-card: var(--blue-light-transparent-500-75);
  --danger-surface: #ff000680;
  --surface-overlay: var(--primary-color-blue);
  --surface-border: rgba(255, 255, 255, 0.1);  
  --surface-900: var(--off-white-50);
  --content-padding: 1.25rem;
  --inline-spacing: 0.5rem;
  --border-radius: 6px;
  --focus-ring: 0 0 0 0.1rem var(--primary-color-red-border-transparent);
  --maskbg: rgba(0, 0, 0, 0.4);
  --primary-box-shadow:
      0px 3px 10px -2px rgba(0, 0, 0, 0.3),
      0px 2px 2px 0px rgba(0, 0, 0, 0.24),
      0px 1px 5px 0px rgba(0, 0, 0, 0.22);
  --dragged-box-shadow:
          0px 3px 10px -2px rgb(32, 49, 81),
          0px 2px 2px 0px rgba(18, 101, 255, 0.2),
          0px 1px 5px 0px rgba(32, 49, 81, 0.2);
  color-scheme: dark;
}

:root{
  /* TAB VIEW */
  --tabview-highlight-background-hover: var(--blue-500);
  --tabview-highlight-border-hover: var(--red-500);
  --tabview-highlight-background: var(--blue-500);
  --tabview-highlight-border: var(--primary-color-red);
  --tabview-nav-btn-link-background: transparent;
  --tabview-nav-btn-link-color: var(--text-color);
  --tabview-panels: var(--opt-content-background);
  /* TREE */
  --tree-background-color: var(--surface-topbar);
  /* BORDERS */
  --border-right: 2px solid var(--red-600);
  --border-right-hover: 2px solid var(--red-transparent-600);
  --border-left: 2px solid var(--red-600);
  --border-left-hover: 2px solid var(--red-transparent-600);
  --border-card-image: none;
  /* INPUT BORDERS */
  --border-invalid: var(--red-300);
  --table-header-bg: var(--blue-light-500);
}