/* ===========================================================
  TOKENS
  Design System
=========================================================== */

:root {

/* =======================================================
    COLOR
======================================================= */

--color-accent: 221 85% 61%;
--color-accent-foreground: 30 33% 98%;

--color-primary: 220 17% 12%;
--color-primary-foreground: 30 33% 98%;

--color-secondary: 30 20% 95%;
--color-secondary-foreground: 220 18% 14%;

--color-muted: 36 25% 94%;
--color-muted-foreground: 220 10% 42%;

--color-border: 40 17% 91%;
--color-input: 38 31% 91%;

--color-black: 0 0% 13%;
--color-gray: 0 0% 47%;
--color-white: 0 0% 100%;


/* =======================================================
    TYPOGRAPHY
======================================================= */

/* Font Family */
--font-family: "Pretendard", sans-serif;

/* Font Size */
--text-12: clamp(1.1rem, 1vw, 1.2rem);
--text-14: clamp(1.2rem, 1.2vw, 1.4rem);
--text-15: clamp(1.3rem, 1.3vw, 1.5rem);
--text-16: clamp(1.4rem, 1.4vw, 1.6rem);
--text-18: clamp(1.5rem, 1.6vw, 1.8rem);
--text-20: clamp(1.6rem, 1.8vw, 2rem);
--text-24: clamp(1.9rem, 2.2vw, 2.4rem);
--text-30: clamp(2.3rem, 2.8vw, 3rem);
--text-32: clamp(2.4rem, 3vw, 3.2rem);
--text-36: clamp(2.8rem, 3.5vw, 3.6rem);
--text-42: clamp(3.2rem, 4vw, 4.2rem);
--text-48: clamp(3.6rem, 4.8vw, 4.8rem);
--text-56: clamp(4.2rem, 5.5vw, 5.6rem);
--text-60: clamp(4.4rem, 5.8vw, 6rem);
--text-64: clamp(4.8rem, 6.5vw, 6.4rem);

/* Font Weight */
--fw-300: 300;
--fw-400: 400;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
--fw-900: 900;

/* Line Height */
--lh-tight: 1.2;
--lh-heading: 1.4;
--lh-body: 1.6;
--lh-loose: 1.8;
--lh-relaxed: 2;


/* ===========================================================
SPACING
=========================================================== */

/* Small */
--space-4: clamp(0.2rem, 0.3vw, 0.4rem);
--space-8: clamp(0.4rem, 0.6vw, 0.8rem);
--space-12: clamp(0.8rem, 1vw, 1.2rem);
--space-16: clamp(1.2rem, 1.2vw, 1.6rem);
--space-20: clamp(1.4rem, 1.5vw, 2rem);
--space-24: clamp(1.8rem, 2vw, 2.4rem);
--space-32: clamp(2.4rem, 2.8vw, 3.2rem);

/* Medium */
--space-40: clamp(3rem, 3.5vw, 4rem);
--space-48: clamp(3.6rem, 4vw, 4.8rem);
--space-64: clamp(4.8rem, 5vw, 6.4rem);
--space-80: clamp(6rem, 6vw, 8rem);
--space-96: clamp(7.2rem, 7vw, 9.6rem);

/* Large */
--space-120: clamp(8rem, 9vw, 12rem);
--space-140: clamp(9rem, 10.5vw, 14rem);
--space-160: clamp(10rem, 12vw, 16rem);
--space-200: clamp(12rem, 16vw, 20rem);


/* =======================================================
    RADIUS
======================================================= */

--radius-sm: .4rem;
--radius-md: .8rem;
--radius-lg: 1.6rem;
--radius-xl: 2.4rem;
--radius-full: 9999px;


/* =======================================================
    SHADOW
======================================================= */

--shadow-sm: 0 2px 10px rgba(0,0,0,.08);
--shadow-md: 0 8px 24px rgba(0,0,0,.12);
--shadow-lg: 0 20px 40px rgba(0,0,0,.16);


/* =======================================================
    MOTION
======================================================= */

--duration-fast: .2s;
--duration: .3s;
--duration-slow: .5s;

--ease: ease;

/* =======================================================
    LAYOUT
======================================================= */

--container: 1540px;
--header-height: 9rem;

--section-padding: var(--space-160);

}


/* ====================================================================================================================== */