:root {
    --root-font-size: 16px;
    font-size: var(--root-font-size);
    scroll-behavior: smooth;

    --font-accent: "Cherry Swash";
    --font-base: "Figtree";
    --font-size-h1: 4rem;
    --font-size-h2: 3rem;
    --font-size-link: 1.5rem;
    --font-size-btn: 1.25rem;

    --primary-color: #b77466;
    --secondary-color: #ffe1af;
    --teritary-color: #e94560;
    --text-color: black;
    --text-hover-color: oklch(from var(--text-color) 1 c h);
    --accent-text-color: oklch(from var(--primary-color) 0.2 c h);
    --accent-color: #e94560;
    --neutral-color: #fffdf8;

    --title-color: #5d4037;

    --carrot-color-1: #ff9f1c;
    --carrot-color-2: #e06b1a;
    --carrot-color-3: #c95510;
    --carrot-color-4: #d00000;
    --carrot-hair-color: #2d6a4f;

    --tomato-color-1: #ff8a7a;
    --tomato-color-2: #e63c3c;
    --tomato-color-3: #c91f1f;
    --tomato-color-4: #a01515;
    --tomato-hair-color: #52b788;

    --onion-color-1: #d4a373;
    --onion-color-2: #e8d5b7;
    --onion-color-3: #d4a373;
    --onion-color-4: #bc6c25;
    --onion-hair-color: #1b4332;

    --chicken-color-1: #ffe8a3;
    --chicken-color-2: #d0bd67;
    --chicken-color-3: #ecaa47;
    --chicken-color-4: #d38c46;
    --chicken-hair-color: #bb3131;

    --rice-color-1: #ffffff;
    --rice-color-2: #f5f5f5;
    --rice-color-3: #e8e8e8;
    --rice-color-4: #d0d0d0;

    --secret-color-1: #838383;
    --secret-color-2: #5e5e5e;
    --secret-color-3: #2c2c2c;
    --secret-color-4: #000000;

    --parsley-color-1: #43b755;
    --parsley-color-2: #329f3d;

    --table-color: #1a1a2e;
    --rim-color: #3b3b3b;

    --shadow-color-1: rgba(255,240,200,0.4);
    --shadow-color-2: rgba(140,90,40,0.25);
    --shadow-color-3: rgba(0, 0, 0, 0.2);

    --border-radius: 1rem;
    --border-width: 0.125rem;
    --border-width-bold: calc(2 * var(--border-width));

    --top-offset: 4rem;
    --transition-duration: 250ms;

    --content-width: 50vw;
    --ingredient-basis: 30%;
    --pilaf-scene-width: 60%;
    --link-basis: 25%;
    --border-width: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-duration: 0ms;
        scroll-behavior: auto;
    }
}

@media screen and (max-width: 1300px) {
    :root {
        --content-width: 70vw;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --ingredient-basis: 45%;
        --font-size-h1: 3rem;
        --font-size-h2: 2rem;
        --font-size-link: 1.25rem;
        --pilaf-scene-width: 80%;
        --link-basis: 50%;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --font-size-h1: 2rem;
        --font-size-h2: 1.5rem;
        --pilaf-scene-width: 100%;
        --font-size-btn: 1rem;
    }
}

@media screen and (max-width: 612px) {
    :root {
        --ingredient-basis: 100%;
    }
}

@media screen and (max-width: 500px) {
    :root {
        --root-font-size: 12px;
    }
}