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

:root{ 
    /* Палитра */ 
    --color-bg: #fff;
    --color-fg: #0b0b0b;
    --color-muted: #7ec595;
    --color-primary: #0a84ff;
    --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);

    /* Светлые скорллбары/контролы по умолчанию */
    color-scheme: light;
} 


.feedback {
    background: linear-gradient(#ffffff 0%, #c4f0c7 50%, #9afab8 100%);
}
/* Тёмная тема: переопределяем только значения токенов */ 
body.theme-dark{
    --color-bg: #0b0b0b;
    --color-fg: #7ec595 50%; 
    --color-muted: #7ec595 50%;
    --color-primary: #6aa2ff; 

    /* Тёмные скорллбары/контролы при активной тёмной теме */
    color-scheme: dark;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(#ffffff 0%, #7ec595 50%, #00b806 100%);
    color: var(--color-fg);
    font-family: var(--font-body);
    line-height: 1.5;
}

/* Центровка и ограничение ширины контейнера */
.container {
    width: min(100% - 2*var(--space-4), 1120px);
    margin-inline: auto;
    background: linear-gradient(#ffffff 0%, #7ec595 50%, #00b806 100%);

}

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

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

/* :where(...) не добавляет специфичности — проще переопределять позже */ 
: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;
} 

/* Подсветка цели */
:target{
    outline: 2px dashed var(--color-primary);
    outline-offset:4px;
} 

/* Кнопка по умолчанию */ 
button, [type="submit"] { 
    background: var(--color-primary); 
    color: #fff; 
    border: none; 
    cursor: pointer; 
}

#form-actions__close-dialog {
    margin: 10px 0px;
}

/* Состояния: клавиатура/мышь/ошибки */ 
:where(input, select, textarea, button):focus-visible { 
    outline: 2px solid var(--color-primary);
    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: var(--color-danger);
}

/* Вертикальные отступы секций по токенам */ 
.section {
    padding-block: var(--space-5);
} 
.section__title {
    margin: 0 0 var(--space-3);
}

/* Медиа не «выпрыгивают» из контейнеров */ 
img, video{
    max-width: 100%;
    height: auto;
    display: block;
}

/* Форм-контролы наследуют шрифт и цвет */ 
button, input, select, textarea{
    font: inherit;
} 

.header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__logo {
    color: var(--color-fg);
    text-decoration: none;
}

.header-nav__list {
    display: flex;
    justify-content: space-between;
    width: 500px;
    padding: 0px;
}

.header-nav__list li{
    list-style: none;
}

.header-nav__list a{
    color: var(--color-fg);
    text-decoration: none;
    transition-duration: 0.3s;
}

.header-nav__list a:hover{
    color: var(--color-primary);
}

.breadcrumbs__home {
    color: var(--color-fg);
    text-decoration: none;
}

main {
    padding: 10px;
    background: linear-gradient(#ffffff 0%, #7ec595 50%, #00b806 100%);
    border: 1px solid var(--color-fg);
}
html, body {
    margin: 0;
    padding: 0;
}
main {
    min-height: calc(100vh - 200px);
    padding: var(--space-3);
}