/* Typography System */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@200;300;400;500;600;700&display=swap');

:root {
    /* Font Family */
    --font-family: 'Lexend', sans-serif;
    /* Font Weights */
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
}
/* Base Typography */
body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: #000;
    margin: 0;
}
/* Display Styles */
.display-01 {
    font-size: 80px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 88px;
    letter-spacing: -2px;
}

.display-02 {
    font-size: 72px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 80px;
    letter-spacing: -1.8px;
}
/* Heading Styles */
.heading-01 {
    font-size: 56px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 60px;
    letter-spacing: -1.5px;
}

.heading-02 {
    font-size: 48px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 56px;
    letter-spacing: -1.5px;
}

.heading-03 {
    font-size: 40px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 48px;
    letter-spacing: -1.5px;
}

.heading-04 {
    font-size: 36px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 44px;
    letter-spacing: -1.5px;
}

.heading-05 {
    font-size: 32px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 40px;
    letter-spacing: -1.2px;
}

.heading-06 {
    font-size: 24px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 32px;
    letter-spacing: -1.2px;
}
/* Subheading Styles */
.subheading-01 {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    letter-spacing: -1.2px;
}

.subheading-02 {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 28px;
    letter-spacing: -1.5px;
}

.subheading-03 {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 24px;
    letter-spacing: -1.2px;
}

.subheading-04 {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    letter-spacing: -1px;
}
/* Button Styles */
.txt-btn-regular {
    font-size: 17px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 56px;
    letter-spacing: 0px;
}

.txt-btn-sm {
    font-size: 14px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 44px;
    letter-spacing: 0px;
}
/* Caption Styles */
.caption-01 {
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    line-height: 16px;
    letter-spacing: 0px;
}

.caption-02 {
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    line-height: 14px;
    letter-spacing: 0px;
}

.caption-03 {
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: 12px;
    letter-spacing: 0px;
}
/* Body Styles */
.body-xxl-300 {
    font-weight: var(--font-weight-light);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
}

.body-xxl-400 {
    font-weight: var(--font-weight-regular);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
}

.body-xxl-500 {
    font-weight: var(--font-weight-medium);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
}

.body-xlarge-300 {
    font-weight: var(--font-weight-light);
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
}

.body-xlarge-400 {
    font-weight: var(--font-weight-regular);
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
}

.body-xlarge-500 {
    font-weight: var(--font-weight-medium);
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
}

.body-large-300 {
    font-weight: var(--font-weight-light);
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
}

.body-large-400 {
    font-weight: var(--font-weight-regular);
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
}

.body-regular-300 {
    font-weight: var(--font-weight-light);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
}

.body-regular-400 {
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
}

.body-regular-500 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.body-small-300 {
    font-weight: var(--font-weight-light);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
}

.body-small-400 {
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
}

.body-small-500 {
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
}

.body-tiny-300 {
    font-weight: var(--font-weight-light);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
}

.body-tiny-400 {
    font-weight: var(--font-weight-regular);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
}
.body-tiny-500 {
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
}

.body-medium-300 {
    font-size: 16px;
    font-weight: var(--font-weight-light);
    line-height: 24px;
    letter-spacing: 0;
}
.body-medium-500 {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 24px;
    letter-spacing: 0;
}