@import './default-palette.css';

:root {
    /* Background */
    --background: var(--kes-global-color-gray-10);
    --background-subtle: var(--kes-global-color-gray-20);
    --background-selected: color-mix(in srgb, var(--kes-global-color-gray-50) 20%, transparent);
    --background-inverse: var(--kes-global-color-gray-80);
    --background-inverse-strong: var(--kes-global-color-black);
    --background-inverse-hover: var(--kes-global-color-gray-100);
    --background-brand: var(--kes-global-color-brand-100);
    --background-hover: color-mix(in srgb, var(--kes-global-color-gray-50) 16%, transparent);
    --background-active: var(--kes-global-color-gray-20);

    /* Layer */
    --layer-01: var(--kes-global-color-white);
    --layer-hover-01: var(--kes-global-color-gray-10);
    --layer-error: var(--kes-global-color-red-10);
    --layer-error-hover: var(--kes-global-color-red-20);

    /* Text */
    --text-primary: var(--kes-global-color-gray-100);
    --text-secondary: var(--kes-global-color-gray-60);
    --text-placeholder: var(--kes-global-color-gray-40);
    --text-on-color: var(--kes-global-color-white);
    --text-on-color-disabled: var(--kes-global-color-gray-50);
    --text-helper: var(--kes-global-color-gray-60);
    --text-error: var(--kes-global-color-red-60);
    --text-inverse: var(--kes-global-color-white);
    --text-disabled: color-mix(in srgb, var(--kes-global-color-gray-100) 25%, transparent);

    /* Link */
    --link-primary: var(--kes-global-color-brand-80);
    --link-primary-hover: var(--kes-global-color-brand-90);
    --link-error-hover: var(--kes-global-color-red-70);

    /* Border */
    --border-primary: var(--kes-global-color-gray-20);
    --border-secondary: var(--kes-global-color-gray-20);
    --border-subtle: var(--kes-global-color-gray-20);
    --border-strong: var(--kes-global-color-gray-40);
    --border-strong-01: var(--kes-global-color-gray-50);
    --border-interactive: var(--kes-global-color-brand-80);
    --border-inverse: var(--kes-global-color-gray-70);
    --border-disabled: var(--kes-global-color-gray-30);

    /* Icon */
    --icon-primary: var(--kes-global-color-gray-100);
    --icon-secondary: var(--kes-global-color-gray-70);
    --icon-on-color: var(--kes-global-color-white);
    --icon-on-color-disabled: var(--kes-global-color-gray-50);
    --icon-inverse: var(--kes-global-color-gray-30);
    --icon-inverse-disabled: color-mix(in srgb, var(--kes-global-color-white) 25%, transparent);
    --icon-interactive: var(--kes-global-color-brand-80);
    --icon-disabled: color-mix(in srgb, var(--kes-global-color-gray-100) 25%, transparent);

    /* Focus */
    --focus: var(--kes-global-color-blue-60);
    --focus-inset: var(--kes-global-color-white);
    --focus-inverse: var(--kes-global-color-white);

    /* Support */
    --support-information: var(--kes-global-color-blue-60);
    --support-success: var(--kes-global-color-green-50);
    --support-warning: var(--kes-global-color-orange-40);
    --support-error: var(--kes-global-color-red-60);

    /* Tag */
    --tag-high-contrast-background: var(--kes-global-color-gray-80);
    --tag-outline-background: var(--layer-01);
    --tag-outline-border: var(--border-primary);
    --tag-outline-border-disabled: var(--border-disabled);
    --tag-outline-background-disabled: var(--layer-01);
    --tag-selectable-background: var(--kes-global-color-gray-10);
    --tag-selectable-background-hover: var(--kes-global-color-gray-20);
    --tag-selectable-background-selected: var(--kes-global-color-gray-80);
    --tag-selectable-border: var(--kes-global-color-gray-70);
    --tag-red-background: var(--kes-global-color-red-20);
    --tag-red-background-hover: var(--kes-global-color-red-30);
    --tag-red-border: var(--kes-global-color-red-40);
    --tag-red-text: var(--kes-global-color-red-80);
    --tag-orange-background: var(--kes-global-color-orange-20);
    --tag-orange-background-hover: var(--kes-global-color-orange-30);
    --tag-orange-border: var(--kes-global-color-orange-40);
    --tag-orange-text: var(--kes-global-color-orange-80);
    --tag-orange-icon: var(--kes-global-color-orange-80);
    --tag-green-background: var(--kes-global-color-green-20);
    --tag-green-background-hover: var(--kes-global-color-green-30);
    --tag-green-border: var(--kes-global-color-green-40);
    --tag-green-text: var(--kes-global-color-green-80);
    --tag-green-icon: var(--kes-global-color-green-80);
    --tag-blue-background: var(--kes-global-color-blue-20);
    --tag-blue-background-hover: var(--kes-global-color-blue-30);
    --tag-blue-border: var(--kes-global-color-blue-40);
    --tag-blue-text: var(--kes-global-color-blue-80);
    --tag-blue-icon: var(--kes-global-color-blue-80);
    --tag-magenta-background: var(--kes-global-color-magenta-20);
    --tag-magenta-background-hover: var(--kes-global-color-magenta-30);
    --tag-magenta-border: var(--kes-global-color-magenta-40);
    --tag-magenta-text: var(--kes-global-color-magenta-80);
    --tag-magenta-icon: var(--kes-global-color-magenta-80);
    --tag-purple-background: var(--kes-global-color-purple-20);
    --tag-purple-background-hover: var(--kes-global-color-purple-30);
    --tag-purple-border: var(--kes-global-color-purple-40);
    --tag-purple-text: var(--kes-global-color-purple-80);
    --tag-purple-icon: var(--kes-global-color-purple-80);
    --tag-cyan-background: var(--kes-global-color-cyan-20);
    --tag-cyan-background-hover: var(--kes-global-color-cyan-30);
    --tag-cyan-border: var(--kes-global-color-cyan-40);
    --tag-cyan-text: var(--kes-global-color-cyan-80);
    --tag-cyan-icon: var(--kes-global-color-cyan-80);
    --tag-teal-background: var(--kes-global-color-teal-20);
    --tag-teal-background-hover: var(--kes-global-color-teal-30);
    --tag-teal-border: var(--kes-global-color-teal-40);
    --tag-teal-text: var(--kes-global-color-teal-80);
    --tag-teal-icon: var(--kes-global-color-teal-80);
    --tag-background-disabled: var(--kes-global-color-gray-30);
    --tag-border-disabled: var(--kes-global-color-gray-50);

    /* Avatar */
    --avatar-blue-background: var(--kes-global-color-blue-30);
    --avatar-gray-background: var(--kes-global-color-gray-10);
    --avatar-green-background: var(--kes-global-color-brand-90);
    --avatar-white-background: var(--kes-global-color-white);

    /* Miscellaneous */
    --interactive: var(--kes-global-color-brand-80);
    --toggle-off: var(--kes-global-color-gray-50);
    --skeleton-highlight: var(--kes-global-color-gray-10);
    --skeleton-background: var(--kes-global-color-gray-20);
    --overlay: color-mix(in srgb, var(--kes-global-color-gray-100) 50%, transparent);

    /* Charts */
    --charts-border-axes: var(--kes-global-color-gray-40);
    --charts-border-grid: var(--kes-global-color-gray-20);
    --charts-dummy-placeholder: var(--kes-global-color-gray-10);

    --charts-alert-error: var(--kes-global-color-red-60);
    --charts-alert-warning: var(--kes-global-color-orange-40);
    --charts-alert-success: var(--kes-global-color-green-50);
    --charts-alert-in-progress: var(--kes-global-color-blue-60);

    --charts-alert-error-hover: var(--kes-global-color-red-70);
    --charts-alert-warning-hover: var(--kes-global-color-orange-50);
    --charts-alert-success-hover: var(--kes-global-color-green-60);
    --charts-alert-in-progress-hover: var(--kes-global-color-blue-70);

    --charts-2-1-1: var(--kes-global-color-purple-70);
    --charts-2-1-2: var(--kes-global-color-teal-50);
    --charts-2-5-1: var(--kes-global-color-teal-50);
    --charts-2-5-2: var(--kes-global-color-blue-80);
    --charts-5-1-1: var(--kes-global-color-purple-70);
    --charts-5-1-2: var(--kes-global-color-cyan-50);
    --charts-5-1-3: var(--kes-global-color-teal-70);
    --charts-5-1-4: var(--kes-global-color-magenta-70);
    --charts-5-1-5: var(--kes-global-color-red-90);

    /* Gradient */
    --gradient-linear-white: var(--layer-01);

    /* Notification */
    --notification-information-background: var(--kes-global-color-blue-10);
    --notification-success-background: var(--kes-global-color-green-10);
    --notification-warning-background: var(--kes-global-color-orange-10);
    --notification-warning-background-hover: var(--kes-global-color-orange-20);
    --notification-error-background: var(--kes-global-color-red-10);

    /* Button */
    --button-primary: var(--kes-global-color-brand-80);
    --button-primary-hover: var(--kes-global-color-brand-90);
    --button-primary-active: var(--kes-global-color-brand-100);
    --button-secondary: var(--kes-global-color-white);
    --button-secondary-hover: var(--kes-global-color-gray-10);
    --button-secondary-border-hover: var(--kes-global-color-black);
    --button-secondary-active: var(--kes-global-color-gray-20);
    --button-tertiary: var(--kes-global-color-green-80);
    --button-tertiary-hover: var(--kes-global-color-brand-90);
    --button-tertiary-active: var(--kes-global-color-brand-100);
    --button-danger-primary: var(--kes-global-color-red-60);
    --button-danger-hover: var(--kes-global-color-red-70);
    --button-danger-active: var(--kes-global-color-red-80);
    --button-disabled: var(--kes-global-color-gray-30);

    /* Scrollbar */
    --scrollbar: var(--kes-global-color-gray-30);
    --scrollbar-hover: var(--kes-global-color-gray-40);
    --scrollbar-background: transparent;
    --scrollbar-background-hover: var(--kes-global-color-gray-10);

    /* Shadows */
    --box-shadow-xl: 0 1.6rem 4rem 0 rgba(0, 0, 0, 25%);
    --box-shadow-lg: 0 1.2rem 3.2rem 0 rgba(0, 0, 0, 25%);
    --box-shadow-md: 0 .8rem 2.4rem 0 rgba(0, 0, 0, 25%);
    --box-shadow-sm: 0 .4rem 1.6rem 0 rgba(0, 0, 0, 16%);
    --box-shadow-xxs: 0 .2rem .6rem 0 rgba(0, 0, 0, 25%);

    /* Typography */
    --default-font-family: var(--PartnerFontFamily, 'Plus Jakarta Sans'), serif;
    --body-compact-01: 400 1.4rem / 1.8rem var(--default-font-family);
    --body-compact-02: 400 1.6rem / 2.2rem var(--default-font-family);
    --body-compact-medium-01: 500 1.4rem / 1.8rem var(--default-font-family);
    --body-compact-medium-02: 500 1.6rem / 2.2rem var(--default-font-family);
    --body-01: 400 1.4rem / 2rem var(--default-font-family);
    --body-02: 400 1.6rem / 2.4rem var(--default-font-family);
    --label-01: 400 1.2rem / 1.6rem var(--default-font-family);
    --label-02: 400 1.4rem / 1.8rem var(--default-font-family);
    --helper-text-01: 400 1.2rem / 1.6rem var(--default-font-family);
    --helper-text-02: 400 1.4rem / 1.8rem var(--default-font-family);
    --legal-01: 400 1.2rem / 1.6rem var(--default-font-family);
    --legal-02: 400 1.4rem / 1.8rem var(--default-font-family);
    --heading-compact-01: 600 1.4rem / 1.8rem var(--default-font-family);
    --heading-compact-02: 600 1.6rem / 2.2rem var(--default-font-family);
    --heading-01: 700 1.4rem / 2rem var(--default-font-family);
    --heading-02: 600 1.6rem / 2.4rem var(--default-font-family);
    --heading-03: 400 2rem / 2.8rem var(--default-font-family);
    --heading-04: 400 2.4rem / 3.2rem var(--default-font-family);
    --heading-05: 400 2.8rem / 4rem var(--default-font-family);
}