:root {
    --kab-scale: 1;
    --kab-spacing-multiplier: calc(0.25rem * var(--kab-scale));
    /* -------------------------------------------------------------------------- */
    /*                                   Colors                                   */
    /* -------------------------------------------------------------------------- */
    --kab-color-white: #FFFFFF;
    --kab-color-blue-10: #EDF5FA;
    --kab-color-blue-20: #ACDCFF;
    --kab-color-blue-30: #82CAFD;
    --kab-color-blue-40: #58B4F7;
    --kab-color-blue-50: #309BE7;
    --kab-color-blue-55: #0494FC;
    --kab-color-blue-60: #137ECA;
    --kab-color-blue-70: #0562A4;
    --kab-color-blue-80: #01497C;
    --kab-color-blue-90: #003153;
    --kab-color-blue-100: #002743;
    --kab-color-green-10: #D5FFEA;
    --kab-color-green-20: #ABFFD5;
    --kab-color-green-30: #81FEBF;
    --kab-color-green-40: #56F9A8;
    --kab-color-green-50: #2EEB8C;
    --kab-color-green-60: #10CE6F;
    --kab-color-green-70: #04A655;
    --kab-color-green-80: #017D3F;
    --kab-color-green-90: #00572C;
    --kab-color-green-100: #004C26;
    --kab-color-yellow-10: #FFEDD5;
    --kab-color-yellow-20: #FFDBAB;
    --kab-color-yellow-30: #FEC881;
    --kab-color-yellow-40: #F9B256;
    --kab-color-yellow-50: #EB992E;
    --kab-color-yellow-60: #CE7C10;
    --kab-color-yellow-70: #A66004;
    --kab-color-yellow-80: #7D4701;
    --kab-color-yellow-90: #573200;
    --kab-color-yellow-100: #4C2B00;
    --kab-color-red-10: #FFD5DD;
    --kab-color-red-20: #FFABBB;
    --kab-color-red-30: #FE8198;
    --kab-color-red-40: #F95674;
    --kab-color-red-50: #EB2E50;
    --kab-color-red-60: #CE1033;
    --kab-color-red-70: #A60422;
    --kab-color-red-80: #7D0118;
    --kab-color-red-90: #570010;
    --kab-color-red-100: #4C000E;
    --kab-color-neutral-5: #FCFCFC;
    --kab-color-neutral-10: #F7F9FC;
    --kab-color-neutral-20: #E6EAED;
    --kab-color-neutral-30: #CED3D7;
    --kab-color-neutral-40: #B1B5BA;
    --kab-color-neutral-50: #8E9296;
    --kab-color-neutral-60: #676A6D;
    --kab-color-neutral-70: #454749;
    --kab-color-neutral-80: #292B2C;
    --kab-color-neutral-90: #1D1E1E;
    --kab-color-neutral-100: #131414;
    --kab-backgroud-color-avatar: #2196F3;
    /* -------------------------------------------------------------------------- */
    /*                                 Typography                                 */
    /* -------------------------------------------------------------------------- */
    --kab-typography-font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* --------------------------------- Display -------------------------------- */
    --kab-typography-font-weight-display: 700;
    --kab-typography-font-size-display-1: calc(4rem * var(--kab-scale));
    --kab-typography-line-height-display-1: 1.4;
    --kab-typography-font-size-display-2: calc(2.5rem * var(--kab-scale));
    --kab-typography-line-height-display-2: 1.4;
    /* --------------------------------- Heading -------------------------------- */
    --kab-typography-font-weight-heading: 600;
    --kab-typography-font-size-h1: calc(2rem * var(--kab-scale));
    --kab-typography-line-height-h1: 1.35;
    --kab-typography-font-size-h2: calc(1.5rem * var(--kab-scale));
    --kab-typography-line-height-h2: 1.35;
    --kab-typography-font-size-h3: calc(1.125rem * var(--kab-scale));
    --kab-typography-line-height-h3: 1.35;
    --kab-typography-font-size-h4: calc(1rem * var(--kab-scale));
    --kab-typography-line-height-h4: 1.35;
    --kab-typography-font-size-h5: calc(0.875rem * var(--kab-scale));
    --kab-typography-line-height-h5: 1.35;
    --kab-typography-font-size-h6: calc(0.75rem * var(--kab-scale));
    --kab-typography-line-height-h6: 1.35;
    /* -------------------------------- Paragraph ------------------------------- */
    --kab-typography-font-weight-p: 400;
    --kab-typography-font-size-p-lg: calc(1.125rem * var(--kab-scale));
    --kab-typography-line-height-p-lg: 1;
    --kab-typography-font-size-p-md: calc(1rem * var(--kab-scale));
    --kab-typography-line-height-p-md: 1;
    --kab-typography-font-size-p-sm: calc(0.875rem * var(--kab-scale));
    --kab-typography-line-height-p-sm: 1;
    --kab-typography-font-size-p-xs: calc(0.75rem * var(--kab-scale));
    --kab-typography-line-height-p-xs: 1;
    /* ---------------------------------- Label --------------------------------- */
    --kab-typography-font-weight-label: 500;
    --kab-typography-font-size-label-lg: calc(1.125rem * var(--kab-scale));
    --kab-typography-line-height-label-lg: 1;
    --kab-typography-font-size-label-md: calc(1rem * var(--kab-scale));
    --kab-typography-line-height-label-md: 1;
    --kab-typography-font-size-label-sm: calc(0.875rem * var(--kab-scale));
    --kab-typography-line-height-label-sm: 1;
    --kab-typography-font-size-label-xs: calc(0.75rem * var(--kab-scale));
    --kab-typography-line-height-label-xs: 1;
    /* -------------------------------------------------------------------------- */
    /*                                   Shadow                                   */
    /* -------------------------------------------------------------------------- */

    --kab-shadow-low: 0 0 calc(0.1875rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.04), 0 0 calc(0.25rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.03), 0 0 calc(0.25rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.01), 0 0 calc(0.3125rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0);
    --kab-shadow-medium: 0 calc(0.0625rem * var(--kab-scale)) calc(0.125rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.05), 0 calc(0.25rem * var(--kab-scale)) calc(0.25rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.04), 0 calc(0.5625rem * var(--kab-scale)) calc(0.375rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.03), 0 calc(1.0625rem * var(--kab-scale)) calc(0.4375rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.01), 0 calc(1.625rem * var(--kab-scale)) calc(0.4375rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0);
    --kab-shadow-high: 0 calc(0.125rem * var(--kab-scale)) calc(0.3125rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.05), 0 calc(0.5625rem * var(--kab-scale)) calc(0.5625rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.04), 0 calc(1.25rem * var(--kab-scale)) calc(0.75rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.03), 0 calc(2.25rem * var(--kab-scale)) calc(0.875rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0.01), 0 calc(3.5rem * var(--kab-scale)) calc(1rem * var(--kab-scale)) 0 rgba(0, 0, 0, 0);
    /* -------------------------------------------------------------------------- */
    /*                                Border Radius                               */
    /* -------------------------------------------------------------------------- */

    --kab-border-radius-sm: calc(0.25rem * var(--kab-scale));
    --kab-border-radius-md: calc(0.5rem * var(--kab-scale));
    --kab-border-radius-lg: calc(1rem * var(--kab-scale));
    --kab-border-radius-xl: calc(2rem * var(--kab-scale));
    --kab-border-radius-pill: 999px;
    /* -------------------------------------------------------------------------- */
    /*                                Border Width                                */
    /* -------------------------------------------------------------------------- */

    --kab-border-width-1: calc(0.0625rem * var(--kab-scale));
    --kab-border-width-2: calc(0.125rem * var(--kab-scale));
    /* -------------------------------------------------------------------------- */
    /*                                Container                                   */
    /* -------------------------------------------------------------------------- */

    --kab-container-1: 440px;
    --kab-container-2: 960px;
    --kab-container-3: 1440px;
    --kab-container-4: 1920px;
}