:root {
    /* === COLORS === */
    --white: #ffffff;
    --grey-dark: rgb(77, 77, 77);
    --grey-medium: #989898;
    --grey-light: #D1D1D1;
    --pastel-green: rgb(184, 211, 217);
    --pastel-blue: rgb(109, 182, 199);
    --pastel-green-opacity-20: rgba(184, 211, 217, 0.2);
    --pastel-orange: #DB985A;
    --pastel-yellow: rgba(242, 225, 209, 0.85);
    --white-off: #ece6e4;
    --black: #202124;

    /* Spacing Variables */
    --spacing-sm: clamp(16px, 2vw, 32px);
    --spacing-md: clamp(32px, 4vw, 64px);
    --spacing-lg: clamp(64px, 6vw, 128px);
    --spacing-xl: clamp(128px, 8vw, 256px);
    --spacing-xxl: clamp(256px, 12vw, 512px);

    /* Dynamic Scaling for Larger Screens */
    --width-sm: clamp(200px, 20vw, 400px);
    --width-md: clamp(400px, 40vw, 800px);
    --width-lg: clamp(600px, 60vw, 1200px);
    --width-xl: clamp(800px, 80vw, 1600px);
    --width-xxl: 100vw;

    /*Typography*/
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Tailwind', sans-serif;

    --font-size-title: 2.25rem;
    /* Section titles */
    --font-size-heading: 3.5rem;
    /* Main headings */
    --font-size-subheading: 1.4rem;
    /* Subheadings */
    --font-size-medium: 1.125rem;
    /* Standard body text */
    --font-size-small: 0.875rem;
    /* Small text */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /*Z-Index Values*/
    --z-index-header: 1000;
    /* Sticky header */
    --z-index-modal: 2000;
    /* Modals */
    --z-index-footer: 500;
    /* Footer */
}

/* === FONTS === */
/* Roboto - Various Weights and Styles */

/* Regular */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Italic */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Bold Italic */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Light */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Light Italic */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* Medium */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Medium Italic */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

/* Condensed */
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/Roboto-Condensed.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Bold Condensed */
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/Roboto-BoldCondensed.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Thin */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

/* Thin Italic */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

/* Tailwind */
@font-face {
    font-family: "Tailwind";
    src: url("../fonts/Tailwind Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Tailwind";
    src: url("../fonts/Tailwind Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Tailwind SC";
    src: url("../fonts/Tailwind SC Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Tailwind SC";
    src: url("../fonts/Tailwind SC Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* Opificio Neue */
@font-face {
    font-family: "Opificio Neue";
    src: url("../fonts/Opificio_neue-regular.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}





/* === PADDING UTILITIES === */

.p-sm {
    padding: var(--spacing-sm);
}

.p-md {
    padding: var(--spacing-md);
}

.p-lg {
    padding: var(--spacing-lg);
}

.p-xl {
    padding: var(--spacing-xl);
}

.p-xxl {
    padding: var(--spacing-xxl);
}

.pt-sm {
    padding-top: var(--spacing-sm);
}

.pt-md {
    padding-top: var(--spacing-md);
}

.pt-lg {
    padding-top: var(--spacing-lg);
}

.pt-xl {
    padding-top: var(--spacing-xl);
}

.pt-xxl {
    padding-top: var(--spacing-xxl);
}

.pb-sm {
    padding-bottom: var(--spacing-sm);
}

.pb-md {
    padding-bottom: var(--spacing-md);
}

.pb-lg {
    padding-bottom: var(--spacing-lg);
}

.pb-xl {
    padding-bottom: var(--spacing-xl);
}

.pb-xxl {
    padding-bottom: var(--spacing-xxl);
}

.pl-sm {
    padding-left: var(--spacing-sm);
}

.pl-md {
    padding-left: var(--spacing-md);
}

.pl-lg {
    padding-left: var(--spacing-lg);
}

.pl-xl {
    padding-left: var(--spacing-xl);
}

.pl-xxl {
    padding-left: var(--spacing-xxl);
}

.pr-sm {
    padding-right: var(--spacing-sm);
}

.pr-md {
    padding-right: var(--spacing-md);
}

.pr-lg {
    padding-right: var(--spacing-lg);
}

.pr-xl {
    padding-right: var(--spacing-xl);
}

.pr-xxl {
    padding-right: var(--spacing-xxl);
}

/* === MARGIN UTILITIES === */
.m-sm {
    margin: var(--spacing-sm);
}

.m-md {
    margin: var(--spacing-md);
}

.m-lg {
    margin: var(--spacing-lg);
}

.m-xl {
    margin: var(--spacing-xl);
}

.m-xxl {
    margin: var(--spacing-xxl);
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mt-xxl {
    margin-top: var(--spacing-xxl);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.mb-xxl {
    margin-bottom: var(--spacing-xxl);
}

.ml-sm {
    margin-left: var(--spacing-sm);
}

.ml-md {
    margin-left: var(--spacing-md);
}

.ml-lg {
    margin-left: var(--spacing-lg);
}

.ml-xl {
    margin-left: var(--spacing-xl);
}

.ml-xxl {
    margin-left: var(--spacing-xxl);
}

.mr-sm {
    margin-right: var(--spacing-sm);
}

.mr-md {
    margin-right: var(--spacing-md);
}

.mr-lg {
    margin-right: var(--spacing-lg);
}

.mr-xl {
    margin-right: var(--spacing-xl);
}

.mr-xxl {
    margin-right: var(--spacing-xxl);
}

/* === WIDTH UTILITIES === */
.w-sm {
    width: var(--width-sm);
}

.w-md {
    width: var(--width-md);
}

.w-lg {
    width: var(--width-lg);
}

.w-xl {
    width: var(--width-xl);
}

.w-xxl {
    width: var(--width-xxl);
}

.min-w-sm {
    min-width: var(--width-sm);
}

.min-w-md {
    min-width: var(--width-md);
}

.min-w-lg {
    min-width: var(--width-lg);
}

.min-w-xl {
    min-width: var(--width-xl);
}

.min-w-full {
    min-width: var(--width-xxl);
}

.max-w-xsm {
    max-width: clamp(100px, 10vw, 200px);
    margin: 0 auto;
}

.max-w-sm {
    max-width: var(--width-sm);
    margin: 0 auto;
}

.max-w-md {
    max-width: var(--width-md);
    margin: 0 auto;
}

.max-w-lg {
    max-width: var(--width-lg);
    margin: 0 auto;
}

.max-w-xl {
    max-width: var(--width-xl);
    margin: 0 auto;
}

.max-w-full {
    max-width: var(--width-xxl);
    margin: 0 auto;
}

.max-w-60 {
    max-width: 60%;
    margin: 0 auto;
}