/* Главный файл стилей */
/* Импорт normalize и компонентов — ВСЕ @import должны быть в начале */
@import url('./normalize.css');
@import url('./components/button.css');
@import url('./components/header.css');
@import url('./components/hero.css');
@import url('./components/services.css');
@import url('./components/promotion.css');
@import url('./components/about.css');
@import url('./components/studio.css');
@import url('./components/faq.css');
@import url('./components/reviews.css');
@import url('./components/booking.css');
@import url('./components/scroll-reveal.css');
@import url('./components/footer.css');
@import url('./components/legal-page.css');
@import url('./components/modal.css');

/* Глобальные цветовые переменные (дизайн-токены) */
:root {
    --color-bg-main: #EFE9D7;
    --color-bg-secondary: #898861;
    --color-accent: #7D2826;
    --color-text-base: #343723;
    --color-text-inverted: #EFE9D7;
    --font-base: 'Work Sans', sans-serif;
    --font-heading: 'Lora', serif;
    --text-base-size: 16px;
    --text-base-line: 1.6;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius-s: 12px;
    --radius-m: 16px;
    --radius-l: 20px;
    --radius-xs: 8px;
    --radius-xxs: 4px;
    --radius-xxxs: 2px;
    --radius-xl: 24px;
    --radius-xxl: 28px;
    --radius-hero: 15px;
    --radius-pill: 999px;
    --radius-xxl2: 32px;
    --shadow-sm: 0 6px 16px rgba(42, 37, 34, 0.08);
    --shadow-md: 0 8px 24px rgba(42, 37, 34, 0.15);
    --shadow-soft-1: 0 2px 12px rgba(52, 55, 35, 0.08);
    --shadow-soft-2: 0 4px 16px rgba(52, 55, 35, 0.12);
    --shadow-header: 0 4px 20px rgba(52, 55, 35, 0.08);
    --shadow-card: 0 4px 20px rgba(42, 37, 34, 0.08);
    --shadow-card-hover: 0 8px 28px rgba(42, 37, 34, 0.12);
    --shadow-about: 0 10px 32px rgba(42, 37, 34, 0.10);
    --shadow-promo-badge: 0 8px 18px rgba(0, 0, 0, 0.18);
    --shadow-footer: 0 4px 16px rgba(125, 40, 38, 0.35);
    --shadow-footer-hover: 0 6px 20px rgba(125, 40, 38, 0.4);
    --shadow-calendar: 0 8px 24px rgba(52, 55, 35, 0.12);
    --shadow-calendar-strong: 0 8px 24px rgba(52, 55, 35, 0.15);
    --shadow-focus: 0 0 0 2px rgba(125, 40, 38, 0.2);
    --transition-base: 0.2s ease;
}

/* Плавная прокрутка по якорным ссылкам */
html {
    scroll-behavior: smooth;
}

/* Базовые текстовые настройки (без переопределения компонентов) */
body {
    font-family: var(--font-base);
    font-size: var(--text-base-size);
    line-height: var(--text-base-line);
    color: var(--color-text-base);
    background-color: var(--color-bg-main);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

a {
    text-decoration-skip-ink: auto;
}

/* Базовые списки без классов (не влияет на компоненты с классами) */
:where(ul, ol):not([class]) {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
}

:where(ul, ol):not([class]) li {
    margin-bottom: var(--space-2);
}

:where(ul, ol):not([class]) li:last-child {
    margin-bottom: 0;
}

strong {
    font-weight: 600;
}

em {
    font-style: italic;
}

:where(button, input, select, textarea):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

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

/* Вспомогательный класс для доступности */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}