:root {
    /* spacing */
    --ked-spacing-xxxsmall: 1px;
    --ked-spacing-xxsmall: 2px;
    --ked-spacing-xsmall: 4px;
    --ked-spacing-small: 8px;
    --ked-spacing-medium: 10px;
    --ked-spacing-large: 12px;
    --ked-spacing-xlarge: 16px;
    --ked-spacing-xxlarge: 20px;
    --ked-spacing-xxxlarge: 24px;

    /* radius */
    --ked-radius-square: 0px;
    --ked-radius-xxxsmall: 2px;
    --ked-radius-xxsmall: 4px;
    --ked-radius-xsmall: 6px;
    --ked-radius-small: 8px;
    --ked-radius-medium: 12px;
    --ked-radius-large: 16px;
    --ked-radius-xlarge: 24px;
    --ked-radius-xxlarge: 32px;
    --ked-radius-xxxlarge: 40px;
    --ked-radius-round: 1000px;

    /* frame */
    --ked-frame-xxxsmall: 20px;
    --ked-frame-xxsmall: 24px;
    --ked-frame-xsmall: 28px;
    --ked-frame-small: 32px;
    --ked-frame-medium: 36px;
    --ked-frame-large: 40px;
    --ked-frame-xlarge: 48px;
    --ked-frame-xxlarge: 56px;
    --ked-frame-xxxlarge: 64px;

    /* color */
    --ked-color-grayscale-0-light: #ffffff;
    --ked-color-grayscale-50-light: #f8f8f8;
    --ked-color-grayscale-100-light: #f6f6f6;
    --ked-color-grayscale-200-light: #ebebeb;
    --ked-color-grayscale-300-light: #e0e0e0;
    --ked-color-grayscale-400-light: #d4d4d4;
    --ked-color-grayscale-500-light: #c4c4c4;
    --ked-color-grayscale-600-light: #868686;
    --ked-color-grayscale-700-light: #626262;
    --ked-color-grayscale-800-light: #424242;
    --ked-color-grayscale-900-light: #333333;
    --ked-color-grayscale-1000-light: #2b2b2b;

    --ked-color-primaryscale-primary-500-light: #092C87;

    --ked-color-global-background-light: #F5F3F2;

    --color-primaryscale-primary-medium: #092C87;
}

/* stroke */
:root {
    --ked-stroke-style-solid: solid;
    --ked-stroke-style-dashed: dashed;

    /* stroke weight */
    --ked-stroke-none: 0;
    --ked-stroke-xsmall: 1px;
    --ked-stroke-small: 2px;
    --ked-stroke-medium: 3px;
    --ked-stroke-large: 4px;
}

/* color variables */
:root {
    /* primary colors - 50 ~ 900 */
    --ked-color-primaryscale-primary-brightest: #577EDC;
    --ked-color-primaryscale-primary-lightest: #436ED8;
    --ked-color-primaryscale-primary-lighter: #2450BC;
    --ked-color-primaryscale-primary-light: #1C3E91;
    --ked-color-primaryscale-primary-mediumlight: #193780;
    --ked-color-primaryscale-primary-medium: #142C67;
    --ked-color-primaryscale-primary-mediumdark: #112455;
    --ked-color-primaryscale-primary-dark: #0E1D44;
    --ked-color-primaryscale-primary-darker: #0A1533;
    --ked-color-primaryscale-primary-darkest: #061422;

    --ked-color-utils-shadow-none: rgba(0, 0, 0, 0);
    --ked-color-utils-shadow-light: rgba(0, 0, 0, 0.2);
    --ked-color-transparent: transparent;
    /* gray colors */
    --ked-color-grayscale-0: #ffffff;
    --ked-color-grayscale-50: #f8f8f8;
    --ked-color-grayscale-100: #f6f6f6;
    --ked-color-grayscale-200: #ebebeb;
    --ked-color-grayscale-300: #e0e0e0;
    --ked-color-grayscale-400: #d4d4d4;
    --ked-color-grayscale-500: #c4c4c4;
    --ked-color-grayscale-600: #868686;
    --ked-color-grayscale-700: #626262;
    --ked-color-grayscale-800: #424242;
    --ked-color-grayscale-900: #333333;
    --ked-color-grayscale-1000: #2b2b2b;
}

:root {
    --ked-color-colorscale-royalblue-medium: #1C4EFC;
    --ked-color-colorscale-orange-medium: #FF4500;
    --ked-color-focus: var(--ked-color-colorscale-royalblue-medium);

    --ked-color-page-background: #ede9e6;
    --ked-color-page-secondary-background: #e1ded9;

    --ked-color-title: #111111;
    --ked-color-exclusive: #bf3232;
    --ked-color-interview: #5E219B;
    --ked-color-hilight: #092C87;

    --desktop-container-wrap-max-width: 1280px;
    --desktop-container-wrap-min-width: 1180px;
}

body[data-focus-display="false"] {
    --ked-color-focus: var(--ked-color-transparent);
}

/* dark mode Theme */

body[data-theme="dark"] {

}