/*:root {*/
/*    !**********!*/
/*    !* Colors *!*/
/*    !**********!*/
/*    !* General *!*/
/*    --primaryColor: #3094ff;*/
/*    --primaryLightColor: #3094ff08;*/
/*    --primaryInvertedColor: #ffffff;*/
/*    --secondaryColor: #687286;*/
/*    --successColor: #44af69;*/
/*    --successLightColor: #44af694d;*/
/*    --successInvertedColor: #ffffff;*/
/*    --warningColor: #ffb627;*/
/*    --warningInvertedColor: #ffffff;*/
/*    --warningLightColor: #ffb6274d;*/
/*    --errorColor: #fe4a49;*/
/*    --errorInvertedColor: #ffffff;*/
/*    --errorLightColor: #fe4a494d;*/
/*    --infoColor: var(--primaryColor);*/

/*    !* Layout *!*/
/*    --bodyBackgroundColor: #ffffff;*/
/*    --componentBackgroundColor: #ffffff;*/
/*    --componentTitleColor: #434b59;*/
/*    --baseBackgroundColor: #fbfbff;*/
/*    --subtleBackgroundColor: #f9fafc;*/
/*    --hoveredBackgroundColor: #f6f7ff;*/
/*    --hoveredBorderColor: #d8dee8;*/
/*    --buttonBackgroundColor: #ffffff;*/
/*    --buttonBorderColor: #eaecf6;*/
/*    --buttonPrimaryBorderColor: var(--primaryColor);*/
/*    --secondaryButtonBackgroundColor: #ffffff;*/
/*    --borderColor: #eaecf6;*/
/*    --dropTargetBorderColor: #e0e0e0;*/
/*    --validDropTargetBackgroundColor: #d2f3d4;*/
/*    --validDropTargetBorderColor: #44af69;*/
/*    --iconColor: #8d97ab;*/
/*    --iconSubtleColor: #dddddd;*/
/*    --iconDisabledBackgroundColor: #eaecf6;*/
/*    --scrollbarThumbColor: #e0e0e0;*/
/*    --scrollbarThumbHoverColor: #8d97ab;*/
/*    --scrollbarBackgroundColor: #fbfbff;*/

/*    !* Text *!*/
/*    --baseTextColor: #434b59;*/
/*    --bodyTextColor: #434b59;*/
/*    --buttonPrimaryTextColor: var(--primaryColor);*/
/*    --buttonTextColor: #687286;*/
/*    --inputLabelColor: #687286;*/
/*    --linkTextColor: var(--primaryColor);*/
/*    --linkHoverTextColor: var(--primaryColor);*/
/*    --headingsTextColor: #272727;*/
/*    --loginPageHeaderTextColor: #004f9f;*/
/*    --subtleTextColor: #687286;*/
/*    --disabledTextColor: #b1bdd2;*/
/*    --componentTextColor: #434b59;*/
/*    --componentSubtleTextColor: #92959a;*/
/*    --hoveredTextColor: #424242;*/
/*    --selectedTextColor: #ffffff;*/

/*    !* Series (Used for charts) *! */
/*    --seriesAColor: #fe4a49;*/
/*    --seriesBColor: #ffb627;*/
/*    --seriesCColor: #44af69;*/
/*    --seriesDColor: #28b4c8;*/
/*    --seriesEColor: #004f9f;*/
/*    --seriesFColor: #922d50;*/

/*    !***********************!*/
/*    !* Main navigation bar *!*/
/*    !***********************!*/
/*    --mainNavigationBackgroundColor: #ffffff;*/
/*    --mainNavigationColor: #687286;*/
/*    --mainNavigationActiveColor: var(--primaryColor);*/
/*    --mainNavigationHeaderTextColor: #434b59;*/

/*    !* Transparent style of the main navigation bar which is used on the dashboard *!*/
/*    --mainNavigationTransparentBackgroundColor: 255, 255, 255;*/
/*    --mainNavigationTransparentColor: #687286;*/
/*    --mainNavigationTransparentActiveColor: var(--primaryColor);*/
/*    --mainNavigationTransparentHeaderTextColor: #434b59;*/

/*    !*************************!*/
/*    !* Bottom navigation bar *!*/
/*    !*************************!*/
/*    --bottombarBackgroundColor: #ffffff;*/
/*    --bottombarColor: #687286;*/
/*}*/

:root {
    color-scheme: light dark;

    /* Surface / Main */
    --surface-main-soft: light-dark(var(--white-80), var(--black-70));
    --surface-main-balanced: light-dark(var(--white-90), var(--black-80));
    --surface-main-sharp: light-dark(var(--white-100), var(--black-90));

    /* Surface / Elevated */
    --surface-elevated-soft: light-dark(var(--white-80), var(--black-80));
    --surface-elevated-balanced: light-dark(var(--white-70), var(--black-70));
    --surface-elevated-sharp: light-dark(var(--white-60), var(--black-60));
    --surface-elevated-contrasting: light-dark(var(--white-100), var(--black-80));

    /* Border */
    --border-soft: light-dark(var(--white-60), var(--black-60));
    --border-balanced: light-dark(var(--white-50), var(--black-50));
    --border-sharp: light-dark(var(--white-40), var(--black-40));

    /* Text */
    --text-primary: light-dark(var(--black-60), var(--white-50));
    --text-secondary: light-dark(var(--black-30), var(--white-30));
    --text-tertiary: light-dark(var(--white-20), var(--white-10));
    --text-link: light-dark(var(--brand-100), var(--brand-70));
    --text-on-brand-primary: var(--white-100);

    /* Situation / Info */
    --situation-info-soft: light-dark(var(--blue-10), var(--blue-100));
    --situation-info-balanced: light-dark(var(--blue-30), var(--blue-90));
    --situation-info-sharp: light-dark(var(--blue-60), var(--blue-40));
    --situation-info-shade: light-dark(var(--blue-80), var(--blue-30));

    /* Situation / Warning */
    --situation-warning-soft: light-dark(var(--amber-10), var(--amber-100));
    --situation-warning-balanced: light-dark(var(--amber-30), var(--amber-90));
    --situation-warning-sharp: light-dark(var(--amber-70), var(--amber-60));
    --situation-warning-shade: light-dark(var(--amber-80), var(--amber-50));

    /* Situation / Error */
    --situation-error-soft: light-dark(var(--red-10), var(--red-100));
    --situation-error-balanced: light-dark(var(--red-20), var(--red-90));
    --situation-error-sharp: light-dark(var(--red-60), var(--red-60));
    --situation-error-shade: light-dark(var(--red-70), var(--red-50));

    /* Situation / Success */
    --situation-success-soft: light-dark(var(--green-10), var(--green-100));
    --situation-success-balanced: light-dark(var(--green-20), var(--green-90));
    --situation-success-sharp: light-dark(var(--green-70), var(--green-70));
    --situation-success-shade: light-dark(var(--green-80), var(--green-60));

    /* State / Disabled */
    --state-disabled-soft: light-dark(var(--white-50), var(--black-80));
    --state-disabled-balanced: light-dark(var(--white-40), var(--black-60));
    --state-disabled-sharp: light-dark(var(--white-30), var(--black-30));

    /* State / Selected */
    --state-selected-soft: light-dark(var(--brand-10), var(--brand-shade-100));
    --state-selected-balanced: light-dark(var(--brand-40), var(--brand-shade-90));
    --state-selected-sharp: light-dark(var(--brand-100), var(--brand-100));

    /* Brand / Primary */
    --brand-primary-soft: light-dark(var(--brand-20), var(--brand-shade-100));
    --brand-primary-balanced: light-dark(var(--brand-50), var(--brand-shade-70));
    --brand-primary-sharp: light-dark(var(--brand-100), var(--brand-100));
    --brand-primary-shade: light-dark(var(--brand-shade-30), var(--brand-60));

    /* Brand / Secondary */
    --brand-secondary-soft: light-dark(var(--turquise-10), var(--turquise-100));
    --brand-secondary-balanced: light-dark(var(--turquise-40), var(--turquise-70));
    --brand-secondary-sharp: light-dark(var(--turquise-60), var(--turquise-50));
    --brand-secondary-shade: light-dark(var(--turquise-70), var(--turquise-40));

    /* Utility */
    --utility-overlay: light-dark(#343943b8, #0a0b0dc7);
    /* Fix colors are intentionally constant across modes - see docs/conventions/design-tokens.md. */
    --utility-fix-coal: var(--black-60);
    --utility-fix-white: var(--white-100);
    --utility-hover: light-dark(var(--white-80), var(--black-70));

    /* Inversed */
    --inversed-soft: light-dark(var(--white-40), var(--black-40));
    --inversed-balanced: light-dark(var(--white-10), var(--black-10));
    --inversed-sharp: light-dark(var(--black-70), var(--white-70));
    --inversed-shade: light-dark(var(--black-80), var(--white-80));

    /**********************/
    /* Dimension (Figma)  */
    /**********************/
    --corner-radius-small: 4px;
    --corner-radius-medium: 8px;
    --corner-radius-large: 16px;
    --corner-radius-full: 96px;
    --space-space-0: 0px;
    --space-space-1: 4px;
    --space-space-2: 8px;
    --space-space-3: 12px;
    --space-space-4: 16px;
    --space-space-6: 24px;
}