/* Root Color Definitions */
:root {
    --color-pink-bright: #FF0074;
    --color-pink-dark: #7A0043;
    --color-pink-light: #FFEEF7;
    --color-orange-bright: #FF3600;
    --color-orange-dark: #931800;
    --color-orange-light: #FFF1EE;
    --color-turquoise-bright: #00FFD4;
    --color-turquoise-dark: #00725C;
    --color-turquoise-light: #EBFFFB;
    --color-grey-dark: #4D4D4D;
    --color-grey-light: #E6E6E6;
    --color-footer-dark: #2D2D2D;

    /* Typography */
    --font-primary: "Helvetica Neue", Helvetica, sans-serif;
    --font-accent: "M PLUS Rounded 1c", sans-serif;

    /* Layout Grid System */
    --layout-left-column-width: 250px;
    --layout-left-column-percentage: 20vw;
    --layout-content-column-percentage: 60vw;
    --layout-gap: 2rem;
    --layout-padding-mobile: 1.5rem;
    --layout-padding-desktop: 2rem;

    /* Mobile Breakpoints */
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
    --desktop-breakpoint: 1200px;
}

/* Primary Font Utility Classes */
.primary-font {
    font-family: var(--font-primary);
}

/* Accent Font Utility Classes */
.accent-font {
    font-family: var(--font-accent);
}

/* M Plus Rounded 1c Weight Variants */
.m-plus-rounded-1c-thin {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.m-plus-rounded-1c-light {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.m-plus-rounded-1c-regular {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.m-plus-rounded-1c-medium {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.m-plus-rounded-1c-bold {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.m-plus-rounded-1c-extrabold {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.m-plus-rounded-1c-black {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 900;
    font-style: normal;
}

/* Layout Grid System Classes */
.layout-container {
    display: grid;
    grid-template-columns: var(--layout-left-column-width) 1fr;
    gap: var(--layout-gap);
    max-width: 100vw;
    padding: 0 var(--layout-padding-desktop);
}

.layout-left-column {
    width: var(--layout-left-column-width);
    position: relative;
}

.layout-content-column {
    max-width: calc(var(--layout-content-column-percentage) + var(--layout-gap));
    position: relative;
}

/* Mobile Layout Adjustments */
@media (max-width: 768px) {
    .layout-container {
        grid-template-columns: 1fr;
        padding: 0 var(--layout-padding-mobile);
    }
    
    .layout-left-column {
        width: 100%;
        margin-bottom: var(--layout-gap);
    }
    
    .layout-content-column {
        max-width: 100%;
    }
}