:root {
    --zyfud-brown: #2f120d;
    --zyfud-red: #e6372e;
    --zyfud-green: #2fa34a;
    --zyfud-yellow: #f7c51e;
    --zyfud-cream: #fffaf4;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--zyfud-cream);
}

img {
    max-width: 100%;
}

.shadow-candy {
    box-shadow: 0 22px 55px rgba(230, 55, 46, 0.18);
}

.shadow-soft {
    box-shadow: 0 18px 45px rgba(47, 18, 13, 0.10);
}

.shadow-inner-soft {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

:focus-visible {
    outline: 3px solid rgba(47, 163, 74, 0.35);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .section-shell {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}