/* ================================================
   HORIZONT DESIGN SYSTEM — tokens (fuente de verdad)
   Link this file in every app. Do not copy or regenerate it.
   Palette holds the only hex values; semantic tokens use var().
   Light values live on :root. Set data-theme="dark" on <html> (or a subtree)
   to apply dark values to the same token names.
   This file loads Material Symbols Outlined. Do not add a second icon <link>.
   App CSS: layout and exceptions only, always via var(--…).
   ================================================ */

@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block");

.material-symbols-outlined {
  box-sizing: border-box;
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  user-select: none;
}

:root {

  /* ========================================= COLORS ========================================= */


  /* --------------------------------- Palette --------------------------------- */
  /* color */
  --color-white: #FFFFFF;
  --color-50: #f4f6fd;
  --color-100: #dee5fa;
  --color-200: #beccf4;
  --color-300: #93aaed;
  --color-400: #5c7fe4;
  --color-500: #2654DB;
  --color-600: #2047ba;
  --color-700: #1b3b99;
  --color-800: #152e78;
  --color-900: #0f2258;
  --color-950: #0a1537;
  --color-black: #000000;
  /* neutral */
  --neutral-white: var(--color-white);
  --neutral-50: #f8f8f9;
  --neutral-100: #e9eaec;
  --neutral-200: #d3d5d9;
  --neutral-300: #b5b9c0;
  --neutral-400: #9095a0;
  --neutral-500: #6B7280;
  --neutral-600: #5b616d;
  --neutral-700: #4b505a;
  --neutral-800: #3b3f46;
  --neutral-900: #2b2e33;
  --neutral-950: #1b1d20;
  --neutral-black: var(--color-black);
  /* success */
  --success-white: var(--color-white);
  --success-50: #f3fcf9;
  --success-100: #dbf5ec;
  --success-200: #b7ead9;
  --success-300: #88dcc0;
  --success-400: #4ccba1;
  --success-500: #10B981;
  --success-600: #0e9d6e;
  --success-700: #0b825a;
  --success-800: #096647;
  --success-900: #064a34;
  --success-950: #042e20;
  --success-black: var(--color-black);
  /* warning */
  --warning-white: var(--color-white);
  --warning-50: #fffaf3;
  --warning-100: #fef0da;
  --warning-200: #fce2b6;
  --warning-300: #facf85;
  --warning-400: #f8b648;
  --warning-500: #F59E0B;
  --warning-600: #d08609;
  --warning-700: #ac6f08;
  --warning-800: #875706;
  --warning-900: #623f04;
  --warning-950: #3d2803;
  --warning-black: var(--color-black);
  /* error */
  --error-white: var(--color-white);
  --error-50: #fef6f6;
  --error-100: #fde3e3;
  --error-200: #fac7c7;
  --error-300: #f7a2a2;
  --error-400: #f37373;
  --error-500: #EF4444;
  --error-600: #cb3a3a;
  --error-700: #a73030;
  --error-800: #832525;
  --error-900: #601b1b;
  --error-950: #3c1111;
  --error-black: var(--color-black);
  /* info */
  --info-white: var(--color-white);
  --info-50: #f2faff;
  --info-100: #d9efff;
  --info-200: #b3deff;
  --info-300: #80c8ff;
  --info-400: #40adff;
  --info-500: #0091FF;
  --info-600: #007bd9;
  --info-700: #0066b3;
  --info-800: #00508c;
  --info-900: #003a66;
  --info-950: #002440;
  --info-black: var(--color-black);


  /* Semantic tokens below reference the palette. Do not hardcode hex here. */
  /* --------------------------------- Content --------------------------------- */
  /* --- BRAND-BLUE --- */

  
    /*--- default ---*/
  --brand-blue-content-default-border: transparent;
  --brand-blue-content-default-bg: var(--color-white);
  --brand-blue-content-default-text-div: var(--color-500);
  --brand-blue-content-default-title: var(--color-900);
  --brand-blue-content-default-para: var(--color-900);
  /*--- subtle ---*/
  --brand-blue-content-subtle-border: transparent;
  --brand-blue-content-subtle-bg: var(--color-50);
  --brand-blue-content-subtle-text-div: var(--color-600);
  --brand-blue-content-subtle-title: var(--color-900);
  --brand-blue-content-subtle-para: var(--color-900);
  /*--- primary ---*/
  --brand-blue-content-primary-border: transparent;
  --brand-blue-content-primary-bg: var(--color-500);
  --brand-blue-content-primary-text-div: var(--color-white);
  --brand-blue-content-primary-title: var(--color-white);
  --brand-blue-content-primary-para: var(--color-white);
  /*--- bordered ---*/
  --brand-blue-content-bordered-border: var(--color-300);
  --brand-blue-content-bordered-bg: var(--color-white);
  --brand-blue-content-bordered-text-div: var(--color-500);
  --brand-blue-content-bordered-title: var(--color-900);
  --brand-blue-content-bordered-para: var(--color-900);
  /* --- NEUTRAL --- */

  
    /*--- default ---*/
  --neutral-content-default-border: transparent;
  --neutral-content-default-bg: var(--neutral-white);
  --neutral-content-default-text-div: var(--neutral-500);
  --neutral-content-default-title: var(--neutral-900);
  --neutral-content-default-para: var(--neutral-900);
  /*--- subtle ---*/
  --neutral-content-subtle-border: transparent;
  --neutral-content-subtle-bg: var(--neutral-50);
  --neutral-content-subtle-text-div: var(--neutral-600);
  --neutral-content-subtle-title: var(--neutral-900);
  --neutral-content-subtle-para: var(--neutral-900);
  /*--- primary ---*/
  --neutral-content-primary-border: transparent;
  --neutral-content-primary-bg: var(--neutral-500);
  --neutral-content-primary-text-div: var(--neutral-white);
  --neutral-content-primary-title: var(--neutral-white);
  --neutral-content-primary-para: var(--neutral-white);
  /*--- bordered ---*/
  --neutral-content-bordered-border: var(--neutral-300);
  --neutral-content-bordered-bg: var(--neutral-white);
  --neutral-content-bordered-text-div: var(--neutral-500);
  --neutral-content-bordered-title: var(--neutral-900);
  --neutral-content-bordered-para: var(--neutral-900);
  /* --- SUCCESS --- */

  
    /*--- default ---*/
  --success-content-default-border: transparent;
  --success-content-default-bg: var(--success-white);
  --success-content-default-text-div: var(--success-500);
  --success-content-default-title: var(--success-900);
  --success-content-default-para: var(--success-900);
  /*--- subtle ---*/
  --success-content-subtle-border: transparent;
  --success-content-subtle-bg: var(--success-50);
  --success-content-subtle-text-div: var(--success-600);
  --success-content-subtle-title: var(--success-900);
  --success-content-subtle-para: var(--success-900);
  /*--- primary ---*/
  --success-content-primary-border: transparent;
  --success-content-primary-bg: var(--success-500);
  --success-content-primary-text-div: var(--success-white);
  --success-content-primary-title: var(--success-white);
  --success-content-primary-para: var(--success-white);
  /*--- bordered ---*/
  --success-content-bordered-border: var(--success-300);
  --success-content-bordered-bg: var(--success-white);
  --success-content-bordered-text-div: var(--success-500);
  --success-content-bordered-title: var(--success-900);
  --success-content-bordered-para: var(--success-900);
  /* --- WARNING --- */

  
    /*--- default ---*/
  --warning-content-default-border: transparent;
  --warning-content-default-bg: var(--warning-white);
  --warning-content-default-text-div: var(--warning-500);
  --warning-content-default-title: var(--warning-900);
  --warning-content-default-para: var(--warning-900);
  /*--- subtle ---*/
  --warning-content-subtle-border: transparent;
  --warning-content-subtle-bg: var(--warning-50);
  --warning-content-subtle-text-div: var(--warning-600);
  --warning-content-subtle-title: var(--warning-900);
  --warning-content-subtle-para: var(--warning-900);
  /*--- primary ---*/
  --warning-content-primary-border: transparent;
  --warning-content-primary-bg: var(--warning-500);
  --warning-content-primary-text-div: var(--warning-white);
  --warning-content-primary-title: var(--warning-white);
  --warning-content-primary-para: var(--warning-white);
  /*--- bordered ---*/
  --warning-content-bordered-border: var(--warning-300);
  --warning-content-bordered-bg: var(--warning-white);
  --warning-content-bordered-text-div: var(--warning-500);
  --warning-content-bordered-title: var(--warning-900);
  --warning-content-bordered-para: var(--warning-900);
  /* --- ERROR --- */

  
    /*--- default ---*/
  --error-content-default-border: transparent;
  --error-content-default-bg: var(--error-white);
  --error-content-default-text-div: var(--error-500);
  --error-content-default-title: var(--error-900);
  --error-content-default-para: var(--error-900);
  /*--- subtle ---*/
  --error-content-subtle-border: transparent;
  --error-content-subtle-bg: var(--error-50);
  --error-content-subtle-text-div: var(--error-600);
  --error-content-subtle-title: var(--error-900);
  --error-content-subtle-para: var(--error-900);
  /*--- primary ---*/
  --error-content-primary-border: transparent;
  --error-content-primary-bg: var(--error-500);
  --error-content-primary-text-div: var(--error-white);
  --error-content-primary-title: var(--error-white);
  --error-content-primary-para: var(--error-white);
  /*--- bordered ---*/
  --error-content-bordered-border: var(--error-300);
  --error-content-bordered-bg: var(--error-white);
  --error-content-bordered-text-div: var(--error-500);
  --error-content-bordered-title: var(--error-900);
  --error-content-bordered-para: var(--error-900);
  /* --- INFO --- */

  
    /*--- default ---*/
  --info-content-default-border: transparent;
  --info-content-default-bg: var(--info-white);
  --info-content-default-text-div: var(--info-500);
  --info-content-default-title: var(--info-900);
  --info-content-default-para: var(--info-900);
  /*--- subtle ---*/
  --info-content-subtle-border: transparent;
  --info-content-subtle-bg: var(--info-50);
  --info-content-subtle-text-div: var(--info-600);
  --info-content-subtle-title: var(--info-900);
  --info-content-subtle-para: var(--info-900);
  /*--- primary ---*/
  --info-content-primary-border: transparent;
  --info-content-primary-bg: var(--info-500);
  --info-content-primary-text-div: var(--info-white);
  --info-content-primary-title: var(--info-white);
  --info-content-primary-para: var(--info-white);
  /*--- bordered ---*/
  --info-content-bordered-border: var(--info-300);
  --info-content-bordered-bg: var(--info-white);
  --info-content-bordered-text-div: var(--info-500);
  --info-content-bordered-title: var(--info-900);
  --info-content-bordered-para: var(--info-900);


  /* --------------------------------- Buttons --------------------------------- */

  /* -- brand -- */
  /*--- solid ---*/
  --brand-blue-btn-solid-bg: var(--color-500);
  --brand-blue-btn-solid-text: var(--color-white);
  --brand-blue-btn-solid-border: var(--color-500);
  --brand-blue-btn-solid-hover-bg: var(--color-600);
  --brand-blue-btn-solid-hover-text: var(--color-white);
  --brand-blue-btn-solid-hover-border: var(--color-600);
  --brand-blue-btn-solid-active-bg: var(--color-600);
  --brand-blue-btn-solid-active-text: var(--color-white);
  --brand-blue-btn-solid-active-border: var(--color-600);
  --brand-blue-btn-solid-disabled-bg: var(--color-500);
  --brand-blue-btn-solid-disabled-text: var(--color-white);
  --brand-blue-btn-solid-disabled-border: var(--color-500);
  /*--- soft ---*/
  --brand-blue-btn-soft-bg: var(--color-300);
  --brand-blue-btn-soft-text: var(--color-white);
  --brand-blue-btn-soft-border: var(--color-100);
  --brand-blue-btn-soft-hover-bg: var(--color-400);
  --brand-blue-btn-soft-hover-text: var(--color-white);
  --brand-blue-btn-soft-hover-border: var(--color-200);
  --brand-blue-btn-soft-active-bg: var(--color-400);
  --brand-blue-btn-soft-active-text: var(--color-white);
  --brand-blue-btn-soft-active-border: var(--color-200);
  --brand-blue-btn-soft-disabled-bg: var(--color-300);
  --brand-blue-btn-soft-disabled-text: var(--color-white);
  --brand-blue-btn-soft-disabled-border: var(--color-200);
  /*--- surface ---*/
  --brand-blue-btn-surface-bg: var(--color-50);
  --brand-blue-btn-surface-text: var(--color-500);
  --brand-blue-btn-surface-border: var(--color-200);
  --brand-blue-btn-surface-hover-bg: var(--color-100);
  --brand-blue-btn-surface-hover-text: var(--color-600);
  --brand-blue-btn-surface-hover-border: var(--color-300);
  --brand-blue-btn-surface-active-bg: var(--color-100);
  --brand-blue-btn-surface-active-text: var(--color-600);
  --brand-blue-btn-surface-active-border: var(--color-300);
  --brand-blue-btn-surface-disabled-bg: var(--color-50);
  --brand-blue-btn-surface-disabled-text: var(--color-500);
  --brand-blue-btn-surface-disabled-border: var(--color-200);
  /*--- outline ---*/
  --brand-blue-btn-outline-bg: transparent;
  --brand-blue-btn-outline-text: var(--color-500);
  --brand-blue-btn-outline-border: var(--color-500);
  --brand-blue-btn-outline-hover-bg: var(--color-600);
  --brand-blue-btn-outline-hover-text: var(--color-white);
  --brand-blue-btn-outline-hover-border: var(--color-600);
  --brand-blue-btn-outline-active-bg: var(--color-600);
  --brand-blue-btn-outline-active-text: var(--color-white);
  --brand-blue-btn-outline-active-border: var(--color-600);
  --brand-blue-btn-outline-disabled-bg: transparent;
  --brand-blue-btn-outline-disabled-text: var(--color-500);
  --brand-blue-btn-outline-disabled-border: var(--color-500);


  /* -- neutral -- */
  /*--- solid ---*/
  --neutral-btn-solid-bg: var(--color-500);
  --neutral-btn-solid-text: var(--neutral-white);
  --neutral-btn-solid-border: var(--color-500);
  --neutral-btn-solid-hover-bg: var(--color-600);
  --neutral-btn-solid-hover-text: var(--neutral-white);
  --neutral-btn-solid-hover-border: var(--color-600);
  --neutral-btn-solid-active-bg: var(--color-600);
  --neutral-btn-solid-active-text: var(--neutral-white);
  --neutral-btn-solid-active-border: var(--color-600);
  --neutral-btn-solid-disabled-bg: var(--color-500);
  --neutral-btn-solid-disabled-text: var(--neutral-white);
  --neutral-btn-solid-disabled-border: var(--color-500);
  /*--- soft ---*/
  --neutral-btn-soft-bg: var(--color-300);
  --neutral-btn-soft-text: var(--neutral-white);
  --neutral-btn-soft-border: var(--color-100);
  --neutral-btn-soft-hover-bg: var(--color-400);
  --neutral-btn-soft-hover-text: var(--neutral-white);
  --neutral-btn-soft-hover-border: var(--color-200);
  --neutral-btn-soft-active-bg: var(--color-400);
  --neutral-btn-soft-active-text: var(--neutral-white);
  --neutral-btn-soft-active-border: var(--color-200);
  --neutral-btn-soft-disabled-bg: var(--color-300);
  --neutral-btn-soft-disabled-text: var(--neutral-white);
  --neutral-btn-soft-disabled-border: var(--color-200);
  /*--- surface ---*/
  --neutral-btn-surface-bg: var(--color-50);
  --neutral-btn-surface-text: var(--color-500);
  --neutral-btn-surface-border: var(--color-200);
  --neutral-btn-surface-hover-bg: var(--color-100);
  --neutral-btn-surface-hover-text: var(--color-600);
  --neutral-btn-surface-hover-border: var(--color-300);
  --neutral-btn-surface-active-bg: var(--color-100);
  --neutral-btn-surface-active-text: var(--color-600);
  --neutral-btn-surface-active-border: var(--color-300);
  --neutral-btn-surface-disabled-bg: var(--color-50);
  --neutral-btn-surface-disabled-text: var(--color-500);
  --neutral-btn-surface-disabled-border: var(--color-200);
  /*--- outline ---*/
  --neutral-btn-outline-bg: transparent;
  --neutral-btn-outline-text: var(--color-500);
  --neutral-btn-outline-border: var(--color-500);
  --neutral-btn-outline-hover-bg: var(--color-600);
  --neutral-btn-outline-hover-text: var(--color-white);
  --neutral-btn-outline-hover-border: var(--color-600);
  --neutral-btn-outline-active-bg: var(--color-600);
  --neutral-btn-outline-active-text: var(--color-white);
  --neutral-btn-outline-active-border: var(--color-600);
  --neutral-btn-outline-disabled-bg: transparent;
  --neutral-btn-outline-disabled-text: var(--color-500);
  --neutral-btn-outline-disabled-border: var(--color-500);


  /* -- success -- */
  /*--- solid ---*/
  --success-btn-solid-bg: var(--color-500);
  --success-btn-solid-text: var(--success-white);
  --success-btn-solid-border: var(--color-500);
  --success-btn-solid-hover-bg: var(--color-600);
  --success-btn-solid-hover-text: var(--success-white);
  --success-btn-solid-hover-border: var(--color-600);
  --success-btn-solid-active-bg: var(--color-600);
  --success-btn-solid-active-text: var(--success-white);
  --success-btn-solid-active-border: var(--color-600);
  --success-btn-solid-disabled-bg: var(--color-500);
  --success-btn-solid-disabled-text: var(--success-white);
  --success-btn-solid-disabled-border: var(--color-500);
  /*--- soft ---*/
  --success-btn-soft-bg: var(--color-300);
  --success-btn-soft-text: var(--success-white);
  --success-btn-soft-border: var(--color-100);
  --success-btn-soft-hover-bg: var(--color-400);
  --success-btn-soft-hover-text: var(--success-white);
  --success-btn-soft-hover-border: var(--color-200);
  --success-btn-soft-active-bg: var(--color-400);
  --success-btn-soft-active-text: var(--success-white);
  --success-btn-soft-active-border: var(--color-200);
  --success-btn-soft-disabled-bg: var(--color-300);
  --success-btn-soft-disabled-text: var(--success-white);
  --success-btn-soft-disabled-border: var(--color-200);
  /*--- surface ---*/
  --success-btn-surface-bg: var(--color-50);
  --success-btn-surface-text: var(--color-500);
  --success-btn-surface-border: var(--color-200);
  --success-btn-surface-hover-bg: var(--color-100);
  --success-btn-surface-hover-text: var(--color-600);
  --success-btn-surface-hover-border: var(--color-300);
  --success-btn-surface-active-bg: var(--color-100);
  --success-btn-surface-active-text: var(--color-600);
  --success-btn-surface-active-border: var(--color-300);
  --success-btn-surface-disabled-bg: var(--color-50);
  --success-btn-surface-disabled-text: var(--color-500);
  --success-btn-surface-disabled-border: var(--color-200);
  /*--- outline ---*/
  --success-btn-outline-bg: transparent;
  --success-btn-outline-text: var(--color-500);
  --success-btn-outline-border: var(--color-500);
  --success-btn-outline-hover-bg: var(--color-600);
  --success-btn-outline-hover-text: var(--color-white);
  --success-btn-outline-hover-border: var(--color-600);
  --success-btn-outline-active-bg: var(--color-600);
  --success-btn-outline-active-text: var(--color-white);
  --success-btn-outline-active-border: var(--color-600);
  --success-btn-outline-disabled-bg: transparent;
  --success-btn-outline-disabled-text: var(--color-500);
  --success-btn-outline-disabled-border: var(--color-500);


  /* -- warning -- */
  /*--- solid ---*/
  --warning-btn-solid-bg: var(--color-500);
  --warning-btn-solid-text: var(--warning-white);
  --warning-btn-solid-border: var(--color-500);
  --warning-btn-solid-hover-bg: var(--color-600);
  --warning-btn-solid-hover-text: var(--warning-white);
  --warning-btn-solid-hover-border: var(--color-600);
  --warning-btn-solid-active-bg: var(--color-600);
  --warning-btn-solid-active-text: var(--warning-white);
  --warning-btn-solid-active-border: var(--color-600);
  --warning-btn-solid-disabled-bg: var(--color-500);
  --warning-btn-solid-disabled-text: var(--warning-white);
  --warning-btn-solid-disabled-border: var(--color-500);
  /*--- soft ---*/
  --warning-btn-soft-bg: var(--color-300);
  --warning-btn-soft-text: var(--warning-white);
  --warning-btn-soft-border: var(--color-100);
  --warning-btn-soft-hover-bg: var(--color-400);
  --warning-btn-soft-hover-text: var(--warning-white);
  --warning-btn-soft-hover-border: var(--color-200);
  --warning-btn-soft-active-bg: var(--color-400);
  --warning-btn-soft-active-text: var(--warning-white);
  --warning-btn-soft-active-border: var(--color-200);
  --warning-btn-soft-disabled-bg: var(--color-300);
  --warning-btn-soft-disabled-text: var(--warning-white);
  --warning-btn-soft-disabled-border: var(--color-200);
  /*--- surface ---*/
  --warning-btn-surface-bg: var(--color-50);
  --warning-btn-surface-text: var(--color-500);
  --warning-btn-surface-border: var(--color-200);
  --warning-btn-surface-hover-bg: var(--color-100);
  --warning-btn-surface-hover-text: var(--color-600);
  --warning-btn-surface-hover-border: var(--color-300);
  --warning-btn-surface-active-bg: var(--color-100);
  --warning-btn-surface-active-text: var(--color-600);
  --warning-btn-surface-active-border: var(--color-300);
  --warning-btn-surface-disabled-bg: var(--color-50);
  --warning-btn-surface-disabled-text: var(--color-500);
  --warning-btn-surface-disabled-border: var(--color-200);
  /*--- outline ---*/
  --warning-btn-outline-bg: transparent;
  --warning-btn-outline-text: var(--color-500);
  --warning-btn-outline-border: var(--color-500);
  --warning-btn-outline-hover-bg: var(--color-600);
  --warning-btn-outline-hover-text: var(--color-white);
  --warning-btn-outline-hover-border: var(--color-600);
  --warning-btn-outline-active-bg: var(--color-600);
  --warning-btn-outline-active-text: var(--color-white);
  --warning-btn-outline-active-border: var(--color-600);
  --warning-btn-outline-disabled-bg: transparent;
  --warning-btn-outline-disabled-text: var(--color-500);
  --warning-btn-outline-disabled-border: var(--color-500);


  /* -- error -- (system red — never brand-blue / --color-*) */
  /*--- solid ---*/
  --error-btn-solid-bg: var(--error-500);
  --error-btn-solid-text: var(--error-white);
  --error-btn-solid-border: var(--error-500);
  --error-btn-solid-hover-bg: var(--error-600);
  --error-btn-solid-hover-text: var(--error-white);
  --error-btn-solid-hover-border: var(--error-600);
  --error-btn-solid-active-bg: var(--error-600);
  --error-btn-solid-active-text: var(--error-white);
  --error-btn-solid-active-border: var(--error-600);
  --error-btn-solid-disabled-bg: var(--error-500);
  --error-btn-solid-disabled-text: var(--error-white);
  --error-btn-solid-disabled-border: var(--error-500);
  /*--- soft ---*/
  --error-btn-soft-bg: var(--error-300);
  --error-btn-soft-text: var(--error-white);
  --error-btn-soft-border: var(--error-100);
  --error-btn-soft-hover-bg: var(--error-400);
  --error-btn-soft-hover-text: var(--error-white);
  --error-btn-soft-hover-border: var(--error-200);
  --error-btn-soft-active-bg: var(--error-400);
  --error-btn-soft-active-text: var(--error-white);
  --error-btn-soft-active-border: var(--error-200);
  --error-btn-soft-disabled-bg: var(--error-300);
  --error-btn-soft-disabled-text: var(--error-white);
  --error-btn-soft-disabled-border: var(--error-200);
  /*--- surface ---*/
  --error-btn-surface-bg: var(--error-50);
  --error-btn-surface-text: var(--error-500);
  --error-btn-surface-border: var(--error-200);
  --error-btn-surface-hover-bg: var(--error-100);
  --error-btn-surface-hover-text: var(--error-600);
  --error-btn-surface-hover-border: var(--error-300);
  --error-btn-surface-active-bg: var(--error-100);
  --error-btn-surface-active-text: var(--error-600);
  --error-btn-surface-active-border: var(--error-300);
  --error-btn-surface-disabled-bg: var(--error-50);
  --error-btn-surface-disabled-text: var(--error-500);
  --error-btn-surface-disabled-border: var(--error-200);
  /*--- outline ---*/
  --error-btn-outline-bg: transparent;
  --error-btn-outline-text: var(--error-500);
  --error-btn-outline-border: var(--error-500);
  --error-btn-outline-hover-bg: var(--error-600);
  --error-btn-outline-hover-text: var(--error-white);
  --error-btn-outline-hover-border: var(--error-600);
  --error-btn-outline-active-bg: var(--error-600);
  --error-btn-outline-active-text: var(--error-white);
  --error-btn-outline-active-border: var(--error-600);
  --error-btn-outline-disabled-bg: transparent;
  --error-btn-outline-disabled-text: var(--error-500);
  --error-btn-outline-disabled-border: var(--error-500);


  /* -- info -- */
  /*--- solid ---*/
  --info-btn-solid-bg: var(--color-500);
  --info-btn-solid-text: var(--info-white);
  --info-btn-solid-border: var(--color-500);
  --info-btn-solid-hover-bg: var(--color-600);
  --info-btn-solid-hover-text: var(--info-white);
  --info-btn-solid-hover-border: var(--color-600);
  --info-btn-solid-active-bg: var(--color-600);
  --info-btn-solid-active-text: var(--info-white);
  --info-btn-solid-active-border: var(--color-600);
  --info-btn-solid-disabled-bg: var(--color-500);
  --info-btn-solid-disabled-text: var(--info-white);
  --info-btn-solid-disabled-border: var(--color-500);
  /*--- soft ---*/
  --info-btn-soft-bg: var(--color-300);
  --info-btn-soft-text: var(--info-white);
  --info-btn-soft-border: var(--color-100);
  --info-btn-soft-hover-bg: var(--color-400);
  --info-btn-soft-hover-text: var(--info-white);
  --info-btn-soft-hover-border: var(--color-200);
  --info-btn-soft-active-bg: var(--color-400);
  --info-btn-soft-active-text: var(--info-white);
  --info-btn-soft-active-border: var(--color-200);
  --info-btn-soft-disabled-bg: var(--color-300);
  --info-btn-soft-disabled-text: var(--info-white);
  --info-btn-soft-disabled-border: var(--color-200);
  /*--- surface ---*/
  --info-btn-surface-bg: var(--color-50);
  --info-btn-surface-text: var(--color-500);
  --info-btn-surface-border: var(--color-200);
  --info-btn-surface-hover-bg: var(--color-100);
  --info-btn-surface-hover-text: var(--color-600);
  --info-btn-surface-hover-border: var(--color-300);
  --info-btn-surface-active-bg: var(--color-100);
  --info-btn-surface-active-text: var(--color-600);
  --info-btn-surface-active-border: var(--color-300);
  --info-btn-surface-disabled-bg: var(--color-50);
  --info-btn-surface-disabled-text: var(--color-500);
  --info-btn-surface-disabled-border: var(--color-200);
  /*--- outline ---*/
  --info-btn-outline-bg: transparent;
  --info-btn-outline-text: var(--color-500);
  --info-btn-outline-border: var(--color-500);
  --info-btn-outline-hover-bg: var(--color-600);
  --info-btn-outline-hover-text: var(--color-white);
  --info-btn-outline-hover-border: var(--color-600);
  --info-btn-outline-active-bg: var(--color-600);
  --info-btn-outline-active-text: var(--color-white);
  --info-btn-outline-active-border: var(--color-600);
  --info-btn-outline-disabled-bg: transparent;
  --info-btn-outline-disabled-text: var(--color-500);
  --info-btn-outline-disabled-border: var(--color-500);


  /* --------------------------------- Links --------------------------------- */

  /* -- brand -- */
  /*--- default ---*/
  --brand-blue-link-text: var(--color-600);
  /*--- hover ---*/
  --brand-blue-link-hover-text: var(--color-800);
  /*--- active ---*/
  --brand-blue-link-active-text: var(--color-800);


  /* -- neutral -- */
  /*--- default ---*/
  --neutral-link-text: var(--color-600);
  /*--- hover ---*/
  --neutral-link-hover-text: var(--color-800);
  /*--- active ---*/
  --neutral-link-active-text: var(--color-800);


  /* -- success -- */
  /*--- default ---*/
  --success-link-text: var(--color-600);
  /*--- hover ---*/
  --success-link-hover-text: var(--color-800);
  /*--- active ---*/
  --success-link-active-text: var(--color-800);


  /* -- warning -- */
  /*--- default ---*/
  --warning-link-text: var(--color-600);
  /*--- hover ---*/
  --warning-link-hover-text: var(--color-800);
  /*--- active ---*/
  --warning-link-active-text: var(--color-800);


  /* -- error -- */
  /*--- default ---*/
  --error-link-text: var(--color-600);
  /*--- hover ---*/
  --error-link-hover-text: var(--color-800);
  /*--- active ---*/
  --error-link-active-text: var(--color-800);


  /* -- info -- */
  /*--- default ---*/
  --info-link-text: var(--color-600);
  /*--- hover ---*/
  --info-link-hover-text: var(--color-800);
  /*--- active ---*/
  --info-link-active-text: var(--color-800);


  /* --------------------------------- Tabs --------------------------------- */

  /* -- brand -- */
  /*--- default ---*/
  --brand-blue-tab-default-bg: transparent;
  --brand-blue-tab-default-text: var(--color-700);
  --brand-blue-tab-default-border: transparent;
  /*--- hover ---*/
  --brand-blue-tab-hover-bg: var(--color-100);
  --brand-blue-tab-hover-text: var(--color-700);
  --brand-blue-tab-hover-border: var(--color-100);
  /*--- active ---*/
  --brand-blue-tab-active-bg: var(--color-500);
  --brand-blue-tab-active-text: var(--color-white);
  --brand-blue-tab-active-border: var(--color-500);
  /*--- disabled ---*/
  --brand-blue-tab-disabled-bg: transparent;
  --brand-blue-tab-disabled-text: var(--color-700);
  --brand-blue-tab-disabled-border: transparent;


  /* -- neutral -- */
  /*--- default ---*/
  --neutral-tab-default-bg: transparent;
  --neutral-tab-default-text: var(--color-700);
  --neutral-tab-default-border: transparent;
  /*--- hover ---*/
  --neutral-tab-hover-bg: var(--color-100);
  --neutral-tab-hover-text: var(--color-700);
  --neutral-tab-hover-border: var(--color-100);
  /*--- active ---*/
  --neutral-tab-active-bg: var(--color-500);
  --neutral-tab-active-text: var(--neutral-white);
  --neutral-tab-active-border: var(--color-500);
  /*--- disabled ---*/
  --neutral-tab-disabled-bg: transparent;
  --neutral-tab-disabled-text: var(--color-700);
  --neutral-tab-disabled-border: transparent;


  /* -- success -- */
  /*--- default ---*/
  --success-tab-default-bg: transparent;
  --success-tab-default-text: var(--color-700);
  --success-tab-default-border: transparent;
  /*--- hover ---*/
  --success-tab-hover-bg: var(--color-100);
  --success-tab-hover-text: var(--color-700);
  --success-tab-hover-border: var(--color-100);
  /*--- active ---*/
  --success-tab-active-bg: var(--color-500);
  --success-tab-active-text: var(--success-white);
  --success-tab-active-border: var(--color-500);
  /*--- disabled ---*/
  --success-tab-disabled-bg: transparent;
  --success-tab-disabled-text: var(--color-700);
  --success-tab-disabled-border: transparent;


  /* -- warning -- */
  /*--- default ---*/
  --warning-tab-default-bg: transparent;
  --warning-tab-default-text: var(--color-700);
  --warning-tab-default-border: transparent;
  /*--- hover ---*/
  --warning-tab-hover-bg: var(--color-100);
  --warning-tab-hover-text: var(--color-700);
  --warning-tab-hover-border: var(--color-100);
  /*--- active ---*/
  --warning-tab-active-bg: var(--color-500);
  --warning-tab-active-text: var(--warning-white);
  --warning-tab-active-border: var(--color-500);
  /*--- disabled ---*/
  --warning-tab-disabled-bg: transparent;
  --warning-tab-disabled-text: var(--color-700);
  --warning-tab-disabled-border: transparent;


  /* -- error -- */
  /*--- default ---*/
  --error-tab-default-bg: transparent;
  --error-tab-default-text: var(--color-700);
  --error-tab-default-border: transparent;
  /*--- hover ---*/
  --error-tab-hover-bg: var(--color-100);
  --error-tab-hover-text: var(--color-700);
  --error-tab-hover-border: var(--color-100);
  /*--- active ---*/
  --error-tab-active-bg: var(--color-500);
  --error-tab-active-text: var(--error-white);
  --error-tab-active-border: var(--color-500);
  /*--- disabled ---*/
  --error-tab-disabled-bg: transparent;
  --error-tab-disabled-text: var(--color-700);
  --error-tab-disabled-border: transparent;


  /* -- info -- */
  /*--- default ---*/
  --info-tab-default-bg: transparent;
  --info-tab-default-text: var(--color-700);
  --info-tab-default-border: transparent;
  /*--- hover ---*/
  --info-tab-hover-bg: var(--color-100);
  --info-tab-hover-text: var(--color-700);
  --info-tab-hover-border: var(--color-100);
  /*--- active ---*/
  --info-tab-active-bg: var(--color-500);
  --info-tab-active-text: var(--info-white);
  --info-tab-active-border: var(--color-500);
  /*--- disabled ---*/
  --info-tab-disabled-bg: transparent;
  --info-tab-disabled-text: var(--color-700);
  --info-tab-disabled-border: transparent;


  /* --------------------------------- Inputs --------------------------------- */

  /* -- brand -- */
  /*--- default ---*/
  --brand-blue-input-default-border: var(--color-300);
  --brand-blue-input-default-bg: var(--color-white);
  --brand-blue-input-default-text: var(--color-700);
  --brand-blue-input-default-placeholder: var(--color-300);
  /*--- hover ---*/
  --brand-blue-input-hover-border: var(--color-500);
  --brand-blue-input-hover-bg: var(--color-white);
  --brand-blue-input-hover-text: var(--color-500);
  /*--- active ---*/
  --brand-blue-input-active-border: var(--color-500);
  --brand-blue-input-active-bg: var(--color-white);
  --brand-blue-input-active-text: var(--color-500);
  /*--- disabled ---*/
  --brand-blue-input-disabled-border: var(--color-200);
  --brand-blue-input-disabled-bg: var(--color-50);
  --brand-blue-input-disabled-text: var(--color-400);


  /* -- neutral -- */
  /*--- default ---*/
  --neutral-input-default-border: var(--color-300);
  --neutral-input-default-bg: var(--neutral-white);
  --neutral-input-default-text: var(--color-700);
  --neutral-input-default-placeholder: var(--color-300);
  /*--- hover ---*/
  --neutral-input-hover-border: var(--color-500);
  --neutral-input-hover-bg: var(--neutral-white);
  --neutral-input-hover-text: var(--color-500);
  /*--- active ---*/
  --neutral-input-active-border: var(--color-500);
  --neutral-input-active-bg: var(--neutral-white);
  --neutral-input-active-text: var(--color-500);
  /*--- disabled ---*/
  --neutral-input-disabled-border: var(--color-200);
  --neutral-input-disabled-bg: var(--color-50);
  --neutral-input-disabled-text: var(--color-400);


  /* -- success -- */
  /*--- default ---*/
  --success-input-default-border: var(--color-300);
  --success-input-default-bg: var(--success-white);
  --success-input-default-text: var(--color-700);
  --success-input-default-placeholder: var(--color-300);
  /*--- hover ---*/
  --success-input-hover-border: var(--color-500);
  --success-input-hover-bg: var(--success-white);
  --success-input-hover-text: var(--color-500);
  /*--- active ---*/
  --success-input-active-border: var(--color-500);
  --success-input-active-bg: var(--success-white);
  --success-input-active-text: var(--color-500);
  /*--- disabled ---*/
  --success-input-disabled-border: var(--color-200);
  --success-input-disabled-bg: var(--color-50);
  --success-input-disabled-text: var(--color-400);


  /* -- warning -- */
  /*--- default ---*/
  --warning-input-default-border: var(--color-300);
  --warning-input-default-bg: var(--warning-white);
  --warning-input-default-text: var(--color-700);
  --warning-input-default-placeholder: var(--color-300);
  /*--- hover ---*/
  --warning-input-hover-border: var(--color-500);
  --warning-input-hover-bg: var(--warning-white);
  --warning-input-hover-text: var(--color-500);
  /*--- active ---*/
  --warning-input-active-border: var(--color-500);
  --warning-input-active-bg: var(--warning-white);
  --warning-input-active-text: var(--color-500);
  /*--- disabled ---*/
  --warning-input-disabled-border: var(--color-200);
  --warning-input-disabled-bg: var(--color-50);
  --warning-input-disabled-text: var(--color-400);


  /* -- error -- */
  /*--- default ---*/
  --error-input-default-border: var(--color-300);
  --error-input-default-bg: var(--error-white);
  --error-input-default-text: var(--color-700);
  --error-input-default-placeholder: var(--color-300);
  /*--- hover ---*/
  --error-input-hover-border: var(--color-500);
  --error-input-hover-bg: var(--error-white);
  --error-input-hover-text: var(--color-500);
  /*--- active ---*/
  --error-input-active-border: var(--color-500);
  --error-input-active-bg: var(--error-white);
  --error-input-active-text: var(--color-500);
  /*--- disabled ---*/
  --error-input-disabled-border: var(--color-200);
  --error-input-disabled-bg: var(--color-50);
  --error-input-disabled-text: var(--color-400);


  /* -- info -- */
  /*--- default ---*/
  --info-input-default-border: var(--color-300);
  --info-input-default-bg: var(--info-white);
  --info-input-default-text: var(--color-700);
  --info-input-default-placeholder: var(--color-300);
  /*--- hover ---*/
  --info-input-hover-border: var(--color-500);
  --info-input-hover-bg: var(--info-white);
  --info-input-hover-text: var(--color-500);
  /*--- active ---*/
  --info-input-active-border: var(--color-500);
  --info-input-active-bg: var(--info-white);
  --info-input-active-text: var(--color-500);
  /*--- disabled ---*/
  --info-input-disabled-border: var(--color-200);
  --info-input-disabled-bg: var(--color-50);
  --info-input-disabled-text: var(--color-400);


  /* --------------------------------- Form Controls --------------------------------- */

  /* -- brand -- */
  /*--- checkradio ---*/

    /*--- default ---*/
  --brand-blue-fc-checkradio-default-bg: var(--color-100);
  --brand-blue-fc-checkradio-default-border: var(--color-200);
  --brand-blue-fc-checkradio-default-indicator: var(--color-100);
  --brand-blue-fc-checkradio-default-text: var(--color-900);
  /*--- hover ---*/
  --brand-blue-fc-checkradio-hover-bg: var(--color-100);
  --brand-blue-fc-checkradio-hover-border: var(--color-400);
  --brand-blue-fc-checkradio-hover-indicator: var(--color-100);
  --brand-blue-fc-checkradio-hover-text: var(--color-900);
  /*--- active ---*/
  --brand-blue-fc-checkradio-active-bg: var(--color-500);
  --brand-blue-fc-checkradio-active-border: var(--color-500);
  --brand-blue-fc-checkradio-active-indicator: var(--color-white);
  --brand-blue-fc-checkradio-active-text: var(--color-900);
  /*--- disabled ---*/
  --brand-blue-fc-checkradio-disabled-bg: var(--color-100);
  --brand-blue-fc-checkradio-disabled-border: var(--color-200);
  --brand-blue-fc-checkradio-disabled-indicator: var(--color-100);
  --brand-blue-fc-checkradio-disabled-text: var(--color-300);
  /*--- switch ---*/

    /*--- default ---*/
  --brand-blue-fc-switch-default-bg: var(--color-200);
  --brand-blue-fc-switch-default-border: var(--color-200);
  --brand-blue-fc-switch-default-indicator: var(--color-white);
  --brand-blue-fc-switch-default-text: var(--color-900);
  /*--- hover ---*/
  --brand-blue-fc-switch-hover-bg: var(--color-400);
  --brand-blue-fc-switch-hover-border: var(--color-400);
  --brand-blue-fc-switch-hover-indicator: var(--color-white);
  --brand-blue-fc-switch-hover-text: var(--color-900);
  /*--- active ---*/
  --brand-blue-fc-switch-active-bg: var(--color-500);
  --brand-blue-fc-switch-active-border: var(--color-500);
  --brand-blue-fc-switch-active-indicator: var(--color-white);
  --brand-blue-fc-switch-active-text: var(--color-900);
  /*--- disabled ---*/
  --brand-blue-fc-switch-disabled-bg: var(--color-100);
  --brand-blue-fc-switch-disabled-border: var(--color-200);
  --brand-blue-fc-switch-disabled-indicator: var(--color-50);
  --brand-blue-fc-switch-disabled-text: var(--color-300);
  /*--- range ---*/

    /*--- default ---*/
  --brand-blue-fc-range-default-base: var(--color-100);
  --brand-blue-fc-range-default-bg: var(--color-200);
  --brand-blue-fc-range-default-border: var(--color-200);
  --brand-blue-fc-range-default-indicator: var(--color-200);
  --brand-blue-fc-range-default-text: var(--color-900);
  /*--- hover ---*/
  --brand-blue-fc-range-hover-base: var(--color-100);
  --brand-blue-fc-range-hover-bg: var(--color-300);
  --brand-blue-fc-range-hover-border: var(--color-300);
  --brand-blue-fc-range-hover-indicator: var(--color-300);
  --brand-blue-fc-range-hover-text: var(--color-900);
  /*--- active ---*/
  --brand-blue-fc-range-active-base: var(--color-100);
  --brand-blue-fc-range-active-bg: var(--color-500);
  --brand-blue-fc-range-active-border: var(--color-500);
  --brand-blue-fc-range-active-indicator: var(--color-500);
  --brand-blue-fc-range-active-text: var(--color-900);
  /*--- disabled ---*/
  --brand-blue-fc-range-disabled-base: var(--color-100);
  --brand-blue-fc-range-disabled-bg: var(--color-100);
  --brand-blue-fc-range-disabled-border: var(--color-200);
  --brand-blue-fc-range-disabled-indicator: var(--color-50);
  --brand-blue-fc-range-disabled-text: var(--color-300);


  /* -- neutral -- */
  /*--- checkradio ---*/

    /*--- default ---*/
  --neutral-fc-checkradio-default-bg: var(--color-100);
  --neutral-fc-checkradio-default-border: var(--color-200);
  --neutral-fc-checkradio-default-indicator: var(--color-100);
  --neutral-fc-checkradio-default-text: var(--color-900);
  /*--- hover ---*/
  --neutral-fc-checkradio-hover-bg: var(--color-100);
  --neutral-fc-checkradio-hover-border: var(--color-400);
  --neutral-fc-checkradio-hover-indicator: var(--color-100);
  --neutral-fc-checkradio-hover-text: var(--color-900);
  /*--- active ---*/
  --neutral-fc-checkradio-active-bg: var(--color-500);
  --neutral-fc-checkradio-active-border: var(--color-500);
  --neutral-fc-checkradio-active-indicator: var(--neutral-white);
  --neutral-fc-checkradio-active-text: var(--color-900);
  /*--- disabled ---*/
  --neutral-fc-checkradio-disabled-bg: var(--color-100);
  --neutral-fc-checkradio-disabled-border: var(--color-200);
  --neutral-fc-checkradio-disabled-indicator: var(--color-100);
  --neutral-fc-checkradio-disabled-text: var(--color-300);
  /*--- switch ---*/

    /*--- default ---*/
  --neutral-fc-switch-default-bg: var(--color-200);
  --neutral-fc-switch-default-border: var(--color-200);
  --neutral-fc-switch-default-indicator: var(--neutral-white);
  --neutral-fc-switch-default-text: var(--color-900);
  /*--- hover ---*/
  --neutral-fc-switch-hover-bg: var(--color-400);
  --neutral-fc-switch-hover-border: var(--color-400);
  --neutral-fc-switch-hover-indicator: var(--neutral-white);
  --neutral-fc-switch-hover-text: var(--color-900);
  /*--- active ---*/
  --neutral-fc-switch-active-bg: var(--color-500);
  --neutral-fc-switch-active-border: var(--color-500);
  --neutral-fc-switch-active-indicator: var(--neutral-white);
  --neutral-fc-switch-active-text: var(--color-900);
  /*--- disabled ---*/
  --neutral-fc-switch-disabled-bg: var(--color-100);
  --neutral-fc-switch-disabled-border: var(--color-200);
  --neutral-fc-switch-disabled-indicator: var(--color-50);
  --neutral-fc-switch-disabled-text: var(--color-300);
  /*--- range ---*/

    /*--- default ---*/
  --neutral-fc-range-default-base: var(--color-100);
  --neutral-fc-range-default-bg: var(--color-200);
  --neutral-fc-range-default-border: var(--color-200);
  --neutral-fc-range-default-indicator: var(--color-200);
  --neutral-fc-range-default-text: var(--color-900);
  /*--- hover ---*/
  --neutral-fc-range-hover-base: var(--color-100);
  --neutral-fc-range-hover-bg: var(--color-300);
  --neutral-fc-range-hover-border: var(--color-300);
  --neutral-fc-range-hover-indicator: var(--color-300);
  --neutral-fc-range-hover-text: var(--color-900);
  /*--- active ---*/
  --neutral-fc-range-active-base: var(--color-100);
  --neutral-fc-range-active-bg: var(--color-500);
  --neutral-fc-range-active-border: var(--color-500);
  --neutral-fc-range-active-indicator: var(--color-500);
  --neutral-fc-range-active-text: var(--color-900);
  /*--- disabled ---*/
  --neutral-fc-range-disabled-base: var(--color-100);
  --neutral-fc-range-disabled-bg: var(--color-100);
  --neutral-fc-range-disabled-border: var(--color-200);
  --neutral-fc-range-disabled-indicator: var(--color-50);
  --neutral-fc-range-disabled-text: var(--color-300);


  /* -- success -- */
  /*--- checkradio ---*/

    /*--- default ---*/
  --success-fc-checkradio-default-bg: var(--color-100);
  --success-fc-checkradio-default-border: var(--color-200);
  --success-fc-checkradio-default-indicator: var(--color-100);
  --success-fc-checkradio-default-text: var(--color-900);
  /*--- hover ---*/
  --success-fc-checkradio-hover-bg: var(--color-100);
  --success-fc-checkradio-hover-border: var(--color-400);
  --success-fc-checkradio-hover-indicator: var(--color-100);
  --success-fc-checkradio-hover-text: var(--color-900);
  /*--- active ---*/
  --success-fc-checkradio-active-bg: var(--color-500);
  --success-fc-checkradio-active-border: var(--color-500);
  --success-fc-checkradio-active-indicator: var(--success-white);
  --success-fc-checkradio-active-text: var(--color-900);
  /*--- disabled ---*/
  --success-fc-checkradio-disabled-bg: var(--color-100);
  --success-fc-checkradio-disabled-border: var(--color-200);
  --success-fc-checkradio-disabled-indicator: var(--color-100);
  --success-fc-checkradio-disabled-text: var(--color-300);
  /*--- switch ---*/

    /*--- default ---*/
  --success-fc-switch-default-bg: var(--color-200);
  --success-fc-switch-default-border: var(--color-200);
  --success-fc-switch-default-indicator: var(--success-white);
  --success-fc-switch-default-text: var(--color-900);
  /*--- hover ---*/
  --success-fc-switch-hover-bg: var(--color-400);
  --success-fc-switch-hover-border: var(--color-400);
  --success-fc-switch-hover-indicator: var(--success-white);
  --success-fc-switch-hover-text: var(--color-900);
  /*--- active ---*/
  --success-fc-switch-active-bg: var(--color-500);
  --success-fc-switch-active-border: var(--color-500);
  --success-fc-switch-active-indicator: var(--success-white);
  --success-fc-switch-active-text: var(--color-900);
  /*--- disabled ---*/
  --success-fc-switch-disabled-bg: var(--color-100);
  --success-fc-switch-disabled-border: var(--color-200);
  --success-fc-switch-disabled-indicator: var(--color-50);
  --success-fc-switch-disabled-text: var(--color-300);
  /*--- range ---*/

    /*--- default ---*/
  --success-fc-range-default-base: var(--color-100);
  --success-fc-range-default-bg: var(--color-200);
  --success-fc-range-default-border: var(--color-200);
  --success-fc-range-default-indicator: var(--color-200);
  --success-fc-range-default-text: var(--color-900);
  /*--- hover ---*/
  --success-fc-range-hover-base: var(--color-100);
  --success-fc-range-hover-bg: var(--color-300);
  --success-fc-range-hover-border: var(--color-300);
  --success-fc-range-hover-indicator: var(--color-300);
  --success-fc-range-hover-text: var(--color-900);
  /*--- active ---*/
  --success-fc-range-active-base: var(--color-100);
  --success-fc-range-active-bg: var(--color-500);
  --success-fc-range-active-border: var(--color-500);
  --success-fc-range-active-indicator: var(--color-500);
  --success-fc-range-active-text: var(--color-900);
  /*--- disabled ---*/
  --success-fc-range-disabled-base: var(--color-100);
  --success-fc-range-disabled-bg: var(--color-100);
  --success-fc-range-disabled-border: var(--color-200);
  --success-fc-range-disabled-indicator: var(--color-50);
  --success-fc-range-disabled-text: var(--color-300);


  /* -- warning -- */
  /*--- checkradio ---*/

    /*--- default ---*/
  --warning-fc-checkradio-default-bg: var(--color-100);
  --warning-fc-checkradio-default-border: var(--color-200);
  --warning-fc-checkradio-default-indicator: var(--color-100);
  --warning-fc-checkradio-default-text: var(--color-900);
  /*--- hover ---*/
  --warning-fc-checkradio-hover-bg: var(--color-100);
  --warning-fc-checkradio-hover-border: var(--color-400);
  --warning-fc-checkradio-hover-indicator: var(--color-100);
  --warning-fc-checkradio-hover-text: var(--color-900);
  /*--- active ---*/
  --warning-fc-checkradio-active-bg: var(--color-500);
  --warning-fc-checkradio-active-border: var(--color-500);
  --warning-fc-checkradio-active-indicator: var(--warning-white);
  --warning-fc-checkradio-active-text: var(--color-900);
  /*--- disabled ---*/
  --warning-fc-checkradio-disabled-bg: var(--color-100);
  --warning-fc-checkradio-disabled-border: var(--color-200);
  --warning-fc-checkradio-disabled-indicator: var(--color-100);
  --warning-fc-checkradio-disabled-text: var(--color-300);
  /*--- switch ---*/

    /*--- default ---*/
  --warning-fc-switch-default-bg: var(--color-200);
  --warning-fc-switch-default-border: var(--color-200);
  --warning-fc-switch-default-indicator: var(--warning-white);
  --warning-fc-switch-default-text: var(--color-900);
  /*--- hover ---*/
  --warning-fc-switch-hover-bg: var(--color-400);
  --warning-fc-switch-hover-border: var(--color-400);
  --warning-fc-switch-hover-indicator: var(--warning-white);
  --warning-fc-switch-hover-text: var(--color-900);
  /*--- active ---*/
  --warning-fc-switch-active-bg: var(--color-500);
  --warning-fc-switch-active-border: var(--color-500);
  --warning-fc-switch-active-indicator: var(--warning-white);
  --warning-fc-switch-active-text: var(--color-900);
  /*--- disabled ---*/
  --warning-fc-switch-disabled-bg: var(--color-100);
  --warning-fc-switch-disabled-border: var(--color-200);
  --warning-fc-switch-disabled-indicator: var(--color-50);
  --warning-fc-switch-disabled-text: var(--color-300);
  /*--- range ---*/

    /*--- default ---*/
  --warning-fc-range-default-base: var(--color-100);
  --warning-fc-range-default-bg: var(--color-200);
  --warning-fc-range-default-border: var(--color-200);
  --warning-fc-range-default-indicator: var(--color-200);
  --warning-fc-range-default-text: var(--color-900);
  /*--- hover ---*/
  --warning-fc-range-hover-base: var(--color-100);
  --warning-fc-range-hover-bg: var(--color-300);
  --warning-fc-range-hover-border: var(--color-300);
  --warning-fc-range-hover-indicator: var(--color-300);
  --warning-fc-range-hover-text: var(--color-900);
  /*--- active ---*/
  --warning-fc-range-active-base: var(--color-100);
  --warning-fc-range-active-bg: var(--color-500);
  --warning-fc-range-active-border: var(--color-500);
  --warning-fc-range-active-indicator: var(--color-500);
  --warning-fc-range-active-text: var(--color-900);
  /*--- disabled ---*/
  --warning-fc-range-disabled-base: var(--color-100);
  --warning-fc-range-disabled-bg: var(--color-100);
  --warning-fc-range-disabled-border: var(--color-200);
  --warning-fc-range-disabled-indicator: var(--color-50);
  --warning-fc-range-disabled-text: var(--color-300);


  /* -- error -- */
  /*--- checkradio ---*/

    /*--- default ---*/
  --error-fc-checkradio-default-bg: var(--color-100);
  --error-fc-checkradio-default-border: var(--color-200);
  --error-fc-checkradio-default-indicator: var(--color-100);
  --error-fc-checkradio-default-text: var(--color-900);
  /*--- hover ---*/
  --error-fc-checkradio-hover-bg: var(--color-100);
  --error-fc-checkradio-hover-border: var(--color-400);
  --error-fc-checkradio-hover-indicator: var(--color-100);
  --error-fc-checkradio-hover-text: var(--color-900);
  /*--- active ---*/
  --error-fc-checkradio-active-bg: var(--color-500);
  --error-fc-checkradio-active-border: var(--color-500);
  --error-fc-checkradio-active-indicator: var(--error-white);
  --error-fc-checkradio-active-text: var(--color-900);
  /*--- disabled ---*/
  --error-fc-checkradio-disabled-bg: var(--color-100);
  --error-fc-checkradio-disabled-border: var(--color-200);
  --error-fc-checkradio-disabled-indicator: var(--color-100);
  --error-fc-checkradio-disabled-text: var(--color-300);
  /*--- switch ---*/

    /*--- default ---*/
  --error-fc-switch-default-bg: var(--color-200);
  --error-fc-switch-default-border: var(--color-200);
  --error-fc-switch-default-indicator: var(--error-white);
  --error-fc-switch-default-text: var(--color-900);
  /*--- hover ---*/
  --error-fc-switch-hover-bg: var(--color-400);
  --error-fc-switch-hover-border: var(--color-400);
  --error-fc-switch-hover-indicator: var(--error-white);
  --error-fc-switch-hover-text: var(--color-900);
  /*--- active ---*/
  --error-fc-switch-active-bg: var(--color-500);
  --error-fc-switch-active-border: var(--color-500);
  --error-fc-switch-active-indicator: var(--error-white);
  --error-fc-switch-active-text: var(--color-900);
  /*--- disabled ---*/
  --error-fc-switch-disabled-bg: var(--color-100);
  --error-fc-switch-disabled-border: var(--color-200);
  --error-fc-switch-disabled-indicator: var(--color-50);
  --error-fc-switch-disabled-text: var(--color-300);
  /*--- range ---*/

    /*--- default ---*/
  --error-fc-range-default-base: var(--color-100);
  --error-fc-range-default-bg: var(--color-200);
  --error-fc-range-default-border: var(--color-200);
  --error-fc-range-default-indicator: var(--color-200);
  --error-fc-range-default-text: var(--color-900);
  /*--- hover ---*/
  --error-fc-range-hover-base: var(--color-100);
  --error-fc-range-hover-bg: var(--color-300);
  --error-fc-range-hover-border: var(--color-300);
  --error-fc-range-hover-indicator: var(--color-300);
  --error-fc-range-hover-text: var(--color-900);
  /*--- active ---*/
  --error-fc-range-active-base: var(--color-100);
  --error-fc-range-active-bg: var(--color-500);
  --error-fc-range-active-border: var(--color-500);
  --error-fc-range-active-indicator: var(--color-500);
  --error-fc-range-active-text: var(--color-900);
  /*--- disabled ---*/
  --error-fc-range-disabled-base: var(--color-100);
  --error-fc-range-disabled-bg: var(--color-100);
  --error-fc-range-disabled-border: var(--color-200);
  --error-fc-range-disabled-indicator: var(--color-50);
  --error-fc-range-disabled-text: var(--color-300);


  /* -- info -- */
  /*--- checkradio ---*/

    /*--- default ---*/
  --info-fc-checkradio-default-bg: var(--color-100);
  --info-fc-checkradio-default-border: var(--color-200);
  --info-fc-checkradio-default-indicator: var(--color-100);
  --info-fc-checkradio-default-text: var(--color-900);
  /*--- hover ---*/
  --info-fc-checkradio-hover-bg: var(--color-100);
  --info-fc-checkradio-hover-border: var(--color-400);
  --info-fc-checkradio-hover-indicator: var(--color-100);
  --info-fc-checkradio-hover-text: var(--color-900);
  /*--- active ---*/
  --info-fc-checkradio-active-bg: var(--color-500);
  --info-fc-checkradio-active-border: var(--color-500);
  --info-fc-checkradio-active-indicator: var(--info-white);
  --info-fc-checkradio-active-text: var(--color-900);
  /*--- disabled ---*/
  --info-fc-checkradio-disabled-bg: var(--color-100);
  --info-fc-checkradio-disabled-border: var(--color-200);
  --info-fc-checkradio-disabled-indicator: var(--color-100);
  --info-fc-checkradio-disabled-text: var(--color-300);
  /*--- switch ---*/

    /*--- default ---*/
  --info-fc-switch-default-bg: var(--color-200);
  --info-fc-switch-default-border: var(--color-200);
  --info-fc-switch-default-indicator: var(--info-white);
  --info-fc-switch-default-text: var(--color-900);
  /*--- hover ---*/
  --info-fc-switch-hover-bg: var(--color-400);
  --info-fc-switch-hover-border: var(--color-400);
  --info-fc-switch-hover-indicator: var(--info-white);
  --info-fc-switch-hover-text: var(--color-900);
  /*--- active ---*/
  --info-fc-switch-active-bg: var(--color-500);
  --info-fc-switch-active-border: var(--color-500);
  --info-fc-switch-active-indicator: var(--info-white);
  --info-fc-switch-active-text: var(--color-900);
  /*--- disabled ---*/
  --info-fc-switch-disabled-bg: var(--color-100);
  --info-fc-switch-disabled-border: var(--color-200);
  --info-fc-switch-disabled-indicator: var(--color-50);
  --info-fc-switch-disabled-text: var(--color-300);
  /*--- range ---*/

    /*--- default ---*/
  --info-fc-range-default-base: var(--color-100);
  --info-fc-range-default-bg: var(--color-200);
  --info-fc-range-default-border: var(--color-200);
  --info-fc-range-default-indicator: var(--color-200);
  --info-fc-range-default-text: var(--color-900);
  /*--- hover ---*/
  --info-fc-range-hover-base: var(--color-100);
  --info-fc-range-hover-bg: var(--color-300);
  --info-fc-range-hover-border: var(--color-300);
  --info-fc-range-hover-indicator: var(--color-300);
  --info-fc-range-hover-text: var(--color-900);
  /*--- active ---*/
  --info-fc-range-active-base: var(--color-100);
  --info-fc-range-active-bg: var(--color-500);
  --info-fc-range-active-border: var(--color-500);
  --info-fc-range-active-indicator: var(--color-500);
  --info-fc-range-active-text: var(--color-900);
  /*--- disabled ---*/
  --info-fc-range-disabled-base: var(--color-100);
  --info-fc-range-disabled-bg: var(--color-100);
  --info-fc-range-disabled-border: var(--color-200);
  --info-fc-range-disabled-indicator: var(--color-50);
  --info-fc-range-disabled-text: var(--color-300);


  /* --------------------------------- Alerts --------------------------------- */

  /* -- brand -- */
  /*--- solid ---*/
  --brand-blue-alert-solid-border: var(--color-500);
  --brand-blue-alert-solid-bg: var(--color-500);
  --brand-blue-alert-solid-icon: var(--color-white);
  --brand-blue-alert-solid-text: var(--color-white);
  /*--- soft ---*/
  --brand-blue-alert-soft-border: var(--color-200);
  --brand-blue-alert-soft-bg: var(--color-200);
  --brand-blue-alert-soft-icon: var(--color-700);
  --brand-blue-alert-soft-text: var(--color-700);
  /*--- surface ---*/
  --brand-blue-alert-surface-border: var(--color-300);
  --brand-blue-alert-surface-bg: var(--color-50);
  --brand-blue-alert-surface-icon: var(--color-700);
  --brand-blue-alert-surface-text: var(--color-700);
  /*--- outline ---*/
  --brand-blue-alert-outline-border: var(--color-300);
  --brand-blue-alert-outline-bg: transparent;
  --brand-blue-alert-outline-icon: var(--color-700);
  --brand-blue-alert-outline-text: var(--color-700);


  /* -- neutral -- */
  /*--- solid ---*/
  --neutral-alert-solid-border: var(--color-500);
  --neutral-alert-solid-bg: var(--color-500);
  --neutral-alert-solid-icon: var(--neutral-white);
  --neutral-alert-solid-text: var(--neutral-white);
  /*--- soft ---*/
  --neutral-alert-soft-border: var(--color-200);
  --neutral-alert-soft-bg: var(--color-200);
  --neutral-alert-soft-icon: var(--color-700);
  --neutral-alert-soft-text: var(--color-700);
  /*--- surface ---*/
  --neutral-alert-surface-border: var(--color-300);
  --neutral-alert-surface-bg: var(--color-50);
  --neutral-alert-surface-icon: var(--color-700);
  --neutral-alert-surface-text: var(--color-700);
  /*--- outline ---*/
  --neutral-alert-outline-border: var(--color-300);
  --neutral-alert-outline-bg: transparent;
  --neutral-alert-outline-icon: var(--color-700);
  --neutral-alert-outline-text: var(--color-700);


  /* -- success -- */
  /*--- solid ---*/
  --success-alert-solid-border: var(--color-500);
  --success-alert-solid-bg: var(--color-500);
  --success-alert-solid-icon: var(--success-white);
  --success-alert-solid-text: var(--success-white);
  /*--- soft ---*/
  --success-alert-soft-border: var(--color-200);
  --success-alert-soft-bg: var(--color-200);
  --success-alert-soft-icon: var(--color-700);
  --success-alert-soft-text: var(--color-700);
  /*--- surface ---*/
  --success-alert-surface-border: var(--color-300);
  --success-alert-surface-bg: var(--color-50);
  --success-alert-surface-icon: var(--color-700);
  --success-alert-surface-text: var(--color-700);
  /*--- outline ---*/
  --success-alert-outline-border: var(--color-300);
  --success-alert-outline-bg: transparent;
  --success-alert-outline-icon: var(--color-700);
  --success-alert-outline-text: var(--color-700);


  /* -- warning -- */
  /*--- solid ---*/
  --warning-alert-solid-border: var(--color-500);
  --warning-alert-solid-bg: var(--color-500);
  --warning-alert-solid-icon: var(--warning-white);
  --warning-alert-solid-text: var(--warning-white);
  /*--- soft ---*/
  --warning-alert-soft-border: var(--color-200);
  --warning-alert-soft-bg: var(--color-200);
  --warning-alert-soft-icon: var(--color-700);
  --warning-alert-soft-text: var(--color-700);
  /*--- surface ---*/
  --warning-alert-surface-border: var(--color-300);
  --warning-alert-surface-bg: var(--color-50);
  --warning-alert-surface-icon: var(--color-700);
  --warning-alert-surface-text: var(--color-700);
  /*--- outline ---*/
  --warning-alert-outline-border: var(--color-300);
  --warning-alert-outline-bg: transparent;
  --warning-alert-outline-icon: var(--color-700);
  --warning-alert-outline-text: var(--color-700);


  /* -- error -- */
  /*--- solid ---*/
  --error-alert-solid-border: var(--color-500);
  --error-alert-solid-bg: var(--color-500);
  --error-alert-solid-icon: var(--error-white);
  --error-alert-solid-text: var(--error-white);
  /*--- soft ---*/
  --error-alert-soft-border: var(--color-200);
  --error-alert-soft-bg: var(--color-200);
  --error-alert-soft-icon: var(--color-700);
  --error-alert-soft-text: var(--color-700);
  /*--- surface ---*/
  --error-alert-surface-border: var(--color-300);
  --error-alert-surface-bg: var(--color-50);
  --error-alert-surface-icon: var(--color-700);
  --error-alert-surface-text: var(--color-700);
  /*--- outline ---*/
  --error-alert-outline-border: var(--color-300);
  --error-alert-outline-bg: transparent;
  --error-alert-outline-icon: var(--color-700);
  --error-alert-outline-text: var(--color-700);


  /* -- info -- */
  /*--- solid ---*/
  --info-alert-solid-border: var(--color-500);
  --info-alert-solid-bg: var(--color-500);
  --info-alert-solid-icon: var(--info-white);
  --info-alert-solid-text: var(--info-white);
  /*--- soft ---*/
  --info-alert-soft-border: var(--color-200);
  --info-alert-soft-bg: var(--color-200);
  --info-alert-soft-icon: var(--color-700);
  --info-alert-soft-text: var(--color-700);
  /*--- surface ---*/
  --info-alert-surface-border: var(--color-300);
  --info-alert-surface-bg: var(--color-50);
  --info-alert-surface-icon: var(--color-700);
  --info-alert-surface-text: var(--color-700);
  /*--- outline ---*/
  --info-alert-outline-border: var(--color-300);
  --info-alert-outline-bg: transparent;
  --info-alert-outline-icon: var(--color-700);
  --info-alert-outline-text: var(--color-700);


  /* --------------------------------- Callouts --------------------------------- */

  /* -- brand -- */
  /*--- solid ---*/
  --brand-blue-callout-solid-border: var(--color-500);
  --brand-blue-callout-solid-bg: var(--color-500);
  --brand-blue-callout-solid-icon-bg: var(--color-600);
  --brand-blue-callout-solid-icon: var(--color-white);
  --brand-blue-callout-solid-text: var(--color-white);
  --brand-blue-callout-solid-btn-border: var(--color-white);
  --brand-blue-callout-solid-btn-bg: transparent;
  --brand-blue-callout-solid-btn-text: var(--color-white);
  /*--- soft ---*/
  --brand-blue-callout-soft-border: var(--color-100);
  --brand-blue-callout-soft-bg: var(--color-100);
  --brand-blue-callout-soft-icon-bg: var(--color-200);
  --brand-blue-callout-soft-icon: var(--color-700);
  --brand-blue-callout-soft-text: var(--color-700);
  --brand-blue-callout-soft-btn-border: var(--color-300);
  --brand-blue-callout-soft-btn-bg: transparent;
  --brand-blue-callout-soft-btn-text: var(--color-700);
  /*--- surface ---*/
  --brand-blue-callout-surface-border: var(--color-300);
  --brand-blue-callout-surface-bg: var(--color-50);
  --brand-blue-callout-surface-icon-bg: var(--color-200);
  --brand-blue-callout-surface-icon: var(--color-700);
  --brand-blue-callout-surface-text: var(--color-700);
  --brand-blue-callout-surface-btn-border: var(--color-300);
  --brand-blue-callout-surface-btn-bg: transparent;
  --brand-blue-callout-surface-btn-text: var(--color-700);
  /*--- outline ---*/
  --brand-blue-callout-outline-border: var(--color-300);
  --brand-blue-callout-outline-bg: transparent;
  --brand-blue-callout-outline-icon-bg: var(--color-100);
  --brand-blue-callout-outline-icon: var(--color-700);
  --brand-blue-callout-outline-text: var(--color-700);
  --brand-blue-callout-outline-btn-border: var(--color-400);
  --brand-blue-callout-outline-btn-bg: transparent;
  --brand-blue-callout-outline-btn-text: var(--color-700);


  /* -- neutral -- */
  /*--- solid ---*/
  --neutral-callout-solid-border: var(--color-500);
  --neutral-callout-solid-bg: var(--color-500);
  --neutral-callout-solid-icon-bg: var(--color-600);
  --neutral-callout-solid-icon: var(--neutral-white);
  --neutral-callout-solid-text: var(--neutral-white);
  --neutral-callout-solid-btn-border: var(--neutral-white);
  --neutral-callout-solid-btn-bg: transparent;
  --neutral-callout-solid-btn-text: var(--neutral-white);
  /*--- soft ---*/
  --neutral-callout-soft-border: var(--color-100);
  --neutral-callout-soft-bg: var(--color-100);
  --neutral-callout-soft-icon-bg: var(--color-200);
  --neutral-callout-soft-icon: var(--color-700);
  --neutral-callout-soft-text: var(--color-700);
  --neutral-callout-soft-btn-border: var(--color-300);
  --neutral-callout-soft-btn-bg: transparent;
  --neutral-callout-soft-btn-text: var(--color-700);
  /*--- surface ---*/
  --neutral-callout-surface-border: var(--color-300);
  --neutral-callout-surface-bg: var(--color-50);
  --neutral-callout-surface-icon-bg: var(--color-200);
  --neutral-callout-surface-icon: var(--color-700);
  --neutral-callout-surface-text: var(--color-700);
  --neutral-callout-surface-btn-border: var(--color-300);
  --neutral-callout-surface-btn-bg: transparent;
  --neutral-callout-surface-btn-text: var(--color-700);
  /*--- outline ---*/
  --neutral-callout-outline-border: var(--color-300);
  --neutral-callout-outline-bg: transparent;
  --neutral-callout-outline-icon-bg: var(--color-100);
  --neutral-callout-outline-icon: var(--color-700);
  --neutral-callout-outline-text: var(--color-700);
  --neutral-callout-outline-btn-border: var(--color-400);
  --neutral-callout-outline-btn-bg: transparent;
  --neutral-callout-outline-btn-text: var(--color-700);


  /* -- success -- */
  /*--- solid ---*/
  --success-callout-solid-border: var(--color-500);
  --success-callout-solid-bg: var(--color-500);
  --success-callout-solid-icon-bg: var(--color-600);
  --success-callout-solid-icon: var(--success-white);
  --success-callout-solid-text: var(--success-white);
  --success-callout-solid-btn-border: var(--success-white);
  --success-callout-solid-btn-bg: transparent;
  --success-callout-solid-btn-text: var(--success-white);
  /*--- soft ---*/
  --success-callout-soft-border: var(--color-100);
  --success-callout-soft-bg: var(--color-100);
  --success-callout-soft-icon-bg: var(--color-200);
  --success-callout-soft-icon: var(--color-700);
  --success-callout-soft-text: var(--color-700);
  --success-callout-soft-btn-border: var(--color-300);
  --success-callout-soft-btn-bg: transparent;
  --success-callout-soft-btn-text: var(--color-700);
  /*--- surface ---*/
  --success-callout-surface-border: var(--color-300);
  --success-callout-surface-bg: var(--color-50);
  --success-callout-surface-icon-bg: var(--color-200);
  --success-callout-surface-icon: var(--color-700);
  --success-callout-surface-text: var(--color-700);
  --success-callout-surface-btn-border: var(--color-300);
  --success-callout-surface-btn-bg: transparent;
  --success-callout-surface-btn-text: var(--color-700);
  /*--- outline ---*/
  --success-callout-outline-border: var(--color-300);
  --success-callout-outline-bg: transparent;
  --success-callout-outline-icon-bg: var(--color-100);
  --success-callout-outline-icon: var(--color-700);
  --success-callout-outline-text: var(--color-700);
  --success-callout-outline-btn-border: var(--color-400);
  --success-callout-outline-btn-bg: transparent;
  --success-callout-outline-btn-text: var(--color-700);


  /* -- warning -- */
  /*--- solid ---*/
  --warning-callout-solid-border: var(--color-500);
  --warning-callout-solid-bg: var(--color-500);
  --warning-callout-solid-icon-bg: var(--color-600);
  --warning-callout-solid-icon: var(--warning-white);
  --warning-callout-solid-text: var(--warning-white);
  --warning-callout-solid-btn-border: var(--warning-white);
  --warning-callout-solid-btn-bg: transparent;
  --warning-callout-solid-btn-text: var(--warning-white);
  /*--- soft ---*/
  --warning-callout-soft-border: var(--color-100);
  --warning-callout-soft-bg: var(--color-100);
  --warning-callout-soft-icon-bg: var(--color-200);
  --warning-callout-soft-icon: var(--color-700);
  --warning-callout-soft-text: var(--color-700);
  --warning-callout-soft-btn-border: var(--color-300);
  --warning-callout-soft-btn-bg: transparent;
  --warning-callout-soft-btn-text: var(--color-700);
  /*--- surface ---*/
  --warning-callout-surface-border: var(--color-300);
  --warning-callout-surface-bg: var(--color-50);
  --warning-callout-surface-icon-bg: var(--color-200);
  --warning-callout-surface-icon: var(--color-700);
  --warning-callout-surface-text: var(--color-700);
  --warning-callout-surface-btn-border: var(--color-300);
  --warning-callout-surface-btn-bg: transparent;
  --warning-callout-surface-btn-text: var(--color-700);
  /*--- outline ---*/
  --warning-callout-outline-border: var(--color-300);
  --warning-callout-outline-bg: transparent;
  --warning-callout-outline-icon-bg: var(--color-100);
  --warning-callout-outline-icon: var(--color-700);
  --warning-callout-outline-text: var(--color-700);
  --warning-callout-outline-btn-border: var(--color-400);
  --warning-callout-outline-btn-bg: transparent;
  --warning-callout-outline-btn-text: var(--color-700);


  /* -- error -- */
  /*--- solid ---*/
  --error-callout-solid-border: var(--color-500);
  --error-callout-solid-bg: var(--color-500);
  --error-callout-solid-icon-bg: var(--color-600);
  --error-callout-solid-icon: var(--error-white);
  --error-callout-solid-text: var(--error-white);
  --error-callout-solid-btn-border: var(--error-white);
  --error-callout-solid-btn-bg: transparent;
  --error-callout-solid-btn-text: var(--error-white);
  /*--- soft ---*/
  --error-callout-soft-border: var(--color-100);
  --error-callout-soft-bg: var(--color-100);
  --error-callout-soft-icon-bg: var(--color-200);
  --error-callout-soft-icon: var(--color-700);
  --error-callout-soft-text: var(--color-700);
  --error-callout-soft-btn-border: var(--color-300);
  --error-callout-soft-btn-bg: transparent;
  --error-callout-soft-btn-text: var(--color-700);
  /*--- surface ---*/
  --error-callout-surface-border: var(--color-300);
  --error-callout-surface-bg: var(--color-50);
  --error-callout-surface-icon-bg: var(--color-200);
  --error-callout-surface-icon: var(--color-700);
  --error-callout-surface-text: var(--color-700);
  --error-callout-surface-btn-border: var(--color-300);
  --error-callout-surface-btn-bg: transparent;
  --error-callout-surface-btn-text: var(--color-700);
  /*--- outline ---*/
  --error-callout-outline-border: var(--color-300);
  --error-callout-outline-bg: transparent;
  --error-callout-outline-icon-bg: var(--color-100);
  --error-callout-outline-icon: var(--color-700);
  --error-callout-outline-text: var(--color-700);
  --error-callout-outline-btn-border: var(--color-400);
  --error-callout-outline-btn-bg: transparent;
  --error-callout-outline-btn-text: var(--color-700);


  /* -- info -- */
  /*--- solid ---*/
  --info-callout-solid-border: var(--color-500);
  --info-callout-solid-bg: var(--color-500);
  --info-callout-solid-icon-bg: var(--color-600);
  --info-callout-solid-icon: var(--info-white);
  --info-callout-solid-text: var(--info-white);
  --info-callout-solid-btn-border: var(--info-white);
  --info-callout-solid-btn-bg: transparent;
  --info-callout-solid-btn-text: var(--info-white);
  /*--- soft ---*/
  --info-callout-soft-border: var(--color-100);
  --info-callout-soft-bg: var(--color-100);
  --info-callout-soft-icon-bg: var(--color-200);
  --info-callout-soft-icon: var(--color-700);
  --info-callout-soft-text: var(--color-700);
  --info-callout-soft-btn-border: var(--color-300);
  --info-callout-soft-btn-bg: transparent;
  --info-callout-soft-btn-text: var(--color-700);
  /*--- surface ---*/
  --info-callout-surface-border: var(--color-300);
  --info-callout-surface-bg: var(--color-50);
  --info-callout-surface-icon-bg: var(--color-200);
  --info-callout-surface-icon: var(--color-700);
  --info-callout-surface-text: var(--color-700);
  --info-callout-surface-btn-border: var(--color-300);
  --info-callout-surface-btn-bg: transparent;
  --info-callout-surface-btn-text: var(--color-700);
  /*--- outline ---*/
  --info-callout-outline-border: var(--color-300);
  --info-callout-outline-bg: transparent;
  --info-callout-outline-icon-bg: var(--color-100);
  --info-callout-outline-icon: var(--color-700);
  --info-callout-outline-text: var(--color-700);
  --info-callout-outline-btn-border: var(--color-400);
  --info-callout-outline-btn-bg: transparent;
  --info-callout-outline-btn-text: var(--color-700);


  /* --------------------------------- Badges --------------------------------- */

  /* -- brand -- */
  /*--- solid ---*/
  --brand-blue-badge-solid-border: var(--color-500);
  --brand-blue-badge-solid-bg: var(--color-500);
  --brand-blue-badge-solid-text: var(--color-white);
  /*--- soft ---*/
  --brand-blue-badge-soft-border: var(--color-100);
  --brand-blue-badge-soft-bg: var(--color-100);
  --brand-blue-badge-soft-text: var(--color-700);
  /*--- surface ---*/
  --brand-blue-badge-surface-border: var(--color-300);
  --brand-blue-badge-surface-bg: var(--color-50);
  --brand-blue-badge-surface-text: var(--color-700);
  /*--- outline ---*/
  --brand-blue-badge-outline-border: var(--color-300);
  --brand-blue-badge-outline-bg: transparent;
  --brand-blue-badge-outline-text: var(--color-700);


  /* -- neutral -- */
  /*--- solid ---*/
  --neutral-badge-solid-border: var(--color-500);
  --neutral-badge-solid-bg: var(--color-500);
  --neutral-badge-solid-text: var(--neutral-white);
  /*--- soft ---*/
  --neutral-badge-soft-border: var(--color-100);
  --neutral-badge-soft-bg: var(--color-100);
  --neutral-badge-soft-text: var(--color-700);
  /*--- surface ---*/
  --neutral-badge-surface-border: var(--color-300);
  --neutral-badge-surface-bg: var(--color-50);
  --neutral-badge-surface-text: var(--color-700);
  /*--- outline ---*/
  --neutral-badge-outline-border: var(--color-300);
  --neutral-badge-outline-bg: transparent;
  --neutral-badge-outline-text: var(--color-700);


  /* -- success -- */
  /*--- solid ---*/
  --success-badge-solid-border: var(--color-500);
  --success-badge-solid-bg: var(--color-500);
  --success-badge-solid-text: var(--success-white);
  /*--- soft ---*/
  --success-badge-soft-border: var(--color-100);
  --success-badge-soft-bg: var(--color-100);
  --success-badge-soft-text: var(--color-700);
  /*--- surface ---*/
  --success-badge-surface-border: var(--color-300);
  --success-badge-surface-bg: var(--color-50);
  --success-badge-surface-text: var(--color-700);
  /*--- outline ---*/
  --success-badge-outline-border: var(--color-300);
  --success-badge-outline-bg: transparent;
  --success-badge-outline-text: var(--color-700);


  /* -- warning -- */
  /*--- solid ---*/
  --warning-badge-solid-border: var(--color-500);
  --warning-badge-solid-bg: var(--color-500);
  --warning-badge-solid-text: var(--warning-white);
  /*--- soft ---*/
  --warning-badge-soft-border: var(--color-100);
  --warning-badge-soft-bg: var(--color-100);
  --warning-badge-soft-text: var(--color-700);
  /*--- surface ---*/
  --warning-badge-surface-border: var(--color-300);
  --warning-badge-surface-bg: var(--color-50);
  --warning-badge-surface-text: var(--color-700);
  /*--- outline ---*/
  --warning-badge-outline-border: var(--color-300);
  --warning-badge-outline-bg: transparent;
  --warning-badge-outline-text: var(--color-700);


  /* -- error -- */
  /*--- solid ---*/
  --error-badge-solid-border: var(--color-500);
  --error-badge-solid-bg: var(--color-500);
  --error-badge-solid-text: var(--error-white);
  /*--- soft ---*/
  --error-badge-soft-border: var(--color-100);
  --error-badge-soft-bg: var(--color-100);
  --error-badge-soft-text: var(--color-700);
  /*--- surface ---*/
  --error-badge-surface-border: var(--color-300);
  --error-badge-surface-bg: var(--color-50);
  --error-badge-surface-text: var(--color-700);
  /*--- outline ---*/
  --error-badge-outline-border: var(--color-300);
  --error-badge-outline-bg: transparent;
  --error-badge-outline-text: var(--color-700);


  /* -- info -- */
  /*--- solid ---*/
  --info-badge-solid-border: var(--color-500);
  --info-badge-solid-bg: var(--color-500);
  --info-badge-solid-text: var(--info-white);
  /*--- soft ---*/
  --info-badge-soft-border: var(--color-100);
  --info-badge-soft-bg: var(--color-100);
  --info-badge-soft-text: var(--color-700);
  /*--- surface ---*/
  --info-badge-surface-border: var(--color-300);
  --info-badge-surface-bg: var(--color-50);
  --info-badge-surface-text: var(--color-700);
  /*--- outline ---*/
  --info-badge-outline-border: var(--color-300);
  --info-badge-outline-bg: transparent;
  --info-badge-outline-text: var(--color-700);


  /* --------------------------------- Progress Preloaders --------------------------------- */

  /* -- brand -- */
  /*--- progress ---*/
  --brand-blue-progress-border: transparent;
  --brand-blue-progress-bg: var(--color-800);
  --brand-blue-progress-element: var(--color-500);
  /*--- preloader1 ---*/
  --brand-blue-preloader1-border: transparent;
  --brand-blue-preloader1-bg: var(--color-500);
  --brand-blue-preloader1-element: var(--color-white);
  /*--- preloader2 ---*/
  --brand-blue-preloader2-border: transparent;
  --brand-blue-preloader2-bg: transparent;
  --brand-blue-preloader2-element: var(--color-500);
  /*--- preloader3 ---*/
  --brand-blue-preloader3-border: transparent;
  --brand-blue-preloader3-bg: transparent;
  --brand-blue-preloader3-element: var(--color-500);


  /* -- neutral -- */
  /*--- progress ---*/
  --neutral-progress-border: transparent;
  --neutral-progress-bg: var(--color-800);
  --neutral-progress-element: var(--color-500);
  /*--- preloader1 ---*/
  --neutral-preloader1-border: transparent;
  --neutral-preloader1-bg: var(--color-500);
  --neutral-preloader1-element: var(--neutral-white);
  /*--- preloader2 ---*/
  --neutral-preloader2-border: transparent;
  --neutral-preloader2-bg: transparent;
  --neutral-preloader2-element: var(--color-500);
  /*--- preloader3 ---*/
  --neutral-preloader3-border: transparent;
  --neutral-preloader3-bg: transparent;
  --neutral-preloader3-element: var(--color-500);


  /* -- success -- */
  /*--- progress ---*/
  --success-progress-border: transparent;
  --success-progress-bg: var(--color-800);
  --success-progress-element: var(--color-500);
  /*--- preloader1 ---*/
  --success-preloader1-border: transparent;
  --success-preloader1-bg: var(--color-500);
  --success-preloader1-element: var(--success-white);
  /*--- preloader2 ---*/
  --success-preloader2-border: transparent;
  --success-preloader2-bg: transparent;
  --success-preloader2-element: var(--color-500);
  /*--- preloader3 ---*/
  --success-preloader3-border: transparent;
  --success-preloader3-bg: transparent;
  --success-preloader3-element: var(--color-500);


  /* -- warning -- */
  /*--- progress ---*/
  --warning-progress-border: transparent;
  --warning-progress-bg: var(--color-800);
  --warning-progress-element: var(--color-500);
  /*--- preloader1 ---*/
  --warning-preloader1-border: transparent;
  --warning-preloader1-bg: var(--color-500);
  --warning-preloader1-element: var(--warning-white);
  /*--- preloader2 ---*/
  --warning-preloader2-border: transparent;
  --warning-preloader2-bg: transparent;
  --warning-preloader2-element: var(--color-500);
  /*--- preloader3 ---*/
  --warning-preloader3-border: transparent;
  --warning-preloader3-bg: transparent;
  --warning-preloader3-element: var(--color-500);


  /* -- error -- */
  /*--- progress ---*/
  --error-progress-border: transparent;
  --error-progress-bg: var(--color-800);
  --error-progress-element: var(--color-500);
  /*--- preloader1 ---*/
  --error-preloader1-border: transparent;
  --error-preloader1-bg: var(--color-500);
  --error-preloader1-element: var(--error-white);
  /*--- preloader2 ---*/
  --error-preloader2-border: transparent;
  --error-preloader2-bg: transparent;
  --error-preloader2-element: var(--color-500);
  /*--- preloader3 ---*/
  --error-preloader3-border: transparent;
  --error-preloader3-bg: transparent;
  --error-preloader3-element: var(--color-500);


  /* -- info -- */
  /*--- progress ---*/
  --info-progress-border: transparent;
  --info-progress-bg: var(--color-800);
  --info-progress-element: var(--color-500);
  /*--- preloader1 ---*/
  --info-preloader1-border: transparent;
  --info-preloader1-bg: var(--color-500);
  --info-preloader1-element: var(--info-white);
  /*--- preloader2 ---*/
  --info-preloader2-border: transparent;
  --info-preloader2-bg: transparent;
  --info-preloader2-element: var(--color-500);
  /*--- preloader3 ---*/
  --info-preloader3-border: transparent;
  --info-preloader3-bg: transparent;
  --info-preloader3-element: var(--color-500);


  /* --------------------------------- Avatars --------------------------------- */

  /* -- brand -- */
  /*--- solid ---*/
  --brand-blue-avatar-solid-border: var(--color-500);
  --brand-blue-avatar-solid-bg: var(--color-500);
  --brand-blue-avatar-solid-icon: var(--color-white);
  /*--- soft ---*/
  --brand-blue-avatar-soft-border: var(--color-100);
  --brand-blue-avatar-soft-bg: var(--color-100);
  --brand-blue-avatar-soft-icon: var(--color-700);
  /*--- surface ---*/
  --brand-blue-avatar-surface-border: var(--color-300);
  --brand-blue-avatar-surface-bg: var(--color-50);
  --brand-blue-avatar-surface-icon: var(--color-700);
  /*--- outline ---*/
  --brand-blue-avatar-outline-border: var(--color-300);
  --brand-blue-avatar-outline-bg: transparent;
  --brand-blue-avatar-outline-icon: var(--color-700);


  /* -- neutral -- */
  /*--- solid ---*/
  --neutral-avatar-solid-border: var(--color-500);
  --neutral-avatar-solid-bg: var(--color-500);
  --neutral-avatar-solid-icon: var(--neutral-white);
  /*--- soft ---*/
  --neutral-avatar-soft-border: var(--color-100);
  --neutral-avatar-soft-bg: var(--color-100);
  --neutral-avatar-soft-icon: var(--color-700);
  /*--- surface ---*/
  --neutral-avatar-surface-border: var(--color-300);
  --neutral-avatar-surface-bg: var(--color-50);
  --neutral-avatar-surface-icon: var(--color-700);
  /*--- outline ---*/
  --neutral-avatar-outline-border: var(--color-300);
  --neutral-avatar-outline-bg: transparent;
  --neutral-avatar-outline-icon: var(--color-700);


  /* -- success -- */
  /*--- solid ---*/
  --success-avatar-solid-border: var(--color-500);
  --success-avatar-solid-bg: var(--color-500);
  --success-avatar-solid-icon: var(--success-white);
  /*--- soft ---*/
  --success-avatar-soft-border: var(--color-100);
  --success-avatar-soft-bg: var(--color-100);
  --success-avatar-soft-icon: var(--color-700);
  /*--- surface ---*/
  --success-avatar-surface-border: var(--color-300);
  --success-avatar-surface-bg: var(--color-50);
  --success-avatar-surface-icon: var(--color-700);
  /*--- outline ---*/
  --success-avatar-outline-border: var(--color-300);
  --success-avatar-outline-bg: transparent;
  --success-avatar-outline-icon: var(--color-700);


  /* -- warning -- */
  /*--- solid ---*/
  --warning-avatar-solid-border: var(--color-500);
  --warning-avatar-solid-bg: var(--color-500);
  --warning-avatar-solid-icon: var(--warning-white);
  /*--- soft ---*/
  --warning-avatar-soft-border: var(--color-100);
  --warning-avatar-soft-bg: var(--color-100);
  --warning-avatar-soft-icon: var(--color-700);
  /*--- surface ---*/
  --warning-avatar-surface-border: var(--color-300);
  --warning-avatar-surface-bg: var(--color-50);
  --warning-avatar-surface-icon: var(--color-700);
  /*--- outline ---*/
  --warning-avatar-outline-border: var(--color-300);
  --warning-avatar-outline-bg: transparent;
  --warning-avatar-outline-icon: var(--color-700);


  /* -- error -- */
  /*--- solid ---*/
  --error-avatar-solid-border: var(--color-500);
  --error-avatar-solid-bg: var(--color-500);
  --error-avatar-solid-icon: var(--error-white);
  /*--- soft ---*/
  --error-avatar-soft-border: var(--color-100);
  --error-avatar-soft-bg: var(--color-100);
  --error-avatar-soft-icon: var(--color-700);
  /*--- surface ---*/
  --error-avatar-surface-border: var(--color-300);
  --error-avatar-surface-bg: var(--color-50);
  --error-avatar-surface-icon: var(--color-700);
  /*--- outline ---*/
  --error-avatar-outline-border: var(--color-300);
  --error-avatar-outline-bg: transparent;
  --error-avatar-outline-icon: var(--color-700);


  /* -- info -- */
  /*--- solid ---*/
  --info-avatar-solid-border: var(--color-500);
  --info-avatar-solid-bg: var(--color-500);
  --info-avatar-solid-icon: var(--info-white);
  /*--- soft ---*/
  --info-avatar-soft-border: var(--color-100);
  --info-avatar-soft-bg: var(--color-100);
  --info-avatar-soft-icon: var(--color-700);
  /*--- surface ---*/
  --info-avatar-surface-border: var(--color-300);
  --info-avatar-surface-bg: var(--color-50);
  --info-avatar-surface-icon: var(--color-700);
  /*--- outline ---*/
  --info-avatar-outline-border: var(--color-300);
  --info-avatar-outline-bg: transparent;
  --info-avatar-outline-icon: var(--color-700);


  /* --------------------------------- Charts --------------------------------- */

  /* -- brand -- */
  /*--- barmulti ---*/
  --brand-blue-chart-barmulti-border: transparent;
  --brand-blue-chart-barmulti-bg: transparent;
  --brand-blue-chart-barmulti-element: var(--color-500);
  /*--- area ---*/
  --brand-blue-chart-area-border: transparent;
  --brand-blue-chart-area-bg: transparent;
  --brand-blue-chart-area-element: var(--color-500);
  /*--- barstacked ---*/
  --brand-blue-chart-barstacked-border: transparent;
  --brand-blue-chart-barstacked-bg: transparent;
  --brand-blue-chart-barstacked-element: var(--color-500);


  /* -- neutral -- */
  /*--- barmulti ---*/
  --neutral-chart-barmulti-border: transparent;
  --neutral-chart-barmulti-bg: transparent;
  --neutral-chart-barmulti-element: var(--color-500);
  /*--- area ---*/
  --neutral-chart-area-border: transparent;
  --neutral-chart-area-bg: transparent;
  --neutral-chart-area-element: var(--color-500);
  /*--- barstacked ---*/
  --neutral-chart-barstacked-border: transparent;
  --neutral-chart-barstacked-bg: transparent;
  --neutral-chart-barstacked-element: var(--color-500);


  /* -- success -- */
  /*--- barmulti ---*/
  --success-chart-barmulti-border: transparent;
  --success-chart-barmulti-bg: transparent;
  --success-chart-barmulti-element: var(--color-500);
  /*--- area ---*/
  --success-chart-area-border: transparent;
  --success-chart-area-bg: transparent;
  --success-chart-area-element: var(--color-500);
  /*--- barstacked ---*/
  --success-chart-barstacked-border: transparent;
  --success-chart-barstacked-bg: transparent;
  --success-chart-barstacked-element: var(--color-500);


  /* -- warning -- */
  /*--- barmulti ---*/
  --warning-chart-barmulti-border: transparent;
  --warning-chart-barmulti-bg: transparent;
  --warning-chart-barmulti-element: var(--color-500);
  /*--- area ---*/
  --warning-chart-area-border: transparent;
  --warning-chart-area-bg: transparent;
  --warning-chart-area-element: var(--color-500);
  /*--- barstacked ---*/
  --warning-chart-barstacked-border: transparent;
  --warning-chart-barstacked-bg: transparent;
  --warning-chart-barstacked-element: var(--color-500);


  /* -- error -- */
  /*--- barmulti ---*/
  --error-chart-barmulti-border: transparent;
  --error-chart-barmulti-bg: transparent;
  --error-chart-barmulti-element: var(--color-500);
  /*--- area ---*/
  --error-chart-area-border: transparent;
  --error-chart-area-bg: transparent;
  --error-chart-area-element: var(--color-500);
  /*--- barstacked ---*/
  --error-chart-barstacked-border: transparent;
  --error-chart-barstacked-bg: transparent;
  --error-chart-barstacked-element: var(--color-500);


  /* -- info -- */
  /*--- barmulti ---*/
  --info-chart-barmulti-border: transparent;
  --info-chart-barmulti-bg: transparent;
  --info-chart-barmulti-element: var(--color-500);
  /*--- area ---*/
  --info-chart-area-border: transparent;
  --info-chart-area-bg: transparent;
  --info-chart-area-element: var(--color-500);
  /*--- barstacked ---*/
  --info-chart-barstacked-border: transparent;
  --info-chart-barstacked-bg: transparent;
  --info-chart-barstacked-element: var(--color-500);


  /* ========================================= FONTS ========================================= */


  /* --------------------------------- Typography --------------------------------- */
  /* Font Families */
  --font-family-heading: 'Inter', sans-serif;
  --font-weight-heading: 700;
  --font-family-body: 'Inter', sans-serif;
  --font-weight-body: 400;

  /*
    Typography Scale — base 16px · fluid titles 375px→1440px
    Pair: font-size: var(--text-14); line-height: var(--text-14-lh);
    HTML tag is independent of the token (choose by role on screen).
  */

  /* Text — UI / reading (fixed, no clamp) */
  --text-8: 0.5rem;       /* 8px */
  --text-8-lh: 0.75rem;    /* 12px */
  --text-10: 0.625rem;     /* 10px */
  --text-10-lh: 0.875rem;  /* 14px */
  --text-12: 0.75rem;      /* 12px */
  --text-12-lh: 1rem;      /* 16px */
  --text-14: 0.875rem;     /* 14px */
  --text-14-lh: 1.25rem;   /* 20px */
  --text-16: 1rem;         /* 16px */
  --text-16-lh: 1.5rem;    /* 24px */
  --text-18: 1.125rem;     /* 18px */
  --text-18-lh: 1.75rem;   /* 28px */

  /* Titles — listed size at 1440px, scales down to 375px */
  --text-title-20: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);
  --text-title-20-lh: clamp(1.4625rem, 1.4053rem + 0.2441vw, 1.625rem);
  --text-title-22: clamp(1.25rem, 1.206rem + 0.1878vw, 1.375rem);
  --text-title-22-lh: clamp(1.625rem, 1.5678rem + 0.2441vw, 1.7875rem);
  --text-title-26: clamp(1.375rem, 1.287rem + 0.3756vw, 1.625rem);
  --text-title-26-lh: clamp(1.7188rem, 1.6087rem + 0.4695vw, 2.0312rem);
  --text-title-28: clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem);
  --text-title-28-lh: clamp(1.875rem, 1.765rem + 0.4695vw, 2.1875rem);
  --text-title-32: clamp(1.625rem, 1.493rem + 0.5634vw, 2rem);
  --text-title-32-lh: clamp(2.0312rem, 1.8662rem + 0.7042vw, 2.5rem);
  --text-title-40: clamp(2rem, 1.8239rem + 0.7512vw, 2.5rem);
  --text-title-40-lh: clamp(2.4rem, 2.1887rem + 0.9014vw, 3rem);
  --text-title-48: clamp(2.25rem, 1.9859rem + 1.1268vw, 3rem);
  --text-title-48-lh: clamp(2.7rem, 2.3831rem + 1.3521vw, 3.6rem);
  --text-title-56: clamp(2.75rem, 2.4859rem + 1.1268vw, 3.5rem);
  --text-title-56-lh: clamp(3.1625rem, 2.8588rem + 1.2958vw, 4.025rem);
  --text-title-82: clamp(3.5rem, 2.9278rem + 2.4413vw, 5.125rem);
  --text-title-82-lh: clamp(3.92rem, 3.2792rem + 2.7343vw, 5.74rem);
  --text-title-92: clamp(3.875rem, 3.2148rem + 2.8169vw, 5.75rem);
  --text-title-92-lh: clamp(4.2625rem, 3.5363rem + 3.0986vw, 6.325rem);
  --text-title-104: clamp(4.25rem, 3.4577rem + 3.3803vw, 6.5rem);
  --text-title-104-lh: clamp(4.675rem, 3.8035rem + 3.7183vw, 7.15rem);


  /* ========================================= EFFECTS ========================================= */


  /* --------------------------------- Drop Shadows --------------------------------- */

  /* -- brand -- */
  /* default */
  --shadow-brand-blue-default-1: rgb(from var(--color-600) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-brand-blue-default-2: rgb(from var(--color-600) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-brand-blue-default-3: rgb(from var(--color-600) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-brand-blue-default-4: rgb(from var(--color-600) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-brand-blue-default-5: rgb(from var(--color-600) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* subtle */
  --shadow-brand-blue-subtle-1: rgb(from var(--color-700) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-brand-blue-subtle-2: rgb(from var(--color-700) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-brand-blue-subtle-3: rgb(from var(--color-700) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-brand-blue-subtle-4: rgb(from var(--color-700) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-brand-blue-subtle-5: rgb(from var(--color-700) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* primary */
  --shadow-brand-blue-primary-1: rgb(from var(--color-800) r g b / 0.50) 0px 2px 4px 0px;
  --shadow-brand-blue-primary-2: rgb(from var(--color-800) r g b / 0.60) 0px 5px 10px 0px;
  --shadow-brand-blue-primary-3: rgb(from var(--color-800) r g b / 0.70) 0px 9.5px 19px 0px;
  --shadow-brand-blue-primary-4: rgb(from var(--color-800) r g b / 0.80) 0px 16.25px 32.5px 0px;
  --shadow-brand-blue-primary-5: rgb(from var(--color-800) r g b / 0.90) 0px 26.38px 52.75px 0px;


  /* -- neutral -- */
  /* default */
  --shadow-neutral-default-1: rgb(from var(--neutral-600) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-neutral-default-2: rgb(from var(--neutral-600) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-neutral-default-3: rgb(from var(--neutral-600) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-neutral-default-4: rgb(from var(--neutral-600) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-neutral-default-5: rgb(from var(--neutral-600) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* subtle */
  --shadow-neutral-subtle-1: rgb(from var(--neutral-700) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-neutral-subtle-2: rgb(from var(--neutral-700) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-neutral-subtle-3: rgb(from var(--neutral-700) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-neutral-subtle-4: rgb(from var(--neutral-700) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-neutral-subtle-5: rgb(from var(--neutral-700) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* primary */
  --shadow-neutral-primary-1: rgb(from var(--neutral-800) r g b / 0.50) 0px 2px 4px 0px;
  --shadow-neutral-primary-2: rgb(from var(--neutral-800) r g b / 0.60) 0px 5px 10px 0px;
  --shadow-neutral-primary-3: rgb(from var(--neutral-800) r g b / 0.70) 0px 9.5px 19px 0px;
  --shadow-neutral-primary-4: rgb(from var(--neutral-800) r g b / 0.80) 0px 16.25px 32.5px 0px;
  --shadow-neutral-primary-5: rgb(from var(--neutral-800) r g b / 0.90) 0px 26.38px 52.75px 0px;


  /* -- success -- */
  /* default */
  --shadow-success-default-1: rgb(from var(--success-600) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-success-default-2: rgb(from var(--success-600) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-success-default-3: rgb(from var(--success-600) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-success-default-4: rgb(from var(--success-600) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-success-default-5: rgb(from var(--success-600) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* subtle */
  --shadow-success-subtle-1: rgb(from var(--success-700) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-success-subtle-2: rgb(from var(--success-700) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-success-subtle-3: rgb(from var(--success-700) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-success-subtle-4: rgb(from var(--success-700) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-success-subtle-5: rgb(from var(--success-700) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* primary */
  --shadow-success-primary-1: rgb(from var(--success-800) r g b / 0.50) 0px 2px 4px 0px;
  --shadow-success-primary-2: rgb(from var(--success-800) r g b / 0.60) 0px 5px 10px 0px;
  --shadow-success-primary-3: rgb(from var(--success-800) r g b / 0.70) 0px 9.5px 19px 0px;
  --shadow-success-primary-4: rgb(from var(--success-800) r g b / 0.80) 0px 16.25px 32.5px 0px;
  --shadow-success-primary-5: rgb(from var(--success-800) r g b / 0.90) 0px 26.38px 52.75px 0px;


  /* -- warning -- */
  /* default */
  --shadow-warning-default-1: rgb(from var(--warning-600) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-warning-default-2: rgb(from var(--warning-600) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-warning-default-3: rgb(from var(--warning-600) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-warning-default-4: rgb(from var(--warning-600) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-warning-default-5: rgb(from var(--warning-600) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* subtle */
  --shadow-warning-subtle-1: rgb(from var(--warning-700) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-warning-subtle-2: rgb(from var(--warning-700) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-warning-subtle-3: rgb(from var(--warning-700) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-warning-subtle-4: rgb(from var(--warning-700) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-warning-subtle-5: rgb(from var(--warning-700) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* primary */
  --shadow-warning-primary-1: rgb(from var(--warning-800) r g b / 0.50) 0px 2px 4px 0px;
  --shadow-warning-primary-2: rgb(from var(--warning-800) r g b / 0.60) 0px 5px 10px 0px;
  --shadow-warning-primary-3: rgb(from var(--warning-800) r g b / 0.70) 0px 9.5px 19px 0px;
  --shadow-warning-primary-4: rgb(from var(--warning-800) r g b / 0.80) 0px 16.25px 32.5px 0px;
  --shadow-warning-primary-5: rgb(from var(--warning-800) r g b / 0.90) 0px 26.38px 52.75px 0px;


  /* -- error -- */
  /* default */
  --shadow-error-default-1: rgb(from var(--error-600) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-error-default-2: rgb(from var(--error-600) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-error-default-3: rgb(from var(--error-600) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-error-default-4: rgb(from var(--error-600) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-error-default-5: rgb(from var(--error-600) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* subtle */
  --shadow-error-subtle-1: rgb(from var(--error-700) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-error-subtle-2: rgb(from var(--error-700) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-error-subtle-3: rgb(from var(--error-700) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-error-subtle-4: rgb(from var(--error-700) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-error-subtle-5: rgb(from var(--error-700) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* primary */
  --shadow-error-primary-1: rgb(from var(--error-800) r g b / 0.50) 0px 2px 4px 0px;
  --shadow-error-primary-2: rgb(from var(--error-800) r g b / 0.60) 0px 5px 10px 0px;
  --shadow-error-primary-3: rgb(from var(--error-800) r g b / 0.70) 0px 9.5px 19px 0px;
  --shadow-error-primary-4: rgb(from var(--error-800) r g b / 0.80) 0px 16.25px 32.5px 0px;
  --shadow-error-primary-5: rgb(from var(--error-800) r g b / 0.90) 0px 26.38px 52.75px 0px;


  /* -- info -- */
  /* default */
  --shadow-info-default-1: rgb(from var(--info-600) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-info-default-2: rgb(from var(--info-600) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-info-default-3: rgb(from var(--info-600) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-info-default-4: rgb(from var(--info-600) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-info-default-5: rgb(from var(--info-600) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* subtle */
  --shadow-info-subtle-1: rgb(from var(--info-700) r g b / 0.24) 0px 2px 4px 0px;
  --shadow-info-subtle-2: rgb(from var(--info-700) r g b / 0.29) 0px 5px 10px 0px;
  --shadow-info-subtle-3: rgb(from var(--info-700) r g b / 0.34) 0px 9.5px 19px 0px;
  --shadow-info-subtle-4: rgb(from var(--info-700) r g b / 0.38) 0px 16.25px 32.5px 0px;
  --shadow-info-subtle-5: rgb(from var(--info-700) r g b / 0.43) 0px 26.38px 52.75px 0px;
  /* primary */
  --shadow-info-primary-1: rgb(from var(--info-800) r g b / 0.50) 0px 2px 4px 0px;
  --shadow-info-primary-2: rgb(from var(--info-800) r g b / 0.60) 0px 5px 10px 0px;
  --shadow-info-primary-3: rgb(from var(--info-800) r g b / 0.70) 0px 9.5px 19px 0px;
  --shadow-info-primary-4: rgb(from var(--info-800) r g b / 0.80) 0px 16.25px 32.5px 0px;
  --shadow-info-primary-5: rgb(from var(--info-800) r g b / 0.90) 0px 26.38px 52.75px 0px;


  /* --------------------------------- Inner Shadows --------------------------------- */

  /* -- brand -- */
  /* default */
  --shadow-inset-brand-blue-default-1: inset rgb(from var(--color-600) r g b / 0.15) 0px -0.1px 8px 0.00px;
  --shadow-inset-brand-blue-default-2: inset rgb(from var(--color-600) r g b / 0.18) 0px -0.21px 16.8px 0.00px;
  --shadow-inset-brand-blue-default-3: inset rgb(from var(--color-600) r g b / 0.21) 0px -0.33px 26.48px 0.00px;
  --shadow-inset-brand-blue-default-4: inset rgb(from var(--color-600) r g b / 0.24) 0px -0.46px 37.13px 0.00px;
  --shadow-inset-brand-blue-default-5: inset rgb(from var(--color-600) r g b / 0.27) 0px -0.61px 48.84px 0.00px;
  /* subtle */
  --shadow-inset-brand-blue-subtle-1: inset rgb(from var(--color-700) r g b / 0.15) 0px -0.1px 12px 2.00px;
  --shadow-inset-brand-blue-subtle-2: inset rgb(from var(--color-700) r g b / 0.18) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-brand-blue-subtle-3: inset rgb(from var(--color-700) r g b / 0.21) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-brand-blue-subtle-4: inset rgb(from var(--color-700) r g b / 0.24) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-brand-blue-subtle-5: inset rgb(from var(--color-700) r g b / 0.27) 0px -0.61px 73.26px 2.00px;
  /* primary */
  --shadow-inset-brand-blue-primary-1: inset rgb(from var(--color-500) r g b / 0.75) 0px -0.1px 8px 2.00px;
  --shadow-inset-brand-blue-primary-2: inset rgb(from var(--color-500) r g b / 0.90) 0px -0.21px 16.8px 2.00px;
  --shadow-inset-brand-blue-primary-3: inset var(--color-500) 0px -0.33px 26.48px 2.00px;
  --shadow-inset-brand-blue-primary-4: inset var(--color-500) 0px -0.46px 37.13px 2.00px;
  --shadow-inset-brand-blue-primary-5: inset var(--color-500) 0px -0.61px 48.84px 2.00px;


  /* -- neutral -- */
  /* default */
  --shadow-inset-neutral-default-1: inset rgb(from var(--neutral-600) r g b / 0.15) 0px -0.1px 8px 0.00px;
  --shadow-inset-neutral-default-2: inset rgb(from var(--neutral-600) r g b / 0.18) 0px -0.21px 16.8px 0.00px;
  --shadow-inset-neutral-default-3: inset rgb(from var(--neutral-600) r g b / 0.21) 0px -0.33px 26.48px 0.00px;
  --shadow-inset-neutral-default-4: inset rgb(from var(--neutral-600) r g b / 0.24) 0px -0.46px 37.13px 0.00px;
  --shadow-inset-neutral-default-5: inset rgb(from var(--neutral-600) r g b / 0.27) 0px -0.61px 48.84px 0.00px;
  /* subtle */
  --shadow-inset-neutral-subtle-1: inset rgb(from var(--neutral-700) r g b / 0.15) 0px -0.1px 12px 2.00px;
  --shadow-inset-neutral-subtle-2: inset rgb(from var(--neutral-700) r g b / 0.18) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-neutral-subtle-3: inset rgb(from var(--neutral-700) r g b / 0.21) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-neutral-subtle-4: inset rgb(from var(--neutral-700) r g b / 0.24) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-neutral-subtle-5: inset rgb(from var(--neutral-700) r g b / 0.27) 0px -0.61px 73.26px 2.00px;
  /* primary */
  --shadow-inset-neutral-primary-1: inset rgb(from var(--neutral-500) r g b / 0.75) 0px -0.1px 8px 2.00px;
  --shadow-inset-neutral-primary-2: inset rgb(from var(--neutral-500) r g b / 0.90) 0px -0.21px 16.8px 2.00px;
  --shadow-inset-neutral-primary-3: inset var(--neutral-500) 0px -0.33px 26.48px 2.00px;
  --shadow-inset-neutral-primary-4: inset var(--neutral-500) 0px -0.46px 37.13px 2.00px;
  --shadow-inset-neutral-primary-5: inset var(--neutral-500) 0px -0.61px 48.84px 2.00px;


  /* -- success -- */
  /* default */
  --shadow-inset-success-default-1: inset rgb(from var(--success-600) r g b / 0.15) 0px -0.1px 8px 0.00px;
  --shadow-inset-success-default-2: inset rgb(from var(--success-600) r g b / 0.18) 0px -0.21px 16.8px 0.00px;
  --shadow-inset-success-default-3: inset rgb(from var(--success-600) r g b / 0.21) 0px -0.33px 26.48px 0.00px;
  --shadow-inset-success-default-4: inset rgb(from var(--success-600) r g b / 0.24) 0px -0.46px 37.13px 0.00px;
  --shadow-inset-success-default-5: inset rgb(from var(--success-600) r g b / 0.27) 0px -0.61px 48.84px 0.00px;
  /* subtle */
  --shadow-inset-success-subtle-1: inset rgb(from var(--success-700) r g b / 0.15) 0px -0.1px 12px 2.00px;
  --shadow-inset-success-subtle-2: inset rgb(from var(--success-700) r g b / 0.18) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-success-subtle-3: inset rgb(from var(--success-700) r g b / 0.21) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-success-subtle-4: inset rgb(from var(--success-700) r g b / 0.24) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-success-subtle-5: inset rgb(from var(--success-700) r g b / 0.27) 0px -0.61px 73.26px 2.00px;
  /* primary */
  --shadow-inset-success-primary-1: inset rgb(from var(--success-500) r g b / 0.75) 0px -0.1px 8px 2.00px;
  --shadow-inset-success-primary-2: inset rgb(from var(--success-500) r g b / 0.90) 0px -0.21px 16.8px 2.00px;
  --shadow-inset-success-primary-3: inset var(--success-500) 0px -0.33px 26.48px 2.00px;
  --shadow-inset-success-primary-4: inset var(--success-500) 0px -0.46px 37.13px 2.00px;
  --shadow-inset-success-primary-5: inset var(--success-500) 0px -0.61px 48.84px 2.00px;


  /* -- warning -- */
  /* default */
  --shadow-inset-warning-default-1: inset rgb(from var(--warning-600) r g b / 0.15) 0px -0.1px 8px 0.00px;
  --shadow-inset-warning-default-2: inset rgb(from var(--warning-600) r g b / 0.18) 0px -0.21px 16.8px 0.00px;
  --shadow-inset-warning-default-3: inset rgb(from var(--warning-600) r g b / 0.21) 0px -0.33px 26.48px 0.00px;
  --shadow-inset-warning-default-4: inset rgb(from var(--warning-600) r g b / 0.24) 0px -0.46px 37.13px 0.00px;
  --shadow-inset-warning-default-5: inset rgb(from var(--warning-600) r g b / 0.27) 0px -0.61px 48.84px 0.00px;
  /* subtle */
  --shadow-inset-warning-subtle-1: inset rgb(from var(--warning-700) r g b / 0.15) 0px -0.1px 12px 2.00px;
  --shadow-inset-warning-subtle-2: inset rgb(from var(--warning-700) r g b / 0.18) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-warning-subtle-3: inset rgb(from var(--warning-700) r g b / 0.21) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-warning-subtle-4: inset rgb(from var(--warning-700) r g b / 0.24) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-warning-subtle-5: inset rgb(from var(--warning-700) r g b / 0.27) 0px -0.61px 73.26px 2.00px;
  /* primary */
  --shadow-inset-warning-primary-1: inset rgb(from var(--warning-500) r g b / 0.75) 0px -0.1px 8px 2.00px;
  --shadow-inset-warning-primary-2: inset rgb(from var(--warning-500) r g b / 0.90) 0px -0.21px 16.8px 2.00px;
  --shadow-inset-warning-primary-3: inset var(--warning-500) 0px -0.33px 26.48px 2.00px;
  --shadow-inset-warning-primary-4: inset var(--warning-500) 0px -0.46px 37.13px 2.00px;
  --shadow-inset-warning-primary-5: inset var(--warning-500) 0px -0.61px 48.84px 2.00px;


  /* -- error -- */
  /* default */
  --shadow-inset-error-default-1: inset rgb(from var(--error-600) r g b / 0.15) 0px -0.1px 8px 0.00px;
  --shadow-inset-error-default-2: inset rgb(from var(--error-600) r g b / 0.18) 0px -0.21px 16.8px 0.00px;
  --shadow-inset-error-default-3: inset rgb(from var(--error-600) r g b / 0.21) 0px -0.33px 26.48px 0.00px;
  --shadow-inset-error-default-4: inset rgb(from var(--error-600) r g b / 0.24) 0px -0.46px 37.13px 0.00px;
  --shadow-inset-error-default-5: inset rgb(from var(--error-600) r g b / 0.27) 0px -0.61px 48.84px 0.00px;
  /* subtle */
  --shadow-inset-error-subtle-1: inset rgb(from var(--error-700) r g b / 0.15) 0px -0.1px 12px 2.00px;
  --shadow-inset-error-subtle-2: inset rgb(from var(--error-700) r g b / 0.18) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-error-subtle-3: inset rgb(from var(--error-700) r g b / 0.21) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-error-subtle-4: inset rgb(from var(--error-700) r g b / 0.24) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-error-subtle-5: inset rgb(from var(--error-700) r g b / 0.27) 0px -0.61px 73.26px 2.00px;
  /* primary */
  --shadow-inset-error-primary-1: inset rgb(from var(--error-500) r g b / 0.75) 0px -0.1px 8px 2.00px;
  --shadow-inset-error-primary-2: inset rgb(from var(--error-500) r g b / 0.90) 0px -0.21px 16.8px 2.00px;
  --shadow-inset-error-primary-3: inset var(--error-500) 0px -0.33px 26.48px 2.00px;
  --shadow-inset-error-primary-4: inset var(--error-500) 0px -0.46px 37.13px 2.00px;
  --shadow-inset-error-primary-5: inset var(--error-500) 0px -0.61px 48.84px 2.00px;


  /* -- info -- */
  /* default */
  --shadow-inset-info-default-1: inset rgb(from var(--info-600) r g b / 0.15) 0px -0.1px 8px 0.00px;
  --shadow-inset-info-default-2: inset rgb(from var(--info-600) r g b / 0.18) 0px -0.21px 16.8px 0.00px;
  --shadow-inset-info-default-3: inset rgb(from var(--info-600) r g b / 0.21) 0px -0.33px 26.48px 0.00px;
  --shadow-inset-info-default-4: inset rgb(from var(--info-600) r g b / 0.24) 0px -0.46px 37.13px 0.00px;
  --shadow-inset-info-default-5: inset rgb(from var(--info-600) r g b / 0.27) 0px -0.61px 48.84px 0.00px;
  /* subtle */
  --shadow-inset-info-subtle-1: inset rgb(from var(--info-700) r g b / 0.15) 0px -0.1px 12px 2.00px;
  --shadow-inset-info-subtle-2: inset rgb(from var(--info-700) r g b / 0.18) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-info-subtle-3: inset rgb(from var(--info-700) r g b / 0.21) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-info-subtle-4: inset rgb(from var(--info-700) r g b / 0.24) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-info-subtle-5: inset rgb(from var(--info-700) r g b / 0.27) 0px -0.61px 73.26px 2.00px;
  /* primary */
  --shadow-inset-info-primary-1: inset rgb(from var(--info-500) r g b / 0.75) 0px -0.1px 8px 2.00px;
  --shadow-inset-info-primary-2: inset rgb(from var(--info-500) r g b / 0.90) 0px -0.21px 16.8px 2.00px;
  --shadow-inset-info-primary-3: inset var(--info-500) 0px -0.33px 26.48px 2.00px;
  --shadow-inset-info-primary-4: inset var(--info-500) 0px -0.46px 37.13px 2.00px;
  --shadow-inset-info-primary-5: inset var(--info-500) 0px -0.61px 48.84px 2.00px;


  /* --------------------------------- Blurs --------------------------------- */
  /* Blur tokens */
  --blur-1: 2px;
  --blur-2: 3px;
  --blur-3: 4.5px;
  --blur-4: 6.8px;
  --blur-5: 10.1px;


  /* --------------------------------- Backdrop Filters --------------------------------- */

  /* -- brand -- */
  /* default */
  --backdrop-brand-blue-default-blur-1: blur(2px) saturate(100%);
  --backdrop-brand-blue-default-bg-1: rgb(from var(--color-white) r g b / 0.25);
  --backdrop-brand-blue-default-blur-2: blur(3px) saturate(150%);
  --backdrop-brand-blue-default-bg-2: rgb(from var(--color-white) r g b / 0.28);
  --backdrop-brand-blue-default-blur-3: blur(4.5px) saturate(225%);
  --backdrop-brand-blue-default-bg-3: rgb(from var(--color-white) r g b / 0.3);
  --backdrop-brand-blue-default-blur-4: blur(6.8px) saturate(338%);
  --backdrop-brand-blue-default-bg-4: rgb(from var(--color-white) r g b / 0.33);
  --backdrop-brand-blue-default-blur-5: blur(10.1px) saturate(400%);
  --backdrop-brand-blue-default-bg-5: rgb(from var(--color-white) r g b / 0.35);
  /* subtle */
  --backdrop-brand-blue-subtle-blur-1: blur(2px) saturate(100%);
  --backdrop-brand-blue-subtle-bg-1: rgb(from var(--color-900) r g b / 0.25);
  --backdrop-brand-blue-subtle-blur-2: blur(3px) saturate(150%);
  --backdrop-brand-blue-subtle-bg-2: rgb(from var(--color-900) r g b / 0.28);
  --backdrop-brand-blue-subtle-blur-3: blur(4.5px) saturate(225%);
  --backdrop-brand-blue-subtle-bg-3: rgb(from var(--color-900) r g b / 0.3);
  --backdrop-brand-blue-subtle-blur-4: blur(6.8px) saturate(338%);
  --backdrop-brand-blue-subtle-bg-4: rgb(from var(--color-900) r g b / 0.33);
  --backdrop-brand-blue-subtle-blur-5: blur(10.1px) saturate(400%);
  --backdrop-brand-blue-subtle-bg-5: rgb(from var(--color-900) r g b / 0.35);
  /* primary */
  --backdrop-brand-blue-primary-blur-1: blur(2px) saturate(100%);
  --backdrop-brand-blue-primary-bg-1: rgb(from var(--color-100) r g b / 0.25);
  --backdrop-brand-blue-primary-blur-2: blur(3px) saturate(150%);
  --backdrop-brand-blue-primary-bg-2: rgb(from var(--color-100) r g b / 0.28);
  --backdrop-brand-blue-primary-blur-3: blur(4.5px) saturate(225%);
  --backdrop-brand-blue-primary-bg-3: rgb(from var(--color-100) r g b / 0.3);
  --backdrop-brand-blue-primary-blur-4: blur(6.8px) saturate(338%);
  --backdrop-brand-blue-primary-bg-4: rgb(from var(--color-100) r g b / 0.33);
  --backdrop-brand-blue-primary-blur-5: blur(10.1px) saturate(400%);
  --backdrop-brand-blue-primary-bg-5: rgb(from var(--color-100) r g b / 0.35);


  /* -- neutral -- */
  /* default */
  --backdrop-neutral-default-blur-1: blur(2px) saturate(100%);
  --backdrop-neutral-default-bg-1: rgb(from var(--neutral-white) r g b / 0.25);
  --backdrop-neutral-default-blur-2: blur(3px) saturate(150%);
  --backdrop-neutral-default-bg-2: rgb(from var(--neutral-white) r g b / 0.28);
  --backdrop-neutral-default-blur-3: blur(4.5px) saturate(225%);
  --backdrop-neutral-default-bg-3: rgb(from var(--neutral-white) r g b / 0.3);
  --backdrop-neutral-default-blur-4: blur(6.8px) saturate(338%);
  --backdrop-neutral-default-bg-4: rgb(from var(--neutral-white) r g b / 0.33);
  --backdrop-neutral-default-blur-5: blur(10.1px) saturate(400%);
  --backdrop-neutral-default-bg-5: rgb(from var(--neutral-white) r g b / 0.35);
  /* subtle */
  --backdrop-neutral-subtle-blur-1: blur(2px) saturate(100%);
  --backdrop-neutral-subtle-bg-1: rgb(from var(--neutral-900) r g b / 0.25);
  --backdrop-neutral-subtle-blur-2: blur(3px) saturate(150%);
  --backdrop-neutral-subtle-bg-2: rgb(from var(--neutral-900) r g b / 0.28);
  --backdrop-neutral-subtle-blur-3: blur(4.5px) saturate(225%);
  --backdrop-neutral-subtle-bg-3: rgb(from var(--neutral-900) r g b / 0.3);
  --backdrop-neutral-subtle-blur-4: blur(6.8px) saturate(338%);
  --backdrop-neutral-subtle-bg-4: rgb(from var(--neutral-900) r g b / 0.33);
  --backdrop-neutral-subtle-blur-5: blur(10.1px) saturate(400%);
  --backdrop-neutral-subtle-bg-5: rgb(from var(--neutral-900) r g b / 0.35);
  /* primary */
  --backdrop-neutral-primary-blur-1: blur(2px) saturate(100%);
  --backdrop-neutral-primary-bg-1: rgb(from var(--neutral-100) r g b / 0.25);
  --backdrop-neutral-primary-blur-2: blur(3px) saturate(150%);
  --backdrop-neutral-primary-bg-2: rgb(from var(--neutral-100) r g b / 0.28);
  --backdrop-neutral-primary-blur-3: blur(4.5px) saturate(225%);
  --backdrop-neutral-primary-bg-3: rgb(from var(--neutral-100) r g b / 0.3);
  --backdrop-neutral-primary-blur-4: blur(6.8px) saturate(338%);
  --backdrop-neutral-primary-bg-4: rgb(from var(--neutral-100) r g b / 0.33);
  --backdrop-neutral-primary-blur-5: blur(10.1px) saturate(400%);
  --backdrop-neutral-primary-bg-5: rgb(from var(--neutral-100) r g b / 0.35);


  /* -- success -- */
  /* default */
  --backdrop-success-default-blur-1: blur(2px) saturate(100%);
  --backdrop-success-default-bg-1: rgb(from var(--success-white) r g b / 0.25);
  --backdrop-success-default-blur-2: blur(3px) saturate(150%);
  --backdrop-success-default-bg-2: rgb(from var(--success-white) r g b / 0.28);
  --backdrop-success-default-blur-3: blur(4.5px) saturate(225%);
  --backdrop-success-default-bg-3: rgb(from var(--success-white) r g b / 0.3);
  --backdrop-success-default-blur-4: blur(6.8px) saturate(338%);
  --backdrop-success-default-bg-4: rgb(from var(--success-white) r g b / 0.33);
  --backdrop-success-default-blur-5: blur(10.1px) saturate(400%);
  --backdrop-success-default-bg-5: rgb(from var(--success-white) r g b / 0.35);
  /* subtle */
  --backdrop-success-subtle-blur-1: blur(2px) saturate(100%);
  --backdrop-success-subtle-bg-1: rgb(from var(--success-900) r g b / 0.25);
  --backdrop-success-subtle-blur-2: blur(3px) saturate(150%);
  --backdrop-success-subtle-bg-2: rgb(from var(--success-900) r g b / 0.28);
  --backdrop-success-subtle-blur-3: blur(4.5px) saturate(225%);
  --backdrop-success-subtle-bg-3: rgb(from var(--success-900) r g b / 0.3);
  --backdrop-success-subtle-blur-4: blur(6.8px) saturate(338%);
  --backdrop-success-subtle-bg-4: rgb(from var(--success-900) r g b / 0.33);
  --backdrop-success-subtle-blur-5: blur(10.1px) saturate(400%);
  --backdrop-success-subtle-bg-5: rgb(from var(--success-900) r g b / 0.35);
  /* primary */
  --backdrop-success-primary-blur-1: blur(2px) saturate(100%);
  --backdrop-success-primary-bg-1: rgb(from var(--success-100) r g b / 0.25);
  --backdrop-success-primary-blur-2: blur(3px) saturate(150%);
  --backdrop-success-primary-bg-2: rgb(from var(--success-100) r g b / 0.28);
  --backdrop-success-primary-blur-3: blur(4.5px) saturate(225%);
  --backdrop-success-primary-bg-3: rgb(from var(--success-100) r g b / 0.3);
  --backdrop-success-primary-blur-4: blur(6.8px) saturate(338%);
  --backdrop-success-primary-bg-4: rgb(from var(--success-100) r g b / 0.33);
  --backdrop-success-primary-blur-5: blur(10.1px) saturate(400%);
  --backdrop-success-primary-bg-5: rgb(from var(--success-100) r g b / 0.35);


  /* -- warning -- */
  /* default */
  --backdrop-warning-default-blur-1: blur(2px) saturate(100%);
  --backdrop-warning-default-bg-1: rgb(from var(--warning-white) r g b / 0.25);
  --backdrop-warning-default-blur-2: blur(3px) saturate(150%);
  --backdrop-warning-default-bg-2: rgb(from var(--warning-white) r g b / 0.28);
  --backdrop-warning-default-blur-3: blur(4.5px) saturate(225%);
  --backdrop-warning-default-bg-3: rgb(from var(--warning-white) r g b / 0.3);
  --backdrop-warning-default-blur-4: blur(6.8px) saturate(338%);
  --backdrop-warning-default-bg-4: rgb(from var(--warning-white) r g b / 0.33);
  --backdrop-warning-default-blur-5: blur(10.1px) saturate(400%);
  --backdrop-warning-default-bg-5: rgb(from var(--warning-white) r g b / 0.35);
  /* subtle */
  --backdrop-warning-subtle-blur-1: blur(2px) saturate(100%);
  --backdrop-warning-subtle-bg-1: rgb(from var(--warning-900) r g b / 0.25);
  --backdrop-warning-subtle-blur-2: blur(3px) saturate(150%);
  --backdrop-warning-subtle-bg-2: rgb(from var(--warning-900) r g b / 0.28);
  --backdrop-warning-subtle-blur-3: blur(4.5px) saturate(225%);
  --backdrop-warning-subtle-bg-3: rgb(from var(--warning-900) r g b / 0.3);
  --backdrop-warning-subtle-blur-4: blur(6.8px) saturate(338%);
  --backdrop-warning-subtle-bg-4: rgb(from var(--warning-900) r g b / 0.33);
  --backdrop-warning-subtle-blur-5: blur(10.1px) saturate(400%);
  --backdrop-warning-subtle-bg-5: rgb(from var(--warning-900) r g b / 0.35);
  /* primary */
  --backdrop-warning-primary-blur-1: blur(2px) saturate(100%);
  --backdrop-warning-primary-bg-1: rgb(from var(--warning-100) r g b / 0.25);
  --backdrop-warning-primary-blur-2: blur(3px) saturate(150%);
  --backdrop-warning-primary-bg-2: rgb(from var(--warning-100) r g b / 0.28);
  --backdrop-warning-primary-blur-3: blur(4.5px) saturate(225%);
  --backdrop-warning-primary-bg-3: rgb(from var(--warning-100) r g b / 0.3);
  --backdrop-warning-primary-blur-4: blur(6.8px) saturate(338%);
  --backdrop-warning-primary-bg-4: rgb(from var(--warning-100) r g b / 0.33);
  --backdrop-warning-primary-blur-5: blur(10.1px) saturate(400%);
  --backdrop-warning-primary-bg-5: rgb(from var(--warning-100) r g b / 0.35);


  /* -- error -- */
  /* default */
  --backdrop-error-default-blur-1: blur(2px) saturate(100%);
  --backdrop-error-default-bg-1: rgb(from var(--error-white) r g b / 0.25);
  --backdrop-error-default-blur-2: blur(3px) saturate(150%);
  --backdrop-error-default-bg-2: rgb(from var(--error-white) r g b / 0.28);
  --backdrop-error-default-blur-3: blur(4.5px) saturate(225%);
  --backdrop-error-default-bg-3: rgb(from var(--error-white) r g b / 0.3);
  --backdrop-error-default-blur-4: blur(6.8px) saturate(338%);
  --backdrop-error-default-bg-4: rgb(from var(--error-white) r g b / 0.33);
  --backdrop-error-default-blur-5: blur(10.1px) saturate(400%);
  --backdrop-error-default-bg-5: rgb(from var(--error-white) r g b / 0.35);
  /* subtle */
  --backdrop-error-subtle-blur-1: blur(2px) saturate(100%);
  --backdrop-error-subtle-bg-1: rgb(from var(--error-900) r g b / 0.25);
  --backdrop-error-subtle-blur-2: blur(3px) saturate(150%);
  --backdrop-error-subtle-bg-2: rgb(from var(--error-900) r g b / 0.28);
  --backdrop-error-subtle-blur-3: blur(4.5px) saturate(225%);
  --backdrop-error-subtle-bg-3: rgb(from var(--error-900) r g b / 0.3);
  --backdrop-error-subtle-blur-4: blur(6.8px) saturate(338%);
  --backdrop-error-subtle-bg-4: rgb(from var(--error-900) r g b / 0.33);
  --backdrop-error-subtle-blur-5: blur(10.1px) saturate(400%);
  --backdrop-error-subtle-bg-5: rgb(from var(--error-900) r g b / 0.35);
  /* primary */
  --backdrop-error-primary-blur-1: blur(2px) saturate(100%);
  --backdrop-error-primary-bg-1: rgb(from var(--error-100) r g b / 0.25);
  --backdrop-error-primary-blur-2: blur(3px) saturate(150%);
  --backdrop-error-primary-bg-2: rgb(from var(--error-100) r g b / 0.28);
  --backdrop-error-primary-blur-3: blur(4.5px) saturate(225%);
  --backdrop-error-primary-bg-3: rgb(from var(--error-100) r g b / 0.3);
  --backdrop-error-primary-blur-4: blur(6.8px) saturate(338%);
  --backdrop-error-primary-bg-4: rgb(from var(--error-100) r g b / 0.33);
  --backdrop-error-primary-blur-5: blur(10.1px) saturate(400%);
  --backdrop-error-primary-bg-5: rgb(from var(--error-100) r g b / 0.35);


  /* -- info -- */
  /* default */
  --backdrop-info-default-blur-1: blur(2px) saturate(100%);
  --backdrop-info-default-bg-1: rgb(from var(--info-white) r g b / 0.25);
  --backdrop-info-default-blur-2: blur(3px) saturate(150%);
  --backdrop-info-default-bg-2: rgb(from var(--info-white) r g b / 0.28);
  --backdrop-info-default-blur-3: blur(4.5px) saturate(225%);
  --backdrop-info-default-bg-3: rgb(from var(--info-white) r g b / 0.3);
  --backdrop-info-default-blur-4: blur(6.8px) saturate(338%);
  --backdrop-info-default-bg-4: rgb(from var(--info-white) r g b / 0.33);
  --backdrop-info-default-blur-5: blur(10.1px) saturate(400%);
  --backdrop-info-default-bg-5: rgb(from var(--info-white) r g b / 0.35);
  /* subtle */
  --backdrop-info-subtle-blur-1: blur(2px) saturate(100%);
  --backdrop-info-subtle-bg-1: rgb(from var(--info-900) r g b / 0.25);
  --backdrop-info-subtle-blur-2: blur(3px) saturate(150%);
  --backdrop-info-subtle-bg-2: rgb(from var(--info-900) r g b / 0.28);
  --backdrop-info-subtle-blur-3: blur(4.5px) saturate(225%);
  --backdrop-info-subtle-bg-3: rgb(from var(--info-900) r g b / 0.3);
  --backdrop-info-subtle-blur-4: blur(6.8px) saturate(338%);
  --backdrop-info-subtle-bg-4: rgb(from var(--info-900) r g b / 0.33);
  --backdrop-info-subtle-blur-5: blur(10.1px) saturate(400%);
  --backdrop-info-subtle-bg-5: rgb(from var(--info-900) r g b / 0.35);
  /* primary */
  --backdrop-info-primary-blur-1: blur(2px) saturate(100%);
  --backdrop-info-primary-bg-1: rgb(from var(--info-100) r g b / 0.25);
  --backdrop-info-primary-blur-2: blur(3px) saturate(150%);
  --backdrop-info-primary-bg-2: rgb(from var(--info-100) r g b / 0.28);
  --backdrop-info-primary-blur-3: blur(4.5px) saturate(225%);
  --backdrop-info-primary-bg-3: rgb(from var(--info-100) r g b / 0.3);
  --backdrop-info-primary-blur-4: blur(6.8px) saturate(338%);
  --backdrop-info-primary-bg-4: rgb(from var(--info-100) r g b / 0.33);
  --backdrop-info-primary-blur-5: blur(10.1px) saturate(400%);
  --backdrop-info-primary-bg-5: rgb(from var(--info-100) r g b / 0.35);


  /* --------------------------------- Gradients --------------------------------- */

  /* -- brand -- */
  /* default */
  --gradient-brand-blue-default-1: linear-gradient(135deg, var(--color-500) 0%, var(--color-400) 100%);
  --gradient-brand-blue-default-2: var(--gradient-brand-blue-default-1);
  --gradient-brand-blue-default-3: var(--gradient-brand-blue-default-1);
  --gradient-brand-blue-default-4: var(--gradient-brand-blue-default-1);
  --gradient-brand-blue-default-5: var(--gradient-brand-blue-default-1);
  /* subtle */
  --gradient-brand-blue-subtle-1: linear-gradient(135deg, var(--color-400) 0%, var(--color-300) 100%);
  --gradient-brand-blue-subtle-2: var(--gradient-brand-blue-subtle-1);
  --gradient-brand-blue-subtle-3: var(--gradient-brand-blue-subtle-1);
  --gradient-brand-blue-subtle-4: var(--gradient-brand-blue-subtle-1);
  --gradient-brand-blue-subtle-5: var(--gradient-brand-blue-subtle-1);
  /* primary */
  --gradient-brand-blue-primary-1: linear-gradient(135deg, var(--color-600) 0%, var(--color-400) 100%);
  --gradient-brand-blue-primary-2: var(--gradient-brand-blue-primary-1);
  --gradient-brand-blue-primary-3: var(--gradient-brand-blue-primary-1);
  --gradient-brand-blue-primary-4: var(--gradient-brand-blue-primary-1);
  --gradient-brand-blue-primary-5: var(--gradient-brand-blue-primary-1);


  /* -- neutral -- */
  /* default */
  --gradient-neutral-default-1: linear-gradient(135deg, var(--neutral-500) 0%, var(--neutral-400) 100%);
  --gradient-neutral-default-2: var(--gradient-neutral-default-1);
  --gradient-neutral-default-3: var(--gradient-neutral-default-1);
  --gradient-neutral-default-4: var(--gradient-neutral-default-1);
  --gradient-neutral-default-5: var(--gradient-neutral-default-1);
  /* subtle */
  --gradient-neutral-subtle-1: linear-gradient(135deg, var(--neutral-400) 0%, var(--neutral-300) 100%);
  --gradient-neutral-subtle-2: var(--gradient-neutral-subtle-1);
  --gradient-neutral-subtle-3: var(--gradient-neutral-subtle-1);
  --gradient-neutral-subtle-4: var(--gradient-neutral-subtle-1);
  --gradient-neutral-subtle-5: var(--gradient-neutral-subtle-1);
  /* primary */
  --gradient-neutral-primary-1: linear-gradient(135deg, var(--neutral-600) 0%, var(--neutral-400) 100%);
  --gradient-neutral-primary-2: var(--gradient-neutral-primary-1);
  --gradient-neutral-primary-3: var(--gradient-neutral-primary-1);
  --gradient-neutral-primary-4: var(--gradient-neutral-primary-1);
  --gradient-neutral-primary-5: var(--gradient-neutral-primary-1);


  /* -- success -- */
  /* default */
  --gradient-success-default-1: linear-gradient(135deg, var(--success-500) 0%, var(--success-400) 100%);
  --gradient-success-default-2: var(--gradient-success-default-1);
  --gradient-success-default-3: var(--gradient-success-default-1);
  --gradient-success-default-4: var(--gradient-success-default-1);
  --gradient-success-default-5: var(--gradient-success-default-1);
  /* subtle */
  --gradient-success-subtle-1: linear-gradient(135deg, var(--success-400) 0%, var(--success-300) 100%);
  --gradient-success-subtle-2: var(--gradient-success-subtle-1);
  --gradient-success-subtle-3: var(--gradient-success-subtle-1);
  --gradient-success-subtle-4: var(--gradient-success-subtle-1);
  --gradient-success-subtle-5: var(--gradient-success-subtle-1);
  /* primary */
  --gradient-success-primary-1: linear-gradient(135deg, var(--success-600) 0%, var(--success-400) 100%);
  --gradient-success-primary-2: var(--gradient-success-primary-1);
  --gradient-success-primary-3: var(--gradient-success-primary-1);
  --gradient-success-primary-4: var(--gradient-success-primary-1);
  --gradient-success-primary-5: var(--gradient-success-primary-1);


  /* -- warning -- */
  /* default */
  --gradient-warning-default-1: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-400) 100%);
  --gradient-warning-default-2: var(--gradient-warning-default-1);
  --gradient-warning-default-3: var(--gradient-warning-default-1);
  --gradient-warning-default-4: var(--gradient-warning-default-1);
  --gradient-warning-default-5: var(--gradient-warning-default-1);
  /* subtle */
  --gradient-warning-subtle-1: linear-gradient(135deg, var(--warning-400) 0%, var(--warning-300) 100%);
  --gradient-warning-subtle-2: var(--gradient-warning-subtle-1);
  --gradient-warning-subtle-3: var(--gradient-warning-subtle-1);
  --gradient-warning-subtle-4: var(--gradient-warning-subtle-1);
  --gradient-warning-subtle-5: var(--gradient-warning-subtle-1);
  /* primary */
  --gradient-warning-primary-1: linear-gradient(135deg, var(--warning-600) 0%, var(--warning-400) 100%);
  --gradient-warning-primary-2: var(--gradient-warning-primary-1);
  --gradient-warning-primary-3: var(--gradient-warning-primary-1);
  --gradient-warning-primary-4: var(--gradient-warning-primary-1);
  --gradient-warning-primary-5: var(--gradient-warning-primary-1);


  /* -- error -- */
  /* default */
  --gradient-error-default-1: linear-gradient(135deg, var(--error-500) 0%, var(--error-400) 100%);
  --gradient-error-default-2: var(--gradient-error-default-1);
  --gradient-error-default-3: var(--gradient-error-default-1);
  --gradient-error-default-4: var(--gradient-error-default-1);
  --gradient-error-default-5: var(--gradient-error-default-1);
  /* subtle */
  --gradient-error-subtle-1: linear-gradient(135deg, var(--error-400) 0%, var(--error-300) 100%);
  --gradient-error-subtle-2: var(--gradient-error-subtle-1);
  --gradient-error-subtle-3: var(--gradient-error-subtle-1);
  --gradient-error-subtle-4: var(--gradient-error-subtle-1);
  --gradient-error-subtle-5: var(--gradient-error-subtle-1);
  /* primary */
  --gradient-error-primary-1: linear-gradient(135deg, var(--error-600) 0%, var(--error-400) 100%);
  --gradient-error-primary-2: var(--gradient-error-primary-1);
  --gradient-error-primary-3: var(--gradient-error-primary-1);
  --gradient-error-primary-4: var(--gradient-error-primary-1);
  --gradient-error-primary-5: var(--gradient-error-primary-1);


  /* -- info -- */
  /* default */
  --gradient-info-default-1: linear-gradient(135deg, var(--info-500) 0%, var(--info-400) 100%);
  --gradient-info-default-2: var(--gradient-info-default-1);
  --gradient-info-default-3: var(--gradient-info-default-1);
  --gradient-info-default-4: var(--gradient-info-default-1);
  --gradient-info-default-5: var(--gradient-info-default-1);
  /* subtle */
  --gradient-info-subtle-1: linear-gradient(135deg, var(--info-400) 0%, var(--info-300) 100%);
  --gradient-info-subtle-2: var(--gradient-info-subtle-1);
  --gradient-info-subtle-3: var(--gradient-info-subtle-1);
  --gradient-info-subtle-4: var(--gradient-info-subtle-1);
  --gradient-info-subtle-5: var(--gradient-info-subtle-1);
  /* primary */
  --gradient-info-primary-1: linear-gradient(135deg, var(--info-600) 0%, var(--info-400) 100%);
  --gradient-info-primary-2: var(--gradient-info-primary-1);
  --gradient-info-primary-3: var(--gradient-info-primary-1);
  --gradient-info-primary-4: var(--gradient-info-primary-1);
  --gradient-info-primary-5: var(--gradient-info-primary-1);


  /* ========================================= SHAPES ========================================= */


  /* --------------------------------- Breakpoints --------------------------------- */
  /* Breakpoints — use with @media (min-width: var(--bp-X)) */
  --bp-xs: 23.438rem;
  /* 375px */
  --bp-sm: 30.000rem;
  /* 480px */
  --bp-md: 40.000rem;
  /* 640px */
  --bp-lg: 48.000rem;
  /* 768px */
  --bp-xl: 64.000rem;
  /* 1024px */
  --bp-2xl: 80.000rem;
  /* 1280px */
  --bp-3xl: 90.000rem;
  /* 1440px */
  --bp-4xl: 100.000rem;
  /* 1600px */
  --bp-5xl: 120.000rem;
  /* 1920px */

  /* Fluid scale range */
  --clamp-min: 375px;
  /* XS */
  --clamp-max: 1440px;
  /* 3XL */

  /* --------------------------------- Container --------------------------------- */
  /* Container base (referencia 1440px) */
  --container-full: 1392px;
  --container-middle: 1240px;
  --container-low: 1040px;

  /* --------------------------------- Spacings --------------------------------- */
  /* Fluid scale. App layout: flex (1D) or grid (2D) + gap: var(--space-*).
     Do not use margin to separate siblings. Interior padding also uses --space-*. */
  --space-xxs: clamp(4px, 0.38vw + 0.162rem, 8px);
  --space-xs: clamp(8px, 0.38vw + 0.412rem, 12px);
  --space-sm: clamp(12px, 0.38vw + 0.662rem, 16px);
  --space-md: clamp(16px, 0.75vw + 0.824rem, 24px);
  --space-lg: clamp(24px, 0.75vw + 1.324rem, 32px);
  --space-xl: clamp(40px, 1.50vw + 2.148rem, 56px);
  --space-xxl: clamp(56px, 2.25vw + 2.972rem, 80px);
  /* Compat aliases used by existing apps. Prefer --space-* in new CSS. */
  --p-xxs: var(--space-xxs);
  --px-xxs: var(--space-xxs);
  --py-xxs: var(--space-xxs);
  --p-xs: var(--space-xs);
  --px-xs: var(--space-xs);
  --py-xs: var(--space-xs);
  --p-sm: var(--space-sm);
  --px-sm: var(--space-sm);
  --py-sm: var(--space-sm);
  --p-md: var(--space-md);
  --px-md: var(--space-md);
  --py-md: var(--space-md);
  --p-lg: var(--space-lg);
  --px-lg: var(--space-lg);
  --py-lg: var(--space-lg);
  --p-xl: var(--space-xl);
  --px-xl: var(--space-xl);
  --py-xl: var(--space-xl);
  --p-xxl: var(--space-xxl);
  --px-xxl: var(--space-xxl);
  --py-xxl: var(--space-xxl);
  --gap-xxs: var(--space-xxs);
  --gap-xs: var(--space-xs);
  --gap-sm: var(--space-sm);
  --gap-md: var(--space-md);
  --gap-lg: var(--space-lg);
  --gap-xl: var(--space-xl);
  --gap-xxl: var(--space-xxl);
  /* --------------------------------- Radius --------------------------------- */
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-full: 9999px;


  /* ========================================= MOTION ========================================= */
  /* --------------------------------- Motion --------------------------------- */
  --motion-dur-xs: 100ms;
  --motion-dur-sm: 150ms;
  --motion-dur-md: 200ms;
  --motion-dur-lg: 300ms;
  --motion-dur-xl: 400ms;
  --motion-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Dark theme — same names as :root; only values that differ. */
[data-theme="dark"] {
  /* --------------------------------- Content --------------------------------- */
  --brand-blue-content-default-bg: var(--color-950);
  --brand-blue-content-default-text-div: var(--color-400);
  --brand-blue-content-default-title: var(--color-white);
  --brand-blue-content-default-para: var(--color-200);
  --brand-blue-content-subtle-bg: var(--color-900);
  --brand-blue-content-subtle-text-div: var(--color-400);
  --brand-blue-content-subtle-title: var(--color-white);
  --brand-blue-content-subtle-para: var(--color-200);
  --brand-blue-content-bordered-border: var(--color-800);
  --brand-blue-content-bordered-bg: var(--color-950);
  --brand-blue-content-bordered-text-div: var(--color-400);
  --brand-blue-content-bordered-title: var(--color-white);
  --brand-blue-content-bordered-para: var(--color-200);
  --neutral-content-default-bg: var(--neutral-950);
  --neutral-content-default-text-div: var(--neutral-400);
  --neutral-content-default-title: var(--neutral-white);
  --neutral-content-default-para: var(--neutral-200);
  --neutral-content-subtle-bg: var(--neutral-900);
  --neutral-content-subtle-text-div: var(--neutral-400);
  --neutral-content-subtle-title: var(--neutral-white);
  --neutral-content-subtle-para: var(--neutral-200);
  --neutral-content-bordered-border: var(--neutral-800);
  --neutral-content-bordered-bg: var(--neutral-950);
  --neutral-content-bordered-text-div: var(--neutral-400);
  --neutral-content-bordered-title: var(--neutral-white);
  --neutral-content-bordered-para: var(--neutral-200);
  --success-content-default-bg: var(--success-950);
  --success-content-default-text-div: var(--success-400);
  --success-content-default-title: var(--success-white);
  --success-content-default-para: var(--success-200);
  --success-content-subtle-bg: var(--success-900);
  --success-content-subtle-text-div: var(--success-400);
  --success-content-subtle-title: var(--success-white);
  --success-content-subtle-para: var(--success-200);
  --success-content-bordered-border: var(--success-800);
  --success-content-bordered-bg: var(--success-950);
  --success-content-bordered-text-div: var(--success-400);
  --success-content-bordered-title: var(--success-white);
  --success-content-bordered-para: var(--success-200);
  --warning-content-default-bg: var(--warning-950);
  --warning-content-default-text-div: var(--warning-400);
  --warning-content-default-title: var(--warning-white);
  --warning-content-default-para: var(--warning-200);
  --warning-content-subtle-bg: var(--warning-900);
  --warning-content-subtle-text-div: var(--warning-400);
  --warning-content-subtle-title: var(--warning-white);
  --warning-content-subtle-para: var(--warning-200);
  --warning-content-bordered-border: var(--warning-800);
  --warning-content-bordered-bg: var(--warning-950);
  --warning-content-bordered-text-div: var(--warning-400);
  --warning-content-bordered-title: var(--warning-white);
  --warning-content-bordered-para: var(--warning-200);
  --error-content-default-bg: var(--error-950);
  --error-content-default-text-div: var(--error-400);
  --error-content-default-title: var(--error-white);
  --error-content-default-para: var(--error-200);
  --error-content-subtle-bg: var(--error-900);
  --error-content-subtle-text-div: var(--error-400);
  --error-content-subtle-title: var(--error-white);
  --error-content-subtle-para: var(--error-200);
  --error-content-bordered-border: var(--error-800);
  --error-content-bordered-bg: var(--error-950);
  --error-content-bordered-text-div: var(--error-400);
  --error-content-bordered-title: var(--error-white);
  --error-content-bordered-para: var(--error-200);
  --info-content-default-bg: var(--info-950);
  --info-content-default-text-div: var(--info-400);
  --info-content-default-title: var(--info-white);
  --info-content-default-para: var(--info-200);
  --info-content-subtle-bg: var(--info-900);
  --info-content-subtle-text-div: var(--info-400);
  --info-content-subtle-title: var(--info-white);
  --info-content-subtle-para: var(--info-200);
  --info-content-bordered-border: var(--info-800);
  --info-content-bordered-bg: var(--info-950);
  --info-content-bordered-text-div: var(--info-400);
  --info-content-bordered-title: var(--info-white);
  --info-content-bordered-para: var(--info-200);

  /* --------------------------------- Drop Shadows --------------------------------- */
  --shadow-brand-blue-default-1: rgb(from var(--color-black) r g b / 0.60) 0px 2px 4px 0px;
  --shadow-brand-blue-default-2: rgb(from var(--color-black) r g b / 0.72) 0px 5px 10px 0px;
  --shadow-brand-blue-default-3: rgb(from var(--color-black) r g b / 0.84) 0px 9.5px 19px 0px;
  --shadow-brand-blue-default-4: rgb(from var(--color-black) r g b / 0.96) 0px 16.25px 32.5px 0px;
  --shadow-brand-blue-default-5: var(--color-black) 0px 26.38px 52.75px 0px;
  --shadow-brand-blue-subtle-1: var(--shadow-brand-blue-default-1);
  --shadow-brand-blue-subtle-2: var(--shadow-brand-blue-default-2);
  --shadow-brand-blue-subtle-3: var(--shadow-brand-blue-default-3);
  --shadow-brand-blue-subtle-4: var(--shadow-brand-blue-default-4);
  --shadow-brand-blue-subtle-5: var(--shadow-brand-blue-default-5);
  --shadow-brand-blue-primary-1: var(--shadow-brand-blue-default-1);
  --shadow-brand-blue-primary-2: var(--shadow-brand-blue-default-2);
  --shadow-brand-blue-primary-3: var(--shadow-brand-blue-default-3);
  --shadow-brand-blue-primary-4: var(--shadow-brand-blue-default-4);
  --shadow-brand-blue-primary-5: var(--shadow-brand-blue-default-5);
  --shadow-neutral-default-1: rgb(from var(--color-black) r g b / 0.60) 0px 2px 4px 0px;
  --shadow-neutral-default-2: rgb(from var(--color-black) r g b / 0.72) 0px 5px 10px 0px;
  --shadow-neutral-default-3: rgb(from var(--color-black) r g b / 0.84) 0px 9.5px 19px 0px;
  --shadow-neutral-default-4: rgb(from var(--color-black) r g b / 0.96) 0px 16.25px 32.5px 0px;
  --shadow-neutral-default-5: var(--color-black) 0px 26.38px 52.75px 0px;
  --shadow-neutral-subtle-1: var(--shadow-neutral-default-1);
  --shadow-neutral-subtle-2: var(--shadow-neutral-default-2);
  --shadow-neutral-subtle-3: var(--shadow-neutral-default-3);
  --shadow-neutral-subtle-4: var(--shadow-neutral-default-4);
  --shadow-neutral-subtle-5: var(--shadow-neutral-default-5);
  --shadow-neutral-primary-1: var(--shadow-neutral-default-1);
  --shadow-neutral-primary-2: var(--shadow-neutral-default-2);
  --shadow-neutral-primary-3: var(--shadow-neutral-default-3);
  --shadow-neutral-primary-4: var(--shadow-neutral-default-4);
  --shadow-neutral-primary-5: var(--shadow-neutral-default-5);
  --shadow-success-default-1: rgb(from var(--success-black) r g b / 0.60) 0px 2px 4px 0px;
  --shadow-success-default-2: rgb(from var(--success-black) r g b / 0.72) 0px 5px 10px 0px;
  --shadow-success-default-3: rgb(from var(--success-black) r g b / 0.84) 0px 9.5px 19px 0px;
  --shadow-success-default-4: rgb(from var(--success-black) r g b / 0.96) 0px 16.25px 32.5px 0px;
  --shadow-success-default-5: var(--success-black) 0px 26.38px 52.75px 0px;
  --shadow-success-subtle-1: var(--shadow-success-default-1);
  --shadow-success-subtle-2: var(--shadow-success-default-2);
  --shadow-success-subtle-3: var(--shadow-success-default-3);
  --shadow-success-subtle-4: var(--shadow-success-default-4);
  --shadow-success-subtle-5: var(--shadow-success-default-5);
  --shadow-success-primary-1: var(--shadow-success-default-1);
  --shadow-success-primary-2: var(--shadow-success-default-2);
  --shadow-success-primary-3: var(--shadow-success-default-3);
  --shadow-success-primary-4: var(--shadow-success-default-4);
  --shadow-success-primary-5: var(--shadow-success-default-5);
  --shadow-warning-default-1: rgb(from var(--warning-black) r g b / 0.60) 0px 2px 4px 0px;
  --shadow-warning-default-2: rgb(from var(--warning-black) r g b / 0.72) 0px 5px 10px 0px;
  --shadow-warning-default-3: rgb(from var(--warning-black) r g b / 0.84) 0px 9.5px 19px 0px;
  --shadow-warning-default-4: rgb(from var(--warning-black) r g b / 0.96) 0px 16.25px 32.5px 0px;
  --shadow-warning-default-5: var(--warning-black) 0px 26.38px 52.75px 0px;
  --shadow-warning-subtle-1: var(--shadow-warning-default-1);
  --shadow-warning-subtle-2: var(--shadow-warning-default-2);
  --shadow-warning-subtle-3: var(--shadow-warning-default-3);
  --shadow-warning-subtle-4: var(--shadow-warning-default-4);
  --shadow-warning-subtle-5: var(--shadow-warning-default-5);
  --shadow-warning-primary-1: var(--shadow-warning-default-1);
  --shadow-warning-primary-2: var(--shadow-warning-default-2);
  --shadow-warning-primary-3: var(--shadow-warning-default-3);
  --shadow-warning-primary-4: var(--shadow-warning-default-4);
  --shadow-warning-primary-5: var(--shadow-warning-default-5);
  --shadow-error-default-1: rgb(from var(--error-black) r g b / 0.60) 0px 2px 4px 0px;
  --shadow-error-default-2: rgb(from var(--error-black) r g b / 0.72) 0px 5px 10px 0px;
  --shadow-error-default-3: rgb(from var(--error-black) r g b / 0.84) 0px 9.5px 19px 0px;
  --shadow-error-default-4: rgb(from var(--error-black) r g b / 0.96) 0px 16.25px 32.5px 0px;
  --shadow-error-default-5: var(--error-black) 0px 26.38px 52.75px 0px;
  --shadow-error-subtle-1: var(--shadow-error-default-1);
  --shadow-error-subtle-2: var(--shadow-error-default-2);
  --shadow-error-subtle-3: var(--shadow-error-default-3);
  --shadow-error-subtle-4: var(--shadow-error-default-4);
  --shadow-error-subtle-5: var(--shadow-error-default-5);
  --shadow-error-primary-1: var(--shadow-error-default-1);
  --shadow-error-primary-2: var(--shadow-error-default-2);
  --shadow-error-primary-3: var(--shadow-error-default-3);
  --shadow-error-primary-4: var(--shadow-error-default-4);
  --shadow-error-primary-5: var(--shadow-error-default-5);
  --shadow-info-default-1: rgb(from var(--info-black) r g b / 0.60) 0px 2px 4px 0px;
  --shadow-info-default-2: rgb(from var(--info-black) r g b / 0.72) 0px 5px 10px 0px;
  --shadow-info-default-3: rgb(from var(--info-black) r g b / 0.84) 0px 9.5px 19px 0px;
  --shadow-info-default-4: rgb(from var(--info-black) r g b / 0.96) 0px 16.25px 32.5px 0px;
  --shadow-info-default-5: var(--info-black) 0px 26.38px 52.75px 0px;
  --shadow-info-subtle-1: var(--shadow-info-default-1);
  --shadow-info-subtle-2: var(--shadow-info-default-2);
  --shadow-info-subtle-3: var(--shadow-info-default-3);
  --shadow-info-subtle-4: var(--shadow-info-default-4);
  --shadow-info-subtle-5: var(--shadow-info-default-5);
  --shadow-info-primary-1: var(--shadow-info-default-1);
  --shadow-info-primary-2: var(--shadow-info-default-2);
  --shadow-info-primary-3: var(--shadow-info-default-3);
  --shadow-info-primary-4: var(--shadow-info-default-4);
  --shadow-info-primary-5: var(--shadow-info-default-5);

  /* --------------------------------- Inner Shadows --------------------------------- */
  --shadow-inset-brand-blue-default-1: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.1px 12px 2.00px;
  --shadow-inset-brand-blue-default-2: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-brand-blue-default-3: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-brand-blue-default-4: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-brand-blue-default-5: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.61px 73.26px 2.00px;
  --shadow-inset-brand-blue-subtle-1: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.1px 12px 4.00px;
  --shadow-inset-brand-blue-subtle-2: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.21px 25.2px 4.00px;
  --shadow-inset-brand-blue-subtle-3: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.33px 39.72px 4.00px;
  --shadow-inset-brand-blue-subtle-4: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.46px 55.69px 4.00px;
  --shadow-inset-brand-blue-subtle-5: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.61px 73.26px 4.00px;
  --shadow-inset-brand-blue-primary-1: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.1px 8px 4.00px;
  --shadow-inset-brand-blue-primary-2: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.21px 16.8px 4.00px;
  --shadow-inset-brand-blue-primary-3: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.33px 26.48px 4.00px;
  --shadow-inset-brand-blue-primary-4: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.46px 37.13px 4.00px;
  --shadow-inset-brand-blue-primary-5: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.61px 48.84px 4.00px;
  --shadow-inset-neutral-default-1: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.1px 12px 2.00px;
  --shadow-inset-neutral-default-2: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-neutral-default-3: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-neutral-default-4: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-neutral-default-5: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.61px 73.26px 2.00px;
  --shadow-inset-neutral-subtle-1: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.1px 12px 4.00px;
  --shadow-inset-neutral-subtle-2: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.21px 25.2px 4.00px;
  --shadow-inset-neutral-subtle-3: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.33px 39.72px 4.00px;
  --shadow-inset-neutral-subtle-4: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.46px 55.69px 4.00px;
  --shadow-inset-neutral-subtle-5: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.61px 73.26px 4.00px;
  --shadow-inset-neutral-primary-1: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.1px 8px 4.00px;
  --shadow-inset-neutral-primary-2: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.21px 16.8px 4.00px;
  --shadow-inset-neutral-primary-3: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.33px 26.48px 4.00px;
  --shadow-inset-neutral-primary-4: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.46px 37.13px 4.00px;
  --shadow-inset-neutral-primary-5: inset rgb(from var(--color-black) r g b / 0.00) 0px -0.61px 48.84px 4.00px;
  --shadow-inset-success-default-1: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.1px 12px 2.00px;
  --shadow-inset-success-default-2: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-success-default-3: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-success-default-4: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-success-default-5: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.61px 73.26px 2.00px;
  --shadow-inset-success-subtle-1: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.1px 12px 4.00px;
  --shadow-inset-success-subtle-2: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.21px 25.2px 4.00px;
  --shadow-inset-success-subtle-3: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.33px 39.72px 4.00px;
  --shadow-inset-success-subtle-4: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.46px 55.69px 4.00px;
  --shadow-inset-success-subtle-5: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.61px 73.26px 4.00px;
  --shadow-inset-success-primary-1: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.1px 8px 4.00px;
  --shadow-inset-success-primary-2: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.21px 16.8px 4.00px;
  --shadow-inset-success-primary-3: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.33px 26.48px 4.00px;
  --shadow-inset-success-primary-4: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.46px 37.13px 4.00px;
  --shadow-inset-success-primary-5: inset rgb(from var(--success-black) r g b / 0.00) 0px -0.61px 48.84px 4.00px;
  --shadow-inset-warning-default-1: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.1px 12px 2.00px;
  --shadow-inset-warning-default-2: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-warning-default-3: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-warning-default-4: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-warning-default-5: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.61px 73.26px 2.00px;
  --shadow-inset-warning-subtle-1: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.1px 12px 4.00px;
  --shadow-inset-warning-subtle-2: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.21px 25.2px 4.00px;
  --shadow-inset-warning-subtle-3: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.33px 39.72px 4.00px;
  --shadow-inset-warning-subtle-4: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.46px 55.69px 4.00px;
  --shadow-inset-warning-subtle-5: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.61px 73.26px 4.00px;
  --shadow-inset-warning-primary-1: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.1px 8px 4.00px;
  --shadow-inset-warning-primary-2: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.21px 16.8px 4.00px;
  --shadow-inset-warning-primary-3: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.33px 26.48px 4.00px;
  --shadow-inset-warning-primary-4: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.46px 37.13px 4.00px;
  --shadow-inset-warning-primary-5: inset rgb(from var(--warning-black) r g b / 0.00) 0px -0.61px 48.84px 4.00px;
  --shadow-inset-error-default-1: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.1px 12px 2.00px;
  --shadow-inset-error-default-2: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-error-default-3: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-error-default-4: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-error-default-5: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.61px 73.26px 2.00px;
  --shadow-inset-error-subtle-1: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.1px 12px 4.00px;
  --shadow-inset-error-subtle-2: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.21px 25.2px 4.00px;
  --shadow-inset-error-subtle-3: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.33px 39.72px 4.00px;
  --shadow-inset-error-subtle-4: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.46px 55.69px 4.00px;
  --shadow-inset-error-subtle-5: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.61px 73.26px 4.00px;
  --shadow-inset-error-primary-1: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.1px 8px 4.00px;
  --shadow-inset-error-primary-2: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.21px 16.8px 4.00px;
  --shadow-inset-error-primary-3: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.33px 26.48px 4.00px;
  --shadow-inset-error-primary-4: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.46px 37.13px 4.00px;
  --shadow-inset-error-primary-5: inset rgb(from var(--error-black) r g b / 0.00) 0px -0.61px 48.84px 4.00px;
  --shadow-inset-info-default-1: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.1px 12px 2.00px;
  --shadow-inset-info-default-2: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.21px 25.2px 2.00px;
  --shadow-inset-info-default-3: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.33px 39.72px 2.00px;
  --shadow-inset-info-default-4: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.46px 55.69px 2.00px;
  --shadow-inset-info-default-5: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.61px 73.26px 2.00px;
  --shadow-inset-info-subtle-1: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.1px 12px 4.00px;
  --shadow-inset-info-subtle-2: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.21px 25.2px 4.00px;
  --shadow-inset-info-subtle-3: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.33px 39.72px 4.00px;
  --shadow-inset-info-subtle-4: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.46px 55.69px 4.00px;
  --shadow-inset-info-subtle-5: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.61px 73.26px 4.00px;
  --shadow-inset-info-primary-1: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.1px 8px 4.00px;
  --shadow-inset-info-primary-2: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.21px 16.8px 4.00px;
  --shadow-inset-info-primary-3: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.33px 26.48px 4.00px;
  --shadow-inset-info-primary-4: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.46px 37.13px 4.00px;
  --shadow-inset-info-primary-5: inset rgb(from var(--info-black) r g b / 0.00) 0px -0.61px 48.84px 4.00px;

  /* --------------------------------- Backdrop Filters --------------------------------- */
  --backdrop-brand-blue-default-bg-1: rgb(from var(--color-900) r g b / 0.25);
  --backdrop-brand-blue-default-bg-2: rgb(from var(--color-900) r g b / 0.28);
  --backdrop-brand-blue-default-bg-3: rgb(from var(--color-900) r g b / 0.3);
  --backdrop-brand-blue-default-bg-4: rgb(from var(--color-900) r g b / 0.33);
  --backdrop-brand-blue-default-bg-5: rgb(from var(--color-900) r g b / 0.35);
  --backdrop-brand-blue-subtle-bg-1: rgb(from var(--color-950) r g b / 0.25);
  --backdrop-brand-blue-subtle-bg-2: rgb(from var(--color-950) r g b / 0.28);
  --backdrop-brand-blue-subtle-bg-3: rgb(from var(--color-950) r g b / 0.3);
  --backdrop-brand-blue-subtle-bg-4: rgb(from var(--color-950) r g b / 0.33);
  --backdrop-brand-blue-subtle-bg-5: rgb(from var(--color-950) r g b / 0.35);
  --backdrop-brand-blue-primary-bg-1: rgb(from var(--color-800) r g b / 0.25);
  --backdrop-brand-blue-primary-bg-2: rgb(from var(--color-800) r g b / 0.28);
  --backdrop-brand-blue-primary-bg-3: rgb(from var(--color-800) r g b / 0.3);
  --backdrop-brand-blue-primary-bg-4: rgb(from var(--color-800) r g b / 0.33);
  --backdrop-brand-blue-primary-bg-5: rgb(from var(--color-800) r g b / 0.35);
  --backdrop-neutral-default-bg-1: rgb(from var(--neutral-900) r g b / 0.25);
  --backdrop-neutral-default-bg-2: rgb(from var(--neutral-900) r g b / 0.28);
  --backdrop-neutral-default-bg-3: rgb(from var(--neutral-900) r g b / 0.3);
  --backdrop-neutral-default-bg-4: rgb(from var(--neutral-900) r g b / 0.33);
  --backdrop-neutral-default-bg-5: rgb(from var(--neutral-900) r g b / 0.35);
  --backdrop-neutral-subtle-bg-1: rgb(from var(--neutral-950) r g b / 0.25);
  --backdrop-neutral-subtle-bg-2: rgb(from var(--neutral-950) r g b / 0.28);
  --backdrop-neutral-subtle-bg-3: rgb(from var(--neutral-950) r g b / 0.3);
  --backdrop-neutral-subtle-bg-4: rgb(from var(--neutral-950) r g b / 0.33);
  --backdrop-neutral-subtle-bg-5: rgb(from var(--neutral-950) r g b / 0.35);
  --backdrop-neutral-primary-bg-1: rgb(from var(--neutral-800) r g b / 0.25);
  --backdrop-neutral-primary-bg-2: rgb(from var(--neutral-800) r g b / 0.28);
  --backdrop-neutral-primary-bg-3: rgb(from var(--neutral-800) r g b / 0.3);
  --backdrop-neutral-primary-bg-4: rgb(from var(--neutral-800) r g b / 0.33);
  --backdrop-neutral-primary-bg-5: rgb(from var(--neutral-800) r g b / 0.35);
  --backdrop-success-default-bg-1: rgb(from var(--success-900) r g b / 0.25);
  --backdrop-success-default-bg-2: rgb(from var(--success-900) r g b / 0.28);
  --backdrop-success-default-bg-3: rgb(from var(--success-900) r g b / 0.3);
  --backdrop-success-default-bg-4: rgb(from var(--success-900) r g b / 0.33);
  --backdrop-success-default-bg-5: rgb(from var(--success-900) r g b / 0.35);
  --backdrop-success-subtle-bg-1: rgb(from var(--success-950) r g b / 0.25);
  --backdrop-success-subtle-bg-2: rgb(from var(--success-950) r g b / 0.28);
  --backdrop-success-subtle-bg-3: rgb(from var(--success-950) r g b / 0.3);
  --backdrop-success-subtle-bg-4: rgb(from var(--success-950) r g b / 0.33);
  --backdrop-success-subtle-bg-5: rgb(from var(--success-950) r g b / 0.35);
  --backdrop-success-primary-bg-1: rgb(from var(--success-800) r g b / 0.25);
  --backdrop-success-primary-bg-2: rgb(from var(--success-800) r g b / 0.28);
  --backdrop-success-primary-bg-3: rgb(from var(--success-800) r g b / 0.3);
  --backdrop-success-primary-bg-4: rgb(from var(--success-800) r g b / 0.33);
  --backdrop-success-primary-bg-5: rgb(from var(--success-800) r g b / 0.35);
  --backdrop-warning-default-bg-1: rgb(from var(--warning-900) r g b / 0.25);
  --backdrop-warning-default-bg-2: rgb(from var(--warning-900) r g b / 0.28);
  --backdrop-warning-default-bg-3: rgb(from var(--warning-900) r g b / 0.3);
  --backdrop-warning-default-bg-4: rgb(from var(--warning-900) r g b / 0.33);
  --backdrop-warning-default-bg-5: rgb(from var(--warning-900) r g b / 0.35);
  --backdrop-warning-subtle-bg-1: rgb(from var(--warning-950) r g b / 0.25);
  --backdrop-warning-subtle-bg-2: rgb(from var(--warning-950) r g b / 0.28);
  --backdrop-warning-subtle-bg-3: rgb(from var(--warning-950) r g b / 0.3);
  --backdrop-warning-subtle-bg-4: rgb(from var(--warning-950) r g b / 0.33);
  --backdrop-warning-subtle-bg-5: rgb(from var(--warning-950) r g b / 0.35);
  --backdrop-warning-primary-bg-1: rgb(from var(--warning-800) r g b / 0.25);
  --backdrop-warning-primary-bg-2: rgb(from var(--warning-800) r g b / 0.28);
  --backdrop-warning-primary-bg-3: rgb(from var(--warning-800) r g b / 0.3);
  --backdrop-warning-primary-bg-4: rgb(from var(--warning-800) r g b / 0.33);
  --backdrop-warning-primary-bg-5: rgb(from var(--warning-800) r g b / 0.35);
  --backdrop-error-default-bg-1: rgb(from var(--error-900) r g b / 0.25);
  --backdrop-error-default-bg-2: rgb(from var(--error-900) r g b / 0.28);
  --backdrop-error-default-bg-3: rgb(from var(--error-900) r g b / 0.3);
  --backdrop-error-default-bg-4: rgb(from var(--error-900) r g b / 0.33);
  --backdrop-error-default-bg-5: rgb(from var(--error-900) r g b / 0.35);
  --backdrop-error-subtle-bg-1: rgb(from var(--error-950) r g b / 0.25);
  --backdrop-error-subtle-bg-2: rgb(from var(--error-950) r g b / 0.28);
  --backdrop-error-subtle-bg-3: rgb(from var(--error-950) r g b / 0.3);
  --backdrop-error-subtle-bg-4: rgb(from var(--error-950) r g b / 0.33);
  --backdrop-error-subtle-bg-5: rgb(from var(--error-950) r g b / 0.35);
  --backdrop-error-primary-bg-1: rgb(from var(--error-800) r g b / 0.25);
  --backdrop-error-primary-bg-2: rgb(from var(--error-800) r g b / 0.28);
  --backdrop-error-primary-bg-3: rgb(from var(--error-800) r g b / 0.3);
  --backdrop-error-primary-bg-4: rgb(from var(--error-800) r g b / 0.33);
  --backdrop-error-primary-bg-5: rgb(from var(--error-800) r g b / 0.35);
  --backdrop-info-default-bg-1: rgb(from var(--info-900) r g b / 0.25);
  --backdrop-info-default-bg-2: rgb(from var(--info-900) r g b / 0.28);
  --backdrop-info-default-bg-3: rgb(from var(--info-900) r g b / 0.3);
  --backdrop-info-default-bg-4: rgb(from var(--info-900) r g b / 0.33);
  --backdrop-info-default-bg-5: rgb(from var(--info-900) r g b / 0.35);
  --backdrop-info-subtle-bg-1: rgb(from var(--info-950) r g b / 0.25);
  --backdrop-info-subtle-bg-2: rgb(from var(--info-950) r g b / 0.28);
  --backdrop-info-subtle-bg-3: rgb(from var(--info-950) r g b / 0.3);
  --backdrop-info-subtle-bg-4: rgb(from var(--info-950) r g b / 0.33);
  --backdrop-info-subtle-bg-5: rgb(from var(--info-950) r g b / 0.35);
  --backdrop-info-primary-bg-1: rgb(from var(--info-800) r g b / 0.25);
  --backdrop-info-primary-bg-2: rgb(from var(--info-800) r g b / 0.28);
  --backdrop-info-primary-bg-3: rgb(from var(--info-800) r g b / 0.3);
  --backdrop-info-primary-bg-4: rgb(from var(--info-800) r g b / 0.33);
  --backdrop-info-primary-bg-5: rgb(from var(--info-800) r g b / 0.35);

  /* --------------------------------- Gradients --------------------------------- */
  --gradient-brand-blue-default-1: linear-gradient(135deg, var(--color-800) 0%, var(--color-900) 100%);
  --gradient-brand-blue-subtle-1: linear-gradient(135deg, var(--color-900) 0%, var(--color-950) 100%);
  --gradient-brand-blue-primary-1: linear-gradient(135deg, var(--color-700) 0%, var(--color-800) 100%);
  --gradient-neutral-default-1: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-900) 100%);
  --gradient-neutral-subtle-1: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-950) 100%);
  --gradient-neutral-primary-1: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-800) 100%);
  --gradient-success-default-1: linear-gradient(135deg, var(--success-800) 0%, var(--success-900) 100%);
  --gradient-success-subtle-1: linear-gradient(135deg, var(--success-900) 0%, var(--success-950) 100%);
  --gradient-success-primary-1: linear-gradient(135deg, var(--success-700) 0%, var(--success-800) 100%);
  --gradient-warning-default-1: linear-gradient(135deg, var(--warning-800) 0%, var(--warning-900) 100%);
  --gradient-warning-subtle-1: linear-gradient(135deg, var(--warning-900) 0%, var(--warning-950) 100%);
  --gradient-warning-primary-1: linear-gradient(135deg, var(--warning-700) 0%, var(--warning-800) 100%);
  --gradient-error-default-1: linear-gradient(135deg, var(--error-800) 0%, var(--error-900) 100%);
  --gradient-error-subtle-1: linear-gradient(135deg, var(--error-900) 0%, var(--error-950) 100%);
  --gradient-error-primary-1: linear-gradient(135deg, var(--error-700) 0%, var(--error-800) 100%);
  --gradient-info-default-1: linear-gradient(135deg, var(--info-800) 0%, var(--info-900) 100%);
  --gradient-info-subtle-1: linear-gradient(135deg, var(--info-900) 0%, var(--info-950) 100%);
  --gradient-info-primary-1: linear-gradient(135deg, var(--info-700) 0%, var(--info-800) 100%);
}