html {

    // Spacing
    @for $i from 0 to 6 {
        --spacing-#{$i}: #{$i*4}px;
    }

    // Typography
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;

    // Typography - Body
    --body-font-size-sm: var(--font-size-sm);
    --body-font-size-md: var(--font-size-md);
    --body-font-size-lg: var(--font-size-lg);
    --body-font-weight: var(--font-weight-normal);
    --body-line-height: 150%;

    --body-sm-font: normal normal var(--body-font-weight) var(--body-font-size-sm)/var(--body-line-height) var(--ion-font-family);
    --body-md-font: normal normal var(--body-font-weight) var(--body-font-size-md)/var(--body-line-height) var(--ion-font-family);
    --body-lg-font: normal normal var(--body-font-weight) var(--body-font-size-lg)/var(--body-line-height) var(--ion-font-family);

    // Typography - Links
    --link-sm-font-size: var(--font-size-sm);
    --link-md-font-size: var(--font-size-md);
    --link-lg-font-size: var(--font-size-lg);
    --link-font-weight: var(--font-weight-normal);
    --link-line-height: 150%;

    --link-sm-font: normal normal var(--link-font-weight) var(--link-sm-font-size)/var(--link-line-height) var(--ion-font-family);
    --link-md-font: normal normal var(--link-font-weight) var(--link-md-font-size)/var(--link-line-height) var(--ion-font-family);
    --link-lg-font: normal normal var(--link-font-weight) var(--link-lg-font-size)/var(--link-line-height) var(--ion-font-family);

    // Typography - Labels
    --label-sm-font-size: 10px;
    --label-md-font-size: 12px;
    --label-lg-font-size: 14px;
    --label-font-weight: var(--font-weight-medium);

    --label-sm-line-height: 16px;
    --label-md-line-height: 16px;
    --label-lg-line-height: 20px;

    --label-sm-font: normal normal var(--label-font-weight) var(--label-sm-font-size)/var(--label-sm-line-height) var(--ion-font-family);
    --label-md-font: normal normal var(--label-font-weight) var(--label-md-font-size)/var(--label-md-line-height) var(--ion-font-family);
    --label-lg-font: normal normal var(--label-font-weight) var(--label-lg-font-size)/var(--label-lg-line-height) var(--ion-font-family);

    // Typography - Subtitles
    --subtitle-sm-font-size: 14px;
    --subtitle-md-font-size: 16px;
    --subtitle-lg-font-size: 20px;

    --subtitle-font-weight: var(--font-weight-medium);
    --subtitle-line-height: 150%;

    --subtitle-sm-font: normal normal var(--subtitle-font-weight) var(--subtitle-sm-font-size)/var(--subtitle-line-height) var(--ion-font-family);
    --subtitle-md-font: normal normal var(--subtitle-font-weight) var(--subtitle-md-font-size)/var(--subtitle-line-height) var(--ion-font-family);
    --subtitle-lg-font: normal normal var(--subtitle-font-weight) var(--subtitle-lg-font-size)/var(--subtitle-line-height) var(--ion-font-family);

    // Typography - Headings
    --heading-1-font-size: 28px;
    --heading-2-font-size: 24px;
    --heading-3-font-size: 22px;
    --heading-4-font-size: 20px;
    --heading-5-font-size: 18px;
    --heading-6-font-size: 16px;

    --heading-1-font-weight: var(--font-weight-normal);
    --heading-2-font-weight: var(--font-weight-normal);
    --heading-3-font-weight: var(--font-weight-normal);
    --heading-4-font-weight: var(--font-weight-medium);
    --heading-5-font-weight: var(--font-weight-medium);
    --heading-6-font-weight: var(--font-weight-medium);

    --heading-line-height: 130%;

    --heading-1-font: normal normal var(--heading-1-font-weight) var(--heading-1-font-size)/var(--heading-line-height) var(--ion-font-family);
    --heading-2-font: normal normal var(--heading-2-font-weight) var(--heading-2-font-size)/var(--heading-line-height) var(--ion-font-family);
    --heading-3-font: normal normal var(--heading-3-font-weight) var(--heading-3-font-size)/var(--heading-line-height) var(--ion-font-family);
    --heading-4-font: normal normal var(--heading-4-font-weight) var(--heading-4-font-size)/var(--heading-line-height) var(--ion-font-family);
    --heading-5-font: normal normal var(--heading-5-font-weight) var(--heading-5-font-size)/var(--heading-line-height) var(--ion-font-family);
    --heading-6-font: normal normal var(--heading-6-font-weight) var(--heading-6-font-size)/var(--heading-line-height) var(--ion-font-family);

    // Radiuses
    --radius-none: 0px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-round: 50%;

    // Shadows / Elevation
    --drop-shadow-color: 40 40 40; //#282828;
    --drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 20%);
    --drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 15%), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 2%);
    --drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 20%), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 14%);
    --drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 14%);
    --drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 12%), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 14%);
    --drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 12%), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 14%);
    --drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 12%), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 14%);
    --drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 12%), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 14%);
    --drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
    --drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
    --drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 20%), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 12%), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 14%);

    // A11y
    --a11y-min-target-size: 44px;

    // Colors
    --blue: #0f6cbf;

    --text-color-main: var(--gray-900);
    --text-color-secondary: var(--gray-800);

    --state-color-hover: rgb(40 40 40, 4%); // --gray-900 4%
    --state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12%
    --state-color-focused: rgb(40 40 40, 12%); // --gray-900 12%
    --state-color-keyboard-focus: var(--blue);

}

html.dark {

    // Colors
    --text-color-main: var(--gray-200);
    --text-color-secondary: var(--gray-300);

}

/** @deprecated since 4.3 **/
html {
    --small-radius: var(--radius-xs);
    --medium-radius: var(--radius-sm);
    --big-radius: var(--radius-lg);
    --huge-radius: var(--radius-xl);
}

/** @deprecated since 4.4 **/
html {
    --font-size-normal: var(--font-size-md);
}