/* =========================================================
   RECIPE WORLD — GLOBAL DESIGN SYSTEM
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #18181b;

    background: #fafaf8;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


img {
    max-width: 100%;

    vertical-align: middle;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;
}


a {
    color: inherit;

    text-decoration: none;
}


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

    /* Colors */

    --color-bg:
        #fafaf8;

    --color-surface:
        #ffffff;

    --color-surface-soft:
        #f5f5f2;

    --color-text:
        #18181b;

    --color-text-secondary:
        #71717a;

    --color-text-muted:
        #a1a1aa;

    --color-border:
        #e7e7e3;

    --color-border-light:
        #eeeeeb;

    --color-accent:
        #e8792f;

    --color-accent-dark:
        #c95e1b;

    --color-accent-soft:
        #fff1e7;


    /* Layout */

    --container:
        1180px;

    --page-padding:
        24px;


    /* Radius */

    --radius-sm:
        8px;

    --radius-md:
        12px;

    --radius-lg:
        18px;

    --radius-xl:
        24px;

    --radius-pill:
        999px;


    /* Shadows */

    --shadow-sm:
        0 2px 10px rgba(0, 0, 0, 0.04);

    --shadow-md:
        0 10px 30px rgba(0, 0, 0, 0.07);

    --shadow-lg:
        0 20px 55px rgba(0, 0, 0, 0.10);


    /* Motion */

    --ease:
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

    --transition-fast:
        180ms var(--ease);

    --transition:
        300ms var(--ease);

    --transition-slow:
        600ms var(--ease);

}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--container)
    );

    margin-left: auto;

    margin-right: auto;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    background:
        rgba(250, 250, 248, 0.88);

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.06);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.header-inner {
    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--color-text);

    font-size: 19px;

    font-weight: 800;

    letter-spacing: -0.5px;

    transition:
        transform
        var(--transition-fast);
}


.logo:hover {
    transform:
        translateY(-1px);
}


/* =========================================================
   GLOBAL BUTTON
========================================================= */

.primary-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding:
        0
        18px;

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

    background:
        var(--color-text);

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform
        var(--transition-fast),
        background
        var(--transition-fast),
        box-shadow
        var(--transition-fast);
}


.primary-button:hover {
    background:
        #2f2f32;

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-md);
}


.primary-button:active {
    transform:
        translateY(0)
        scale(0.98);
}


/* =========================================================
   ACCENT BUTTON
========================================================= */

.accent-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding:
        0
        20px;

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

    background:
        var(--color-accent);

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform
        var(--transition-fast),
        background
        var(--transition-fast),
        box-shadow
        var(--transition-fast);
}


.accent-button:hover {
    background:
        var(--color-accent-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(232, 121, 47, 0.20);
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.search-input {
    width: 100%;

    height: 52px;

    padding:
        0
        16px;

    border:
        1px solid
        var(--color-border);

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

    outline: none;

    background:
        var(--color-surface);

    color:
        var(--color-text);

    font-size: 15px;

    transition:
        border-color
        var(--transition-fast),
        box-shadow
        var(--transition-fast);
}


.search-input::placeholder {
    color:
        var(--color-text-muted);
}


.search-input:focus {
    border-color:
        rgba(232, 121, 47, 0.65);

    box-shadow:
        0 0 0 4px
        rgba(232, 121, 47, 0.10);
}


/* =========================================================
   GLOBAL CARD
========================================================= */

.card {
    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border-light);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);
}


/* =========================================================
   SECTION
========================================================= */

.section {
    padding:
        80px 0;
}


.section-heading {
    margin-bottom:
        32px;
}


.section-heading h2 {
    color:
        var(--color-text);

    font-size:
        clamp(
            26px,
            4vw,
            36px
        );

    line-height:
        1.15;

    letter-spacing:
        -1.2px;
}


.section-heading p {
    margin-top:
        9px;

    color:
        var(--color-text-secondary);

    font-size:
        15px;

    line-height:
        1.6;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    text-decoration: none;
    color: var(--color-text);

    font-weight: 800;
}

.logo-image {
    width: 70px;
    height: 70px;

    object-fit: contain;

    border-radius: 10px;

    display: block;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 46px;
    padding: 0 20px;

    border: 1px solid transparent;
    border-radius: 12px;

    background: var(--color-accent);
    color: #ffffff;

    font-size: 13px;
    font-weight: 750;
    text-decoration: none;

    cursor: pointer;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.primary-button:hover {
    background: var(--color-accent-dark);

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-md);
}

.primary-button:active {
    transform:
        translateY(0)
        scale(0.98);
}

.primary-button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

/* =========================================================
   SMALL LABEL
========================================================= */

.eyebrow {
    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding:
        0 11px;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-accent-soft);

    color:
        var(--color-accent-dark);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.8px;

    text-transform:
        uppercase;
}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

:focus-visible {
    outline:
        3px solid
        rgba(232, 121, 47, 0.35);

    outline-offset:
        3px;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
    background:
        rgba(232, 121, 47, 0.18);

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


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 9px;
}


::-webkit-scrollbar-track {
    background:
        #f1f1ee;
}


::-webkit-scrollbar-thumb {
    border-radius:
        var(--radius-pill);

    background:
        #c9c9c4;
}


::-webkit-scrollbar-thumb:hover {
    background:
        #a8a8a3;
}


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

@media (max-width: 700px) {

    :root {
        --page-padding:
            16px;
    }


    .header-inner {
        min-height:
            64px;
    }


    .logo {
        font-size:
            17px;
    }


    .section {
        padding:
            55px 0;
    }


    .section-heading {
        margin-bottom:
            24px;
    }

}


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

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}