:root {
    --color-bg: #f4ede4;
    --color-bg-soft: #efe3d7;
    --color-surface: #fffaf5;
    --color-surface-strong: #ffffff;

    --color-sidebar: #1f120d;
    --color-sidebar-soft: #2b1a13;

    --color-primary: #7b4b2a;
    --color-primary-hover: #5c361f;
    --color-gold: #c89a5d;

    --color-text: #2d211b;
    --color-text-soft: #7b6b60;
    --color-text-light: #f8efe5;

    --color-border: #e5d5c5;

    --shadow-soft: 0 18px 45px rgba(60, 35, 20, 0.08);

    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

html[data-theme="dark"] {
    --color-bg: #160f0b;
    --color-bg-soft: #21140e;
    --color-surface: #241711;
    --color-surface-strong: #2d1c14;

    --color-sidebar: #0f0906;
    --color-sidebar-soft: #1a100b;

    --color-primary: #c89a5d;
    --color-primary-hover: #d9ad72;
    --color-gold: #d2a465;

    --color-text: #f7ebdf;
    --color-text-soft: #c7aa92;
    --color-text-light: #fff7ee;

    --color-border: #3b261b;

    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    background:
            radial-gradient(circle at top right, rgba(200, 154, 93, 0.18), transparent 34%),
            var(--color-bg);

    color: var(--color-text);

    font-family: Arial, sans-serif;
}

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

a {
    color: inherit;
}

img {
    max-width: 100%;
}