:root {
  /* ORIG Collection */
  --number-distance-0: 0px;
  --number-distance-20: 2px;
  --number-distance-40: 4px;
  --number-distance-60: 6px;
  --number-distance-80: 8px;
  --number-distance-100: 10px;
  --number-distance-120: 12px;
  --number-distance-160: 16px;
  --number-distance-200: 20px;
  --number-distance-240: 24px;
  --number-distance-320: 32px;
  --number-distance-400: 40px;
  --number-dimension-0: 0px;
  --number-dimension-20: 2px;
  --number-dimension-40: 4px;
  --number-dimension-60: 6px;
  --number-dimension-80: 8px;
  --number-dimension-100: 10px;
  --number-dimension-120: 12px;
  --number-dimension-160: 16px;
  --number-dimension-200: 20px;
  --number-dimension-240: 24px;
  --number-dimension-320: 32px;
  --number-dimension-400: 40px;
  --number-dimension-480: 48px;
  --number-dimension-560: 56px;
  --number-radius-0: 0px;
  --number-radius-20: 2px;
  --number-radius-40: 4px;
  --number-radius-60: 6px;
  --number-radius-80: 8px;
  --number-radius-120: 12px;
  --number-radius-99999: 9999px;

  --palette-dark-opacity-0: rgba(54, 55, 76, 0.00);
  --palette-dark-opacity-100: rgba(54, 55, 76, 0.04);
  --palette-dark-opacity-200: rgba(54, 55, 76, 0.08);
  --palette-dark-opacity-250: rgba(54, 55, 76, 0.12);
  --palette-dark-opacity-300: rgba(54, 55, 76, 0.16);
  --palette-dark-opacity-400: rgba(54, 55, 76, 0.24);
  --palette-dark-opacity-500: rgba(54, 55, 76, 0.32);
  --palette-dark-opacity-600: rgba(54, 55, 76, 0.48);
  --palette-dark-opacity-700: rgba(54, 55, 76, 0.56);
  --palette-dark-opacity-800: rgba(54, 55, 76, 0.72);
  --palette-dark-opacity-900: rgba(54, 55, 76, 0.88);
  --palette-dark-opacity-1000: rgba(54, 55, 76, 1);
  --palette-black-opacity-0: rgba(0, 0, 0, 0.00);
  --palette-black-opacity-100: rgba(0, 0, 0, 0.04);
  --palette-black-opacity-200: rgba(0, 0, 0, 0.08);
  --palette-black-opacity-250: rgba(0, 0, 0, 0.12);
  --palette-black-opacity-300: rgba(0, 0, 0, 0.16);
  --palette-black-opacity-400: rgba(0, 0, 0, 0.24);
  --palette-black-opacity-500: rgba(0, 0, 0, 0.32);
  --palette-black-opacity-600: rgba(0, 0, 0, 0.48);
  --palette-black-opacity-700: rgba(0, 0, 0, 0.56);
  --palette-black-opacity-800: rgba(0, 0, 0, 0.72);
  --palette-black-opacity-900: rgba(0, 0, 0, 0.88);
  --palette-black-opacity-1000: rgba(0, 0, 0, 1);
  --palette-white-opacity-0: rgba(255, 255, 255, 0.00);
  --palette-white-opacity-100: rgba(255, 255, 255, 0.04);
  --palette-white-opacity-200: rgba(255, 255, 255, 0.08);
  --palette-white-opacity-250: rgba(255, 255, 255, 0.12);
  --palette-white-opacity-300: rgba(255, 255, 255, 0.16);
  --palette-white-opacity-400: rgba(255, 255, 255, 0.24);
  --palette-white-opacity-500: rgba(255, 255, 255, 0.32);
  --palette-white-opacity-600: rgba(255, 255, 255, 0.48);
  --palette-white-opacity-700: rgba(255, 255, 255, 0.56);
  --palette-white-opacity-800: rgba(255, 255, 255, 0.72);
  --palette-white-opacity-900: rgba(255, 255, 255, 0.88);
  --palette-white-opacity-1000: rgba(255, 255, 255, 1);
  --palette-blue-opacity-0: rgba(77, 100, 253, 0.00);
  --palette-blue-opacity-100: rgba(77, 100, 253, 0.04);
  --palette-blue-opacity-150: rgba(77, 100, 253, 0.08);
  --palette-blue-opacity-200: rgba(77, 100, 253, 0.12);
  --palette-blue-opacity-300: rgba(77, 100, 253, 0.16);
  --palette-blue-opacity-400: rgba(77, 100, 253, 0.24);
  --palette-blue-opacity-500: rgba(77, 100, 253, 0.32);
  --palette-blue-opacity-600: rgba(77, 100, 253, 0.48);
  --palette-blue-opacity-700: rgba(77, 100, 253, 0.56);
  --palette-blue-opacity-800: rgba(77, 100, 253, 0.72);
  --palette-blue-opacity-900: rgba(77, 100, 253, 0.88);
  --palette-blue-50: #ECF1FF;
  --palette-blue-100: #D8E3FF;
  --palette-blue-150: #C4D3FF;
  --palette-blue-200: #AFC2FF;
  --palette-blue-300: #8AA0FF;
  --palette-blue-400: #6980FF;
  --palette-blue-500: #4D64FD;
  --palette-blue-600: #3D49E0;
  --palette-blue-700: #2F33B7;
  --palette-blue-800: #222183;
  --palette-blue-900: #141245;
  --palette-purple-50: #F2EAFF;
  --palette-purple-100: #E6D4FF;
  --palette-purple-150: #DBBDFF;
  --palette-purple-200: #D0A6FF;
  --palette-purple-300: #BB7AFF;
  --palette-purple-400: #A954FF;
  --palette-purple-500: #9936FC;
  --palette-purple-600: #801EDF;
  --palette-purple-700: #640EB7;
  --palette-purple-800: #450583;
  --palette-purple-900: #230144;
  --palette-dark-blue-50: #2b3349;
  --palette-dark-blue-100: #293045;
  --palette-dark-blue-150: #262d41;
  --palette-dark-blue-200: #242a3d;
  --palette-dark-blue-300: #1f2536;
  --palette-dark-blue-400: #1a1f2e;
  --palette-dark-blue-500: #151a26;
  --palette-dark-blue-600: #11151f;
  --palette-dark-blue-700: #0d0f17;
  --palette-dark-blue-800: #080a0f;
  --palette-dark-blue-900: #040508;
  --palette-dark-purple-50: #402b49;
  --palette-dark-purple-100: #3c2945;
  --palette-dark-purple-150: #392641;
  --palette-dark-purple-200: #36243d;
  --palette-dark-purple-300: #2f1f36;
  --palette-dark-purple-400: #281a2e;
  --palette-dark-purple-500: #211526;
  --palette-dark-purple-600: #1b111f;
  --palette-dark-purple-700: #140d17;
  --palette-dark-purple-800: #0d080f;
  --palette-dark-purple-900: #070408;
  --palette-light-blue-50: #F8FAFF;
  --palette-light-blue-100: #F1F5FF;
  --palette-light-blue-150: #EAF0FF;
  --palette-light-blue-200: #E3EAFF;
  --palette-light-blue-300: #D6E0FF;
  --palette-light-blue-400: #CCD7FF;
  --palette-light-blue-500: #C4D0FF;
  --palette-light-blue-600: #BECAFF;
  --palette-light-blue-700: #B9C6FF;
  --palette-light-blue-800: #B6C3FF;
  --palette-light-blue-900: #B4C0FF;
  --palette-light-purple-50: #F8F8FF;
  --palette-light-purple-100: #F1F1FF;
  --palette-light-purple-150: #EBEAFF;
  --palette-light-purple-200: #E4E3FF;
  --palette-light-purple-300: #DAD6FF;
  --palette-light-purple-400: #D2CCFF;
  --palette-light-purple-500: #CCC4FF;
  --palette-light-purple-600: #C7BEFF;
  --palette-light-purple-700: #C4B9FF;
  --palette-light-purple-800: #C2B6FF;
  --palette-light-purple-900: #C0B4FF;

  --typeface-os: "HarmonyOS Sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --typeface-weight-100: 100;
  --typeface-weight-200: 200;
  --typeface-weight-300: 300;
  --typeface-weight-400: 400;
  --typeface-weight-500: 500;
  --typeface-weight-600: 600;
  --typeface-weight-700: 700;
  --typeface-weight-800: 800;
  --typeface-weight-900: 900;
  --typeface-size-50: 11px;
  --typeface-size-75: 12px;
  --typeface-size-100: 14px;
  --typeface-size-200: 16px;
  --typeface-size-300: 18px;
  --typeface-size-400: 20px;
  --typeface-size-500: 22px;
  --typeface-size-600: 25px;
  --typeface-size-700: 28px;
  --typeface-size-800: 32px;
  --typeface-size-900: 36px;
  --typeface-size-1000: 40px;
  --typeface-size-1100: 45px;
  --typeface-size-1200: 51px;
  --typeface-size-1300: 58px;
  --typeface-height-50: 14px;
  --typeface-height-75: 16px;
  --typeface-height-100: 18px;
  --typeface-height-200: 20px;
  --typeface-height-300: 24px;
  --typeface-height-400: 26px;
  --typeface-height-500: 28px;
  --typeface-height-600: 32px;
  --typeface-height-700: 36px;
  --typeface-height-800: 40px;
  --typeface-height-900: 46px;
  --typeface-height-1000: 50px;
  --typeface-height-1100: 58px;
  --typeface-height-1200: 64px;
  --typeface-height-1300: 74px;

  /* APP Collection */
  --typescale-family: var(--typeface-os);
  --typescale-size-body-small: var(--typeface-size-75);
  --typescale-size-body-medium: var(--typeface-size-100);
  --typescale-size-body-medium-textarea: var(--typeface-size-100);
  --typescale-size-body-large: var(--typeface-size-200);
  --typescale-size-label-small: var(--typeface-size-75);
  --typescale-size-label-medium: var(--typeface-size-100);
  --typescale-size-label-large: var(--typeface-size-200);
  --typescale-height-body-small: var(--typeface-height-75);
  --typescale-height-body-medium: var(--typeface-height-100);
  --typescale-height-body-medium-textarea: var(--typeface-height-200);
  --typescale-height-body-large: var(--typeface-height-200);
  --typescale-height-label-small: var(--typeface-height-75);
  --typescale-height-label-medium: var(--typeface-height-100);
  --typescale-height-label-large: var(--typeface-height-200);
  --typescale-weight-body-small: var(--typeface-weight-400);
  --typescale-weight-body-medium: var(--typeface-weight-400);
  --typescale-weight-body-medium-textarea: var(--typeface-weight-400);
  --typescale-weight-body-large: var(--typeface-weight-400);
  --typescale-weight-label-small: var(--typeface-weight-700);
  --typescale-weight-label-medium: var(--typeface-weight-700);
  --typescale-weight-label-large: var(--typeface-weight-700);


  --border-radius-none: var(--number-radius-0);
  --border-radius-small: var(--number-radius-40);
  --border-radius-medium: var(--number-radius-60);
  --border-radius-large: var(--number-radius-80);
  --border-radius-xlarge: var(--number-radius-120);
  --border-radius-circular: var(--number-radius-99999);
  --component-height-small: var(--number-dimension-240);
  --component-height-medium: var(--number-dimension-320);
  --component-height-large: var(--number-dimension-400);
  --layout-spacing-none: var(--number-distance-0);
  --layout-spacing-xxxsmall: var(--number-distance-40);
  --layout-spacing-xxsmall: var(--number-distance-60);
  --layout-spacing-xsmall: var(--number-distance-80);
  --layout-spacing-medium: var(--number-distance-160);
  --layout-spacing-large: var(--number-distance-240);
  --layout-spacing-xxlarge: var(--number-distance-400);
  --shadow-offset-x-medium-2: var(--number-distance-0);
  --shadow-offset-y-medium-2: var(--number-distance-60);
  --shadow-blur-medium-2: var(--number-distance-120);
  --shadow-offset-x-medium-1: var(--number-distance-0);
  --shadow-offset-y-medium-1: var(--number-distance-20);
  --shadow-blur-medium-1: var(--number-distance-40);

  /* APP Collection - Component */  
  --button-general-background-color-disabled: var(--color-fill-overlay-strong);
  --button-primary-background-color-default: var(--color-accent-brand-base);
  --button-primary-background-color-hover: var(--color-accent-brand-strong);
  --button-primary-background-color-pressed: var(--color-accent-brand-stronger);
  --button-secondary-background-color-default: var(--color-accent-brand-base);
  --button-secondary-background-color-hover: var(--color-accent-brand-strong);
  --button-secondary-background-color-pressed: var(--color-accent-brand-stronger);
  --button-primary-text-color-default: var(--color-static-white);
  --button-tertiary-background-color-default: var(--color-fill-quaternary);
  --card-standard-background-color-default: var(--color-fill-quaternary);
  --card-standard-background-color-hover: var(--color-fill-overlay-weak);
  --component-ghost-background-color-hover: var(--color-fill-overlay-base);
  --component-ghost-background-color-pressed: var(--color-fill-overlay-strong);
  --component-ghost-background-color-selected: var(--color-fill-overlay-base);
  --component-ghost-background-color-selected-emphasized: var(--color-fill-quaternary);
  --divider-base-background-color: var(--color-stroke-overlay-weak);
  --input-standard-background-color-default: var(--color-fill-secondary);
  --input-standard-border-color-default: var(--color-stroke-overlay-weak);  

  /* APP Collection - Light Theme */
  --color-accent-brand-base: var(--palette-blue-500);
  --color-accent-brand-strong: var(--palette-blue-600);
  --color-accent-brand-stronger: var(--palette-blue-700);
  --color-accent-brand-overlay-base: var(--palette-blue-opacity-400);
  --color-fill-primary-1: var(--palette-light-purple-300);
  --color-fill-primary-2: var(--palette-light-blue-300);
  --color-fill-primary-3: var(--palette-light-blue-200);
  --color-fill-secondary: var(--palette-white-opacity-700);
  --color-fill-tertiary: var(--palette-white-opacity-800);
  --color-fill-quaternary: var(--palette-white-opacity-1000);
  --color-text-primary: var(--palette-black-opacity-1000);
  --color-text-secondary: var(--palette-black-opacity-800);
  --color-text-quaternary: var(--palette-black-opacity-400);
  --color-fill-overlay-weakest: var(--palette-white-opacity-100);
  --color-fill-overlay-weak: var(--palette-blue-50);
  --color-fill-overlay-base: var(--palette-black-opacity-200);
  --color-fill-overlay-strong: var(--palette-black-opacity-250);
  --color-fill-overlay-strongest: var(--palette-black-opacity-900);
  --color-static-white: var(--palette-white-opacity-1000);
  --color-static-black-weak: var(--palette-black-opacity-300);
  --color-stroke-primary-1: var(--palette-blue-500);
  --color-stroke-primary-2: var(--palette-purple-300);
  --color-stroke-primary-3: var(--palette-blue-300);
  --color-stroke-overlay-weak: var(--palette-black-opacity-300);
  --color-shadow-medium: var(--palette-black-opacity-250);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* APP Collection - Dark Theme */
    /* --color-accent-brand-base: var(--palette-blue-400);
    --color-accent-brand-strong: var(--palette-blue-300);
    --color-accent-brand-stronger: var(--palette-blue-200);
    --color-accent-brand-overlay-base: var(--palette-blue-opacity-500);
    --color-fill-primary-1: var(--palette-dark-purple-400);
    --color-fill-primary-2: var(--palette-dark-blue-400);
    --color-fill-primary-3: var(--palette-dark-blue-300);
    --color-fill-secondary: var(--palette-black-opacity-600);
    --color-fill-tertiary: var(--palette-black-opacity-700);
    --color-fill-quaternary: var(--palette-black-opacity-1000);
    --color-text-primary: var(--palette-white-opacity-1000);
    --color-text-secondary: var(--palette-white-opacity-700);
    --color-text-quaternary: var(--palette-white-opacity-300);    
    --color-fill-overlay-weakest: var(--palette-black-opacity-100);
    --color-fill-overlay-weak: var(--palette-white-opacity-100);
    --color-fill-overlay-base: var(--palette-white-opacity-200);
    --color-fill-overlay-strong: var(--palette-white-opacity-250);
    --color-fill-overlay-strongest: var(--palette-white-opacity-300);
    --color-static-white: var(--palette-white-opacity-1000);
    --color-static-black-weak: var(--palette-black-opacity-300);
    --color-stroke-primary-1: var(--palette-blue-500);
    --color-stroke-primary-2: var(--palette-purple-300);
    --color-stroke-primary-3: var(--palette-blue-300);
    --color-stroke-overlay-weak: var(--palette-white-opacity-300);
    --color-shadow-medium: var(--palette-black-opacity-500); */
  }
}

/* Drop Shadow */
.shadow-medium {
  box-shadow: var(--shadow-offset-x-medium-1) var(--shadow-offset-y-medium-1) var(--shadow-blur-medium-1) var(--color-shadow-medium), var(--shadow-offset-x-medium-2) var(--shadow-offset-y-medium-2) var(--shadow-blur-medium-2) var(--color-shadow-medium);
}

/* Text Styles */
.body-small {
  font-family: var(--typescale-family);
  font-weight: var(--typescale-weight-body-small);
  font-size: var(--typescale-size-body-small);
  line-height: var(--typescale-height-body-small);
}

.body-medium {
  font-family: var(--typescale-family);
  font-weight: var(--typescale-weight-body-medium);
  font-size: var(--typescale-size-body-medium);
  line-height: var(--typescale-height-body-medium);
}

.body-medium-textarea {
  font-family: var(--typescale-family);
  font-weight: var(--typescale-weight-body-medium-textarea);
  font-size: var(--typescale-size-body-medium-textarea);
  line-height: var(--typescale-height-body-medium-textarea);
}

.body-large {
  font-family: var(--typescale-family);
  font-weight: var(--typescale-weight-body-large);
  font-size: var(--typescale-size-body-large);
  line-height: var(--typescale-height-body-large);
}

.label-small {
  font-family: var(--typescale-family);
  font-weight: var(--typescale-weight-label-small);
  font-size: var(--typescale-size-label-small);
  line-height: var(--typescale-height-label-small);
}

.label-medium {
  font-family: var(--typescale-family);
  font-weight: var(--typescale-weight-label-medium);
  font-size: var(--typescale-size-label-medium);
  line-height: var(--typescale-height-label-medium);
}

.label-large {
  font-family: var(--typescale-family);
  font-weight: var(--typescale-weight-label-large);
  font-size: var(--typescale-size-label-large);
  line-height: var(--typescale-height-label-large);
}

/* Color Styles */
.background {
  background: linear-gradient(to top left, var(--color-fill-primary-1) 0%, var(--color-fill-primary-2) 80%, var(--color-fill-primary-3) 100%);
}
.gradient-border-input {
  background: linear-gradient(to bottom, var(--color-stroke-primary-1) 0%, var(--color-stroke-primary-2) 25%, var(--color-stroke-primary-3) 100%);
}