:root {
    /* ФОНОВЫЕ ЦВЕТА (Бэкграунд) */
    --kg-bg-main: #1f1f28; /* Главный глубокий темный фон сайта (mSurface) */
    --kg-bg-side: #2a2a37; /* Панели: фон для хедера, футера и карточек (mSurfaceVariant) */

    /* ТЕКСТ (Буквы) */
    --kg-tx-main: #c8c093; /* Основной мягкий текст цвета пергамента (mOnSurface) */
    --kg-tx-mute: #717c7c; /* Второстепенный серо-зеленый текст (mOnSurfaceVariant) */

    /* ЗАГОЛОВКИ */
    --kg-hd-main: #76946a; /* Главные заголовки h1, h2 (Фирменный зеленый mPrimary) */

    /* ИНТЕРАКТИВ (Ссылки и кнопки) */
    --kg-lnk-main: #7e9cd8; /* Ссылки и кнопки по умолчанию (Приглушенный синий mTertiary) */
    --kg-lnk-hovr: #c0a36e; /* Цвет при наведении мыши (Песочно-желтый mSecondary) */

    /* ГРАНИЦЫ И ЛИНИИ */
    --kg-bd-line: #363646; /* Строгие рамки и разделители (mOutline) */
}

body {
    background-color: var(
        --kg-bg-main
    ); /* Весь сайт теперь светлый, цвета старого пергамента */
    color: var(--kg-tx-main); /* Текст глубокий темный, отлично читается */
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: var(--kg-bg-side); /* Выделяющийся серо-зеленый хедер */
    border-bottom: 2px solid var(--kg-bd-line);
    padding: 20px;
}

h1 {
    color: var(--kg-hd-main); /* Фирменный зеленый заголовок */
    font-size: 3rem;
}