:root {
    color-scheme: light;

    --color-milk: #f8f3ea;
    --color-cream: #f5eedf;
    --color-champagne: #efe3cf;
    --color-beige: #e8d9c3;
    --color-paper: #fffaf1;
    --color-charcoal: #3d352e;
    --color-sepia: #51463c;
    --color-muted: #7a6a5d;
    --color-border: #d8c7ad;
    --color-bordeaux: #7a2e2a;
    --color-terracotta: #b66a52;
    --color-brick-soft: #c7866f;

    --font-display: "Svetlana Display", Georgia, "Times New Roman", serif;
    --font-body: "Svetlana Text", "Segoe UI", Tahoma, sans-serif;

    --container: 1180px;
    --space-xs: 0.5rem;
    --space-sm: 0.875rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    --radius-sm: 14px;
    --radius-md: 24px;
    --radius-lg: 36px;

    --shadow-soft: 0 28px 80px rgba(81, 70, 60, 0.11);
}

@font-face {
    font-family: "Svetlana Display";
    src: local("Georgia");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Svetlana Text";
    src: local("Segoe UI");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Svetlana Text";
    src: local("Segoe UI Bold");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}