:root {
    --color-primary: #6B8E2D;
    --color-primary-dark: #526D22;
    --color-text: #1F2937;
    --color-text-soft: #4B5563;
    --color-background: #F8F4EB;
    --color-surface: #FFFFFF;
    --color-border: #D8D2C7;
    --color-danger: #B42318;
    --color-warning: #B7791F;
    --color-success: #4F772D;

    --font-family: "Open Sans", Arial, Helvetica, sans-serif;

    --container-width: 1200px;
    --border-radius-small: 8px;
    --border-radius-medium: 14px;
    --border-radius-large: 20px;

    --shadow-small: 0 4px 14px rgba(31, 41, 55, 0.08);
    --shadow-medium: 0 12px 32px rgba(31, 41, 55, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-family);
    background: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-width: 100%;
}

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

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

.container {
    width: min(100% - 40px, var(--container-width));
    margin-inline: auto;
}

.nowrap {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .container {
        width: min(100% - 28px, var(--container-width));
    }
}

@media (max-width: 480px) {
    .container {
        width: min(100% - 22px, var(--container-width));
    }
}

@media (max-width: 360px) {
    .container {
        width: min(100% - 18px, var(--container-width));
    }

    body {
        font-size: 15px;
    }
}