:root {
    /* Colors */
    --color-white: hsl(0, 0%, 100%);

    --color-stone-100: hsl(30, 54%, 90%);
    --color-stone-150: hsl(30, 18%, 87%);
    --color-stone-600: hsl(30, 10%, 34%);
    --color-stone-900: hsl(24, 5%, 18%);

    --color-brown-800: hsl(14, 45%, 36%);

    --color-rose-800: hsl(332, 51%, 32%);
    --color-rose-50: hsl(330, 100%, 98%);

    /* Typography */
    --font-heading: 'Young Serif', serif;
    --font-body: 'Outfit', sans-serif;

    /* Font sizes */
    --font-preset-1: clamp(2.25rem, 5vw, 2.5rem);  /* 36px → 40px */
    --font-preset-2: 1.75rem;                        /* 28px */
    --font-preset-3: 1.25rem;                        /* 20px */
    --font-preset-4: 1rem;                           /* 16px */

    --line-height: 1;
    --line-height-lg: 1.5;

    /* Font weight */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --space-50: 0.25rem;    /* 4px */
    --space-100: 0.5rem;    /* 8px */
    --space-150: 0.75rem;   /* 12px */
    --space-200: 1rem;      /* 16px */
    --space-300: 1.5rem;    /* 24px */
    --space-400: 2rem;      /* 32px */
    --space-500: 2.5rem;    /* 40px */
    --space-600: 3rem;      /* 48px */
    --space-1600: 8rem;     /* 128px */

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-full: 50%;
}

html {
    font-size: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    background-color:  var(--color-stone-100);
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    width: 100%;
}

h2 {
    font-family: var(--font-heading);
    font-size: var(--font-preset-2);
    font-weight: var(--font-weight-regular);
    color: var(--color-brown-800);
    margin-block-end: var(--space-300);
}

.recipe {
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}

.recipe__container {
    padding: var(--space-500) var(--space-400);
    display: flex;
    flex-direction: column;
    gap: var(--space-400);
}

.recipe__image {
    width: 100%;
    height: auto;
}

.recipe__title {
    font-size: var(--font-preset-1);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-regular);
    color: var(--color-stone-900);
}

.recipe__description {
    font-family: var(--font-body);
    color: var(--color-stone-600);
    font-size: var(--font-preset-4);
    line-height: var(--line-height-lg);
    font-weight: var(--font-weight-regular);
}

.recipe__separator {
    border: none;
    border-block-start: 1px solid var(--color-stone-150);
}

.recipe__preparation {
    background-color: var(--color-rose-50);
    border-radius: var(--radius-sm);
    padding: var(--space-300);
}

.recipe__preparation h2 {
    font-size: var(--font-preset-3);
    color: var(--color-rose-800);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
}

.recipe__preparation ul,
.recipe__ingredients ul {
    font-size: var(--font-preset-4);
    color: var(--color-stone-600);
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    list-style: none;
    display: flex;
    flex-direction: column;
    margin-left: var(--space-50);
}

.recipe__preparation ul li,
.recipe__ingredients ul li {
    display: flex;
    gap: var(--space-400);
    line-height: var(--line-height-lg);
    align-items: center;
}

.recipe__preparation ul li::before,
.recipe__ingredients ul li::before {
    content: '•';
    font-size: var(--font-preset-3);
    flex-shrink: 0;
}

.recipe__preparation ul li::before {
    color: var(--color-rose-800);
}

.recipe__ingredients ul li::before {
    color: var(--color-brown-800);
}

.recipe__instructions ol {
    font-size: var(--font-preset-4);
    color: var(--color-stone-600);
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    display: flex;
    flex-direction: column;
    gap: var(--space-100);
    margin-left: var(--space-50);
    counter-reset: list-counter;
}

.recipe__instructions ol li {
    counter-increment: list-counter;
    display: flex;
    gap: var(--space-300);
    line-height: var(--line-height-lg);
}

.recipe__instructions ol li::before {
    content: counter(list-counter) '.';
    font-weight: var(--font-weight-bold);
    font-size: var(--font-preset-4);
    color: var(--color-brown-800);
    flex-shrink: 0;
}

.recipe__nutrition p {
    font-family: var(--font-body);
    color: var(--color-stone-600);
    font-size: var(--font-preset-4);
    line-height: var(--line-height-lg);
    font-weight: var(--font-weight-regular);
}

.recipe__nutrition table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    padding: 0;
}

.recipe__nutrition caption {
    visibility: hidden;
}

.recipe__nutrition tr {
    border-bottom: 1px solid var(--color-stone-150);
}

.recipe__nutrition tr:last-child {
    border-bottom: none;
}

.recipe__nutrition td {
    padding-block: var(--space-150);
}

.recipe__nutrition-name {
    font-family: var(--font-body);
    color: var(--color-stone-600);
    font-size: var(--font-preset-4);
    font-weight: var(--font-weight-regular);
    width: 50%;
    padding-inline-start: var(--space-400);
}

.recipe__nutrition-value {
    font-family: var(--font-body);
    color: var(--color-brown-800);
    font-size: var(--font-preset-4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-lg);
}

strong {
    font-weight: var(--font-weight-semibold);
}

.attribution {
    font-size: var(--font-preset-4);
    text-align: center;
    margin: var(--space-400) 0;
    color: var(--color-brown-800);
}

.attribution a {
    color: var(--color-stone-900);
}

.attribution a:focus-visible {
    outline: 2px solid var(--color-stone-900);
}

/* breakpoints tablet */
@media (min-width: 616px) {
    body {
        margin: 0 var(--space-400) ;
    }
    .recipe {
        margin-block-start: var(--space-1600);
        max-width: 736px;
        border-radius: var(--radius-lg);
    }

    .recipe__image-wrapper {
        padding: var(--space-500) var(--space-500) 0 var(--space-500);
    }

    .recipe__image {
        border-radius: var(--radius-md);
    }

    .recipe__container {
        padding: var(--space-500);
    }
}