:root {
    --font-size-2xs: 0.625rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;

    --border-radius-md: 8px;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --shadow-sm: 0 0 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);

    --light-md: 0 0px 16px rgba(255, 204, 0, 0.479);

    --color-yellow-100: oklch(98% 0.05 85);
    --color-yellow-200: oklch(94% 0.1 85);
    --color-yellow-300: oklch(90% 0.15 85);
    --color-yellow-400: oklch(87% 0.19 85); /* Ваш фирменный #ffcc00 */
    --color-yellow-500: oklch(80% 0.18 85);
    --color-yellow-600: oklch(75% 0.17 85);
    --color-yellow-700: oklch(70% 0.16 85);
    --color-yellow-800: oklch(65% 0.14 85);
    --color-yellow-900: oklch(60% 0.12 85); /* Темный, горчичный */

    --color-neutral-0: oklch(100% 0 0); /* Белый */
    --color-neutral-50: oklch(98% 0 0);
    --color-neutral-100: oklch(95% 0 0);
    --color-neutral-200: oklch(90% 0 0);
    --color-neutral-300: oklch(80% 0 0);
    --color-neutral-400: oklch(70% 0 0);
    --color-neutral-500: oklch(60% 0 0);
    --color-neutral-600: oklch(50% 0 0);
    --color-neutral-700: oklch(40% 0 0);
    --color-neutral-800: oklch(30% 0 0);
    --color-neutral-900: oklch(20% 0 0);
    --color-neutral-950: oklch(15% 0 0); /* Почти черный */

    /* SEMANTIC */

    --color-text-primary: var(--color-neutral-950); /* Основной текст */
    --color-text-secondary: var(--color-neutral-600); /* Второстепенный текст */
    --color-text-disabled: var(--color-neutral-400); /* Неактивный текст */
    --color-text-link: var(--color-yellow-700); /* Ссылки */
    --color-text-link-hover: var(--color-yellow-800);

    --color-background-body: var(--color-neutral-0); /* Фон всей страницы */
    --color-background-surface: var(
        --color-neutral-50
    ); /* Фон карточек, модалок */
    --color-background-surface-raised: var(
        --color-neutral-0
    ); /* "Приподнятые" поверхности */

    /* --- Фон --- */
    --color-background-body: var(--color-neutral-0); /* Фон всей страницы */
    --color-background-surface: var(
        --color-neutral-50
    ); /* Фон карточек, модалок */
    --color-background-surface-raised: var(
        --color-neutral-0
    ); /* "Приподнятые" поверхности */

    /* --- Рамки (Borders) --- */
    --color-border-default: var(--color-neutral-300);
    --color-border-subtle: var(--color-neutral-200);
    --color-border-interactive-focus: var(
        --color-yellow-600
    ); /* Рамка при фокусе */

    /* --- Интерактивные элементы (Кнопки, Поля ввода) --- */
    --color-background-interactive-primary: var(--color-yellow-400);
    --color-background-interactive-primary-hover: var(--color-yellow-500);
    --color-text-on-interactive-primary: var(
        --color-neutral-950
    ); /* ВАЖНО: темный текст на желтом фоне для контраста */

    --color-background-interactive-secondary: var(--color-neutral-200);
    --color-background-interactive-secondary-hover: var(--color-neutral-300);
    --color-text-on-interactive-secondary: var(--color-neutral-800);

    /* OLD */
    --background: #ffffff;
    --background-alt: #fafafa;
    --background-fwd: #f3f3f3;
    --foreground: #171717;
    --primary-text-color: #171717;
    --secondary-text-color: #4f4f4f;
    --accent-color: #ffcc00;
    --accent-color-alt: #fff8db;
    --warning: #ff3939;
    --border-radius: 8px;

    /* COLORS */
    --clr-header: rgba(255, 255, 255, 1);
    --clr-text-nav: #171717;
    --clr-header-searchbar: #f9f9f9;
    --clr-text: #171717;
    --clr-text-sec: #4f4f4f;
    --clr-acc: #ffcc00;
    --clr-acc-sec: #fff8db;
    --clr-bg-fill: #ffffff;
    --clr-bg-nav: #ffffff66;
    --clr-bg: #f8f8f8;
    --clr-bg-pr: #f3f3f3;
    --clr-bg-alt: #171717;
    --clr-warn: #ff3939;

    /* FONT SIZES */
    --fs-nav: 0.75rem;
    --fs-title: 1.5rem;
    --fs-text-l: 1.25rem;
    --fs-text-m: 1rem;
    --fs-text-s: 0.75rem;
    --fs-text-xs: 0.5rem;

    /* PADDINGS MARGINS GAPS */

    /* UTILS */
    --brs: 8px;
    --shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    --shadow-s: 0 0 4px rgba(0, 0, 0, 0.1);
    --light: 0 0px 16px rgba(255, 204, 0, 0.479);
}
html {
    scroll-behavior: smooth;
}
html,
body {
    max-width: 100vw;
    /* overflow-x: hidden; */
    scrollbar-width: thin;
}

body {
    position: relative;
    color: var(--primary-text-color);
    background: var(--clr-bg-fill);
    font-family: var(--font-nunito-sans), Helvetica, sans;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* padding-left: calc(100vw - 100%); */
}
main {
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
}
button {
    color: inherit;
    font: inherit;
    border: none;
    background-color: transparent;
}
.container {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}