:root{
    color-scheme: light;
    --color-bg:#ffffff; --color-fg:#946e05; --color-muted:#666;
    --color-primary:#ffbf00; --color-danger:#b00020;

    --font-body:system-ui, -apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:40px;

    --radius:12px;
    --shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08);
}

body.theme-dark{
    --color-bg:#000000; --color-fg:#f5f5f5; --color-muted:#aaa;
    --color-primary:#ffca38;
}

a{
    color: var(--color-primary);
}

.site-nav_link{
    color: var(--color-primary);
    font-weight: bold;
    font-size: large;
    background-color: var(--color-primary);
}

.media{
    aspect-ratio: 16/9;
    width: min(100%, 960px);
    margin-inline: auto;
}
.media iframe,
.media video{
    width: 100%; height: 100%;
    border: 0; border-radius: var(--radius);
}

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

:disabled,[aria-disabled="true"]{opacity:.6; cursor: not-allowed;}

/* БАЗА: читаемость и предсказуемость размеров */
* {
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

:target{outline: 2px dashed var(--color-primary); outline-offset: 4px;}

.button{
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: large;
    background-color: var(--color-primary);
}

.container{
    display: flex;
    width: min(100% - 2*var(--space-4), 1120px);
    margin-inline: auto;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.site-nav_div{
    display: flex;
    gap: 20px;
    justify-content: center;
}

.site-nav_link{
    text-decoration: none;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 5px;
    transition: var(--color-bg) 0.3s;
}

.section{
    padding-block:var(--space-5);
}
.section_title{
    margin:0 0 var(--space-3);
}

#header .menu .item a{color: #333;}

header{
    background: linear-gradient(to top, rgba(0, 0, 0, 0.499), rgba(0, 0, 0, 0.175)),
    url("assets/beer_bg.jpg") center;
    padding: 10px;
}

*{box-sizing: border-box;}
html,body{margin: 0; padding: 0;}
body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    color:var(--color-fg);
    font-family: var(--font-body);
    line-height: 1.5;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial,
        sans-serif;
    line-height: 1.5;
}

img, video {max-width: 100%; height: auto; display: block;}

input,select,textarea {font:inherit; color:inherit}
/* Формы: размеры, отступы, визуальный порядок */
label {
    display: block;
    margin: 0.5rem 0 0.25rem;
}

.box{
    display: inline;
}

input,
select,
textarea,
button {
    width: 100%;
    max-width: 480px;
    padding: .5rem .75rem;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    background: #fff;
}

/* Состояния: клавиатура/мышь/ошибки */
:where(input, select, textarea, button):focus-visible {
    outline: 2px solid #0a84ff;
    outline-offset: 2px;
}

button:hover {
    filter: brightness(0.95);
}

:disabled,
[aria-disabled="true"] {
    opacity: .6;
    cursor: not-allowed;
}

/* Подсветка ошибочных полей (установите aria-invalid="true") */
[aria-invalid="true"] {
    border-color: #b00020;
}

dialog {
    padding: 1, 25rem;
    border: none;
    border-radius: 12px;
}

dialog::backdrop {
    background: rgba(0, 0, 0, .5);
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}