/* light mode */
:root,
.ik-theme--light,
.ik-theme--light .ik-theme--static {
    --background-color: #fff;
    --on-background-color-1: #1f2c38;
    --on-background-color-2: #222B45;
    --on-background-color-3: #8294a2;
    --on-background-color-4: #BBC7D0;
    --on-background-color-5: #E7F2F9;

    --surface-color: #fff;
    --on-surface-color-1: #1f2c38;
    --on-surface-color-2: #222B45;
    --on-surface-color-3: #8294A2;
    --on-surface-color-4: #BBC7D0;

    --surface-lighten-color: #f4f9fb;
    --on-surface-lighten-color-1: #1f2c38;
    --on-surface-lighten-color-2: #222B45;
    --on-surface-lighten-color-3: #8294A2;
    --on-surface-lighten-color-4: #acbbc7;

    --surface-darken-color: #EBF1F6;
    --on-surface-darken-color-1: #1f2c38;
    --on-surface-darken-color-2: #222B45;
    --on-surface-darken-color-3: #8294A2;
    --on-surface-darken-color-4: #acbbc7;

    --border-color-1: #DDE3E7;
    --border-color-2: #EBF1F6;
    --marker-color-1: #1b2c39;
    --skeleton-color-1: #EBF1F6;
    --skeleton-color-2: hsla(0, 0%, 100%, .35);

    --primary-color: #6488F8;
    --primary-color-o1: rgba(100, 136, 248, 0.1);
    --on-primary-color: #fff;

    --secondary-color: #1b2c39;
    --secondary-color-alt-1: #0D3034;
    --on-secondary-color: #fff;
    --on-secondary-color-alt-1: #fff;

    --accent-color: #F3B563;
    --accent-color-o1: rgba(243, 181, 99, 0.1);
    --on-accent-color: #1f2c38;

    --error-color: #ff304c;
    --error-color-o1: rgba(255, 48, 76, 0.1);
    --on-error-color: #fff;

    --success-color: #40BE7A;
    --success-color-o1: rgba(64, 190, 122, 0.1);
    --on-success-color: #fff;

    --shadow-color-1: rgba(70, 90, 106, 0.15);
    --shadow-color-2: rgba(70, 90, 106, 0.2);
    --shadow-color-3: rgba(70, 90, 106, 0.5);

    --scrollbar-color: #536d83;
    --scrollbar-track-color: rgba(0, 0, 0, 0.1);

    --tooltip-color: #333;
    --on-tooltip-color: #fff;

    --theme-1-color: #6488F8;
    --theme-1-color-o1: rgba(100, 136, 248, 0.1);
    --theme-2-color: #1FB665;
    --theme-2-color-o1: rgba(31, 182, 101, 0.1);
    --theme-3-color: #F4C23B;
    --theme-3-color-o1: rgba(244, 194, 59, 0.1);
    --theme-4-color: #FF855D;
    --theme-4-color-o1: rgba(255, 133, 93, 0.1);
    --theme-5-color: #FF304C;
    --theme-5-color-o1: rgba(255, 48, 76, 0.1);
    --theme-6-color: #FF179E;
    --theme-6-color-o1: rgba(255, 23, 158, 0.1);
    --theme-7-color: #A036CC;
    --theme-7-color-o1: rgba(160, 54, 204, 0.1);
    --theme-8-color: #212121;
    --theme-8-color-o1: rgba(33, 33, 33, 0.1);
    --theme-9-color: #3AAADC;
    --theme-9-color-o1: rgba(58, 170, 220, 0.1);

    --on-theme-color: #fff;
}

/* dark mode */
.ik-theme--dark:root,
.ik-theme--dark,
.ik-theme--dark .ik-theme--static {
    --background-color: #121212;
    --on-background-color-1: #cdc3ba;
    --on-background-color-2: #b6aea4;
    --on-background-color-3: #787878;
    --on-background-color-4: #4b4b4b;
    --on-background-color-5: #2c2c2c;

    --surface-color: #191919;
    --on-surface-color-1: #cdc3ba;
    --on-surface-color-2: #b6aea4;
    --on-surface-color-3: #787878;
    --on-surface-color-4: #4b4b4b;

    --surface-darken-color: #222222;
    --on-surface-darken-color-1: #e0d3c7;
    --on-surface-darken-color-2: #93908b;
    --on-surface-darken-color-3: #7a736e;
    --on-surface-darken-color-4: #696969;

    --surface-lighten-color: #191919;
    --on-surface-lighten-color-1: #e0d3c7;
    --on-surface-lighten-color-2: #93908b;
    --on-surface-lighten-color-3: #7a736e;
    --on-surface-lighten-color-4: #696969;

    --border-color-1: #474747;
    --border-color-2: #363636;
    --marker-color-1: #737373;
    --skeleton-color-1: #333333;
    --skeleton-color-2: hsla(0, 0%, 100%, .03);

    --primary-color: #5989ff;
    --primary-color-o1: rgba(100, 136, 248, 0.1);
    --on-primary-color: #fff;

    --secondary-color: #1b2c39;
    --secondary-color-alt-1: #0D3034;
    --on-secondary-color: #fff;
    --on-secondary-color-alt-1: #fff;

    --accent-color: #F3B563;
    --accent-color-o1: rgba(243, 181, 99, 0.1);
    --on-accent-color: #1f2c38;

    --error-color: #FF304C;
    --error-color-o1: rgba(255, 48, 76, 0.1);
    --on-error-color: #fff;

    --success-color: #40BE7A;
    --success-color-o1: rgba(64, 190, 122, 0.1);
    --on-success-color: #fff;

    --shadow-color-1: rgba(0, 0, 0, 0.5);
    --shadow-color-2: rgba(0, 0, 0, 1);
    --shadow-color-3: rgba(0, 0, 0, 1);

    --scrollbar-color: #fff;
    --scrollbar-track-color: rgba(255, 255, 255, 0.1);

    --tooltip-color: #444;
    --on-tooltip-color: #e0d3c7;

    --theme-1-color: #6488F8;
    --theme-1-color-o1: rgba(100, 136, 248, 0.1);
    --theme-2-color: #1FB665;
    --theme-2-color-o1: rgba(31, 182, 101, 0.1);
    --theme-3-color: #F4C23B;
    --theme-3-color-o1: rgba(244, 194, 59, 0.1);
    --theme-4-color: #FF855D;
    --theme-4-color-o1: rgba(255, 133, 93, 0.1);
    --theme-5-color: #FF304C;
    --theme-5-color-o1: rgba(255, 48, 76, 0.1);
    --theme-6-color: #FF179E;
    --theme-6-color-o1: rgba(255, 23, 158, 0.1);
    --theme-7-color: #A036CC;
    --theme-7-color-o1: rgba(160, 54, 204, 0.1);
    --theme-8-color: #212121;
    --theme-8-color-o1: rgba(33, 33, 33, 0.1);
    --theme-9-color: #3AAADC;
    --theme-9-color-o1: rgba(58, 170, 220, 0.1);

    --on-theme-color: #fff;
}

/* custom themes colors override */
.ik-theme--1:root,
.ik-theme--1 {
    --primary-color: var(--theme-1-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-1-color-o1);
}

.ik-theme--2:root,
.ik-theme--2 {
    --primary-color: var(--theme-2-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-2-color-o1);
}

.ik-theme--3:root,
.ik-theme--3 {
    --primary-color: var(--theme-3-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-3-color-o1);
}

.ik-theme--4:root,
.ik-theme--4 {
    --primary-color: var(--theme-4-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-4-color-o1);
}

.ik-theme--5:root,
.ik-theme--5 {
    --primary-color: var(--theme-5-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-5-color-o1);
}

.ik-theme--6:root,
.ik-theme--6 {
    --primary-color: var(--theme-6-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-6-color-o1);
}

.ik-theme--7:root,
.ik-theme--7 {
    --primary-color: var(--theme-7-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-7-color-o1);
}

.ik-theme--8:root,
.ik-theme--8 {
    --primary-color: var(--theme-8-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-8-color-o1);
}

.ik-theme--9:root,
.ik-theme--9 {
    --primary-color: var(--theme-9-color);
    --on-primary-color: var(--on-theme-color);
    --primary-color-o1: var(--theme-9-color-o1);
}

/* util classes */
.ik-background-color {
    background-color: var(--background-color);
}

.ik-on-background-color-1 {
    color: var(--on-background-color-1);
}

.ik-on-background-color-2 {
    color: var(--on-background-color-2);
}

.ik-on-background-color-3 {
    color: var(--on-background-color-3);
}

.ik-on-background-color-4 {
    color: var(--on-background-color-4);
}

.ik-on-background-color-5 {
    color: var(--on-background-color-5);
}

.ik-surface-color {
    background-color: var(--surface-color);
}

.ik-on-surface-color-1 {
    color: var(--on-surface-color-1);
}

.ik-on-surface-color-2 {
    color: var(--on-surface-color-2);
}

.ik-on-surface-color-3 {
    color: var(--on-surface-color-3);
}

.ik-on-surface-color-4 {
    color: var(--on-surface-color-4);
}

.ik-color--primary {
    color: var(--primary-color);
}

.ik-color--secondary {
    color: var(--secondary-color);
}

.ik-color--success {
    color: var(--success-color);
}

.ik-color--error {
    color: var(--error-color);
}

.ik-color--accent {
    color: var(--accent-color);
}

/* z-index definitions should be sorted by value and defined for both mobile and desktop devices
/* desktop z-index */
:root,
.ik-screen--desktop:root {
    --z-index-toast: 1149;
    --z-index-modal: 1049;
    --z-index-maximized-md-editor: 1025;
    --z-index-chat-window: 1000;
    --z-index-portal-access-app: 951;
    --z-index-portal-claim-app-topbar: 950;
    --z-index-portal-claim-app-sidebar: 949;
    --z-index-app-nav: 901;
    --z-index-app-bar: 900;
    --z-index-webpage-nav: 900;
    --z-index-webpage-bottom-menu: 900;
    --z-index-chat-trigger: 850;
    /* popover minimum z-index is 800 - but it is calculated dynamically based on activator element z-index value*/
    --z-index-portal-cookies-app: 500;
    --z-index-app-restricted-backdrop: 9;
}

/* mobile z-index */
.ik-screen--mobile:root {
    --z-index-toast: 1149;
    --z-index-modal: 1049;
    --z-index-maximized-md-editor: 1025;
    --z-index-chat-window: 1000;
    --z-index-portal-access-app: 951;
    --z-index-portal-claim-app-topbar: 950;
    --z-index-portal-claim-app-sidebar: 949;
    --z-index-app-nav: 901;
    --z-index-app-bar: 900;
    --z-index-webpage-nav: 900;
    --z-index-webpage-bottom-menu: 900;
    --z-index-chat-trigger: 850;
    /* popover minimum z-index is 800 - but it is calculated dynamically based on activator element z-index value*/
    --z-index-portal-cookies-app: 500;
    --z-index-app-restricted-backdrop: 9;
}

/* font weights */
:root {
    --text-normal: 400;
    --text-semibold: 600;
    --text-bold: 700;

    --text-3xs: 9px;
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 21px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --text-6xl: 60px;
    --text-7xl: 72px;

    /* Padding */
    --pa-0: 0px;
    --pa-1: 3px;
    --pa-2: 5px;
    --pa-3: 10px;
    --pa-4: 15px;
    --pa-5: 25px;
    --pa-6: 50px;

    --px-0: 0px;
    --px-1: 3px;
    --px-2: 5px;
    --px-3: 10px;
    --px-4: 15px;
    --px-5: 25px;
    --px-6: 50px;

    --py-0: 0px;
    --py-1: 3px;
    --py-2: 5px;
    --py-3: 10px;
    --py-4: 15px;
    --py-5: 25px;
    --py-6: 50px;

    --pt-0: 0px;
    --pt-1: 3px;
    --pt-2: 5px;
    --pt-3: 10px;
    --pt-4: 15px;
    --pt-5: 25px;
    --pt-6: 50px;

    --pb-0: 0px;
    --pb-1: 3px;
    --pb-2: 5px;
    --pb-3: 10px;
    --pb-4: 15px;
    --pb-5: 25px;
    --pb-6: 50px;

    --pl-0: 0px;
    --pl-1: 3px;
    --pl-2: 5px;
    --pl-3: 10px;
    --pl-4: 15px;
    --pl-5: 25px;
    --pl-6: 50px;

    --pr-0: 0px;
    --pr-1: 3px;
    --pr-2: 5px;
    --pr-3: 10px;
    --pr-4: 15px;
    --pr-5: 25px;
    --pr-6: 50px;

    /* Margin */
    --ma-0: 0px;
    --ma-1: 3px;
    --ma-2: 5px;
    --ma-3: 10px;
    --ma-4: 15px;
    --ma-5: 25px;
    --ma-6: 50px;

    --mt-0: 0px;
    --mt-1: 3px;
    --mt-2: 5px;
    --mt-3: 10px;
    --mt-4: 15px;
    --mt-5: 25px;
    --mt-6: 50px;

    --mb-0: 0px;
    --mb-1: 3px;
    --mb-2: 5px;
    --mb-3: 10px;
    --mb-4: 15px;
    --mb-5: 25px;
    --mb-6: 50px;

    --ml-0: 0px;
    --ml-1: 3px;
    --ml-2: 5px;
    --ml-3: 10px;
    --ml-4: 15px;
    --ml-5: 25px;
    --ml-6: 50px;

    --mr-0: 0px;
    --mr-1: 3px;
    --mr-2: 5px;
    --mr-3: 10px;
    --mr-4: 15px;
    --mr-5: 25px;
    --mr-6: 50px;

    --mx-0: 0px;
    --mx-1: 3px;
    --mx-2: 5px;
    --mx-3: 10px;
    --mx-4: 15px;
    --mx-5: 25px;
    --mx-6: 50px;

    --my-0: 0px;
    --my-1: 3px;
    --my-2: 5px;
    --my-3: 10px;
    --my-4: 15px;
    --my-5: 25px;
    --my-6: 50px;

    /* radius */
    --radius-0: 0px;
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 16px;
}