/* DESIGN UPDATE:
Что изменено: локальные шрифты проекта распределены между выразительными заголовками и хорошо читаемым основным текстом.
Зачем: сохранить культурный характер Unbounded, но сделать длинный текст и элементы форм легче для чтения на смартфоне.
На что влияет: типографика всех страниц приложения.
*/
@font-face {
    font-family: 'Unbounded';
    src: url("/static/fonts/Unbounded/static/Unbounded-ExtraLight.9ed21d0a6360.ttf") format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url("/static/fonts/Unbounded/static/Unbounded-Regular.1667f3e9666a.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url("/static/fonts/Unbounded/static/Unbounded-Medium.154b28443b5c.ttf") format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url("/static/fonts/Unbounded/static/Unbounded-Bold.35c3cc7133a6.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url("/static/fonts/Outfit/static/Outfit-Regular.5fc3fef1a1a5.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url("/static/fonts/Outfit/static/Outfit-Medium.3af2e072a31b.ttf") format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url("/static/fonts/Outfit/static/Outfit-SemiBold.fff3440ed391.ttf") format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* DESIGN UPDATE:
Что изменено: создана единая система цветов, скруглений, теней, размеров контента и интервалов.
Зачем: все страницы теперь используют одну спокойную осеннюю палитру и одинаковые принципы оформления.
На что влияет: фон, текст, карточки, границы, кнопки, поля и отступы во всём приложении.
*/
:root {
    --color-background: #eee7dc;
    --color-surface: #faf6ef;
    --color-surface-muted: #e7ddcf;
    --color-surface-strong: #d9cbbb;
    --color-text: #211d19;
    --color-text-muted: #746a60;
    --color-accent: #b44c27;
    --color-accent-hover: #963b1e;
    --color-accent-soft: #f0ddd2;
    --color-dark: #1d1b18;
    --color-border: #d5c9ba;
    --color-border-strong: #bcae9d;
    --font-display: 'Unbounded', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --shadow-card: 0 12px 32px rgba(65, 47, 34, 0.07);
    --shadow-control: 0 3px 10px rgba(65, 47, 34, 0.08);
    --content-narrow: 500px;
    --content-wide: 760px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
}

/* DESIGN UPDATE:
Что изменено: обновлена глобальная основа страницы и добавлен спокойный геометрический декор без изображений и градиентов.
Зачем: заменить стандартный белый фон на тёплую музейную среду и сохранить чистоту интерфейса.
На что влияет: общий фон, базовая типографика и безопасное поведение размеров на всех экранах.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--color-background);
    color: var(--color-text);
    font-size: 16px;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    isolation: isolate;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
    position: fixed;
    z-index: -1;
    display: block;
    content: '';
    pointer-events: none;
}

body::before {
    top: 9vh;
    right: -42px;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(180, 76, 39, 0.2);
    border-radius: var(--radius-medium);
    transform: rotate(12deg);
}

body::after {
    bottom: 8vh;
    left: -34px;
    width: 76px;
    height: 76px;
    background: rgba(180, 76, 39, 0.08);
    border-radius: var(--radius-small);
    transform: rotate(-8deg);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.2;
}

a {
    color: inherit;
}

/* DESIGN UPDATE:
Что изменено: кнопки, поля и выпадающие списки получили общую базовую типографику, комфортную высоту и доступный фокус.
Зачем: сделать элементы единообразными и удобными для нажатия пальцем, не затрагивая их обработчики и поведение.
На что влияет: все существующие формы, кнопки, ссылки-действия и select на страницах.
*/
button,
input,
select,
textarea {
    min-width: 0;
    margin: 0;
    font: inherit;
}

button,
select,
input:not([type='radio']):not([type='checkbox']) {
    min-height: 48px;
}

button {
    border: 0;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(180, 76, 39, 0.28);
    outline-offset: 2px;
}

::selection {
    background: var(--color-accent-soft);
    color: var(--color-text);
}

/* DESIGN UPDATE:
Что изменено: для пользователей с отключённой анимацией сокращены переходы и анимации интерфейса.
Зачем: сохранить комфорт и доступность без изменения логики страниц.
На что влияет: все визуальные анимации и плавные состояния.
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}