@charset "utf-8";

/* ========================================
base
======================================== */
html {
   font-size: 62.5%;
}

:root {
    /* =========================
       Font Size Tokens
       기준: 375px ~ 768px
       ========================= */
    --fs-16: clamp(12px, calc(3.747px + 0.814vw), 16px);
    --fs-18: clamp(12.8px, calc(4.965px + 0.916vw), 18px);
    --fs-20: clamp(13px, calc(5.183px + 1.018vw), 20px);
    --fs-21: clamp(14px, calc(5.792px + 1.069vw), 21px);
    --fs-22: clamp(15.6px, calc(6.402px + 1.12vw), 22px);
    --fs-23: clamp(16.4px, calc(7.011px + 1.17vw), 23px);
    --fs-24: clamp(17.8px, calc(7.62px + 1.221vw), 24px);
    --fs-25: clamp(18px, calc(8.229px + 1.272vw), 25px);
    --fs-29: clamp(19px, calc(10.666px + 1.476vw), 29px);
    --fs-30: clamp(20px, calc(11.275px + 1.527vw), 30px);
    --fs-35: clamp(21px, calc(14.321px + 1.781vw), 35px);
    --fs-36: clamp(22px, calc(14.93px + 1.832vw), 36px);
    --fs-40: clamp(24px, calc(17.366px + 2.036vw), 40px);


    /* =========================
       Spacing Tokens
       기준: 375px ~ 768px
       ========================= */
    --space-10: clamp(10px, 10px, 10px);
    --space-12: clamp(10px, calc(3px + 1vw), 12px);
    --space-14: clamp(10px, calc(4px + 1vw), 14px);
    --space-15: clamp(10.5px, calc(5px + 1vw), 15px);
    --space-16: clamp(11.2px, calc(5px + 1vw), 16px);
    --space-20: clamp(14px, calc(6px + 1vw), 20px);
    --space-22: clamp(15.4px, calc(7px + 1vw), 22px);
    --space-24: clamp(16.8px, calc(8px + 1vw), 24px);
    --space-27: clamp(18.9px, calc(8px + 2vw), 27px);
    --space-30: clamp(21px, calc(9px + 2vw), 30px);
    --space-32: clamp(22.4px, calc(10px + 2vw), 32px);
    --space-33: clamp(23.1px, calc(10px + 2vw), 33px);
    --space-36: clamp(25.2px, calc(11px + 2vw), 36px);
    --space-40: clamp(28px, calc(13px + 3vw), 40px);
    --space-46: clamp(32.2px, calc(16px + 3vw), 46px);
    --space-52: clamp(30px, calc(18px + 3vw), 52px);
    --space-64: clamp(44.8px, calc(22px + 4vw), 64px);
    --space-73: clamp(51.1px, calc(24px + 5vw), 73px);
    --space-87: clamp(54.9px, calc(26px + 6vw), 87px);
    --space-94: clamp(58.8px, calc(28px + 7vw), 94px);
    --space-125: clamp(70px, calc(32px + 9vw), 125px);


    /* =========================
       Color Tokens
       ========================= */
    --color-text: #191F28;
    --color-text-gray: #8F99A5;
    --color-text-mid-gray: #4E5968;

    --color-bg-gray: #F9F9F9;
    --color-border-gray: #E5E8EB;
    --color-input-disabled: #E5E8EB;

    --color-footer-text: #B0B8C1;
    --color-badge-bg-gray: #EDF0F3;

    --color-blue: #3182F6;
    --color-red: #F04D5B;
    --color-sky: #EBF3FE;

    --color-button-disabled-bg: #C6D5EA;
}