/* =========================================================
   BEAUTY BY TMY
   Global Design System
   ========================================================= */

:root {

    /* BRAND COLORS */

    --beauty-black: #080808;

    --beauty-black-soft: #111111;

    --beauty-charcoal: #1a1a1a;

    --beauty-white: #ffffff;

    --beauty-cream: #faf7f4;

    --beauty-cream-dark: #f2ece8;

    --beauty-pink: #d9668b;

    --beauty-pink-hover: #c95078;

    --beauty-soft-pink: #f5dde5;

    --beauty-text: #151515;

    --beauty-muted: #726a68;

    --beauty-border: #e8dfdc;


    /* LAYOUT */

    --beauty-max: 1280px;

    --beauty-page-padding: 24px;

    --beauty-section-space: 88px;


    /* RADIUS */

    --beauty-radius-sm: 10px;

    --beauty-radius-md: 18px;

    --beauty-radius-lg: 28px;

}


/* =========================================================
   PAGE
   ========================================================= */

body {
    background:
        var(--beauty-white);

    color:
        var(--beauty-text);
}


/* =========================================================
   GLOBAL WIDTH
   ========================================================= */

.beauty-container {

    width:
        min(
            calc(100% - 48px),
            var(--beauty-max)
        );

    margin-inline:
        auto;

}


/* =========================================================
   SECTIONS
   ========================================================= */

.beauty-section {

    width: 100%;

    max-width:
        var(--beauty-max);

    margin:
        0 auto;

    padding:
        var(--beauty-section-space)
        var(--beauty-page-padding);

}


.beauty-section-heading {

    margin-bottom:
        36px;

}


.beauty-section-heading--split {

    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap:
        24px;

}


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

.beauty-section-heading h2 {

    margin:
        0;

    max-width:
        780px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2.2rem,
            5vw,
            4.6rem
        );

    font-weight:
        400;

    line-height:
        0.98;

    letter-spacing:
        -0.045em;

}


.beauty-eyebrow {

    margin:
        0 0 13px;

    color:
        var(--beauty-pink);

    font-size:
        0.72rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.beauty-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 24px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-size:
        0.72rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

}


.beauty-button:hover {

    transform:
        translateY(-1px);

}


.beauty-button--light {

    background:
        var(--beauty-white);

    color:
        var(--beauty-black);

}


.beauty-button--light:hover {

    background:
        var(--beauty-soft-pink);

}


.beauty-button--dark {

    background:
        var(--beauty-black);

    color:
        var(--beauty-white);

}


.beauty-button--dark:hover {

    background:
        var(--beauty-charcoal);

}


.beauty-button--outline {

    background:
        transparent;

    color:
        var(--beauty-white);

    border-color:
        rgba(
            255,
            255,
            255,
            0.45
        );

}


.beauty-button--outline:hover {

    background:
        var(--beauty-white);

    color:
        var(--beauty-black);

}


/* =========================================================
   TEXT LINKS
   ========================================================= */

.beauty-text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding-bottom:
        5px;

    color:
        var(--beauty-text);

    border-bottom:
        1px solid currentColor;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


/* =========================================================
   IMAGES / CARDS
   ========================================================= */

.beauty-image-frame {

    overflow:
        hidden;

    background:
        var(--beauty-cream);

    border-radius:
        var(--beauty-radius-md);

}


.beauty-image-frame img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    :root {

        --beauty-page-padding:
            16px;

        --beauty-section-space:
            54px;

    }


    .beauty-container {

        width:
            calc(100% - 32px);

    }


    .beauty-section-heading {

        margin-bottom:
            24px;

    }


    .beauty-section-heading--split {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

    }


    .beauty-section-heading h2 {

        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );

    }


    .beauty-button {

        min-height:
            46px;

        padding:
            0 20px;

    }

}