/*
 * base.css — дизайн-токены, reset, типографика, утилиты.
 * Порядок слоёв объявлен здесь один раз и действует на все файлы.
 * Слой components — в components.css, layout — в layout.css, pages — в pages/*.css.
 */

@layer reset, base, layout, components, pages, utilities;

/* ------------------------------------------------------------------ *
 * Дизайн-токены из Figma
 * ------------------------------------------------------------------ */

:root {
    /* --- Палитра (сырые токены, имена как в макете) --- */
    --blue: #0d6efd;
    --blue-80: #0d6efdcc;
    --blue-32: #0d6efd52;
    --blue-24: #0d6efd3d;
    --blue-16: #0d6efd29;
    --blue-8: #0d6efd14;
    --blue-4: #0d6efd0a;

    --black: #2e3133;
    --dark-grey: #586982;
    --middle-grey: #99aac5;
    --light-grey: #e9edf3;
    --white: #ffffff;
    --white-transparent: #ffffff29;

    --dark-blue: #162041;
    --navy: #012870;
    --orange: #fe5a35;
    --orange-dark: #d6320d;
    --skin: #fbc3ac;
    --skin-dark: #dfab96;

    --green: #12b886;
    --green-8: #12b88614;
    --purple: #7f56d9;
    --purple-8: #7f56d914;

    --color-brand: var(--blue);
    --color-brand-hover: var(--blue-80);
    --color-accent: var(--orange);
    --color-accent-hover: var(--orange-dark);
    --color-text: var(--black);
    --color-text-muted: var(--middle-grey);
    --color-bg: var(--white);
    --color-bg-alt: var(--blue-4);
    --color-bg-header: var(--navy);
    --color-border: var(--light-grey);

    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --text-body: clamp(0.875rem, 0.83rem + 0.25vw, 1rem);
    --text-h4: clamp(1rem, 0.91rem + 0.5vw, 1.25rem);
    --text-h3: clamp(1.25rem, 1.16rem + 0.5vw, 1.5rem);
    --text-h2: clamp(1.5rem, 1.32rem + 1vw, 2rem);
    --text-h1: clamp(2rem, 1.82rem + 1vw, 2.5rem);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;

    --leading-body: 1.3;
    --leading-heading: 1.1;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --shadow-sm: 0 1px 3px #0000004d;
    --shadow-card: 0 3px 16px #939aa729;
    --shadow-soft: 0 3px 16px #00000008;
    --shadow-blue: 0 4px 30px #2f6dff1a;
    --shadow-blue-strong: 0 4px 40px #306ed847;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --space-7: 5rem;
    --space-8: 6rem;

    /* Высота мобильной шапки и прибитой под ней строки поиска. */
    --mobile-header-h: 4.75rem;
    --mobile-search-h: 5rem;

    --container-max: 84rem;
    --container-pad: clamp(1rem, 3vw, 2rem);
    --radius: 0.5rem;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ------------------------------------------------------------------ *
 * Reset
 * ------------------------------------------------------------------ */

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
    }

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

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

    button {
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        outline: 0;
    }

    ul[class],
    ol[class] {
        list-style: none;
        padding: 0;
    }

    a:-webkit-any-link {
        color: inherit;
    }
}

/* ------------------------------------------------------------------ *
 * База
 * ------------------------------------------------------------------ */

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--font-body), serif;
        font-size: var(--text-body);
        font-weight: var(--weight-regular);
        line-height: var(--leading-body);
        color: var(--color-text);
        background: var(--color-bg-alt);
        -webkit-font-smoothing: antialiased;
    }

    h1 {
        font-size: var(--text-h1);
    }

    h2 {
        font-size: var(--text-h2);
    }

    h3 {
        font-size: var(--text-h3);
    }

    h4 {
        font-size: var(--text-h4);
        font-weight: var(--weight-medium);
    }

    h1, h2, h3 {
        font-weight: var(--weight-semibold);
    }

    h1, h2, h3, h4 {
        line-height: var(--leading-heading);
    }

    a {
        text-decoration: none;
    }

    a:visited {
        color: inherit;
    }

    a:hover {
        color: var(--color-brand-hover);
        text-decoration: underline;
    }

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

/* ------------------------------------------------------------------ *
 * Утилиты
 * ------------------------------------------------------------------ */

@layer utilities {
    .container {
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-pad);
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Скип-линк становится видимым при фокусе с клавиатуры */
    .skip-link:focus-visible {
        position: fixed;
        inset: var(--space-2) auto auto var(--space-2);
        z-index: 100;
        width: auto;
        height: auto;
        margin: 0;
        padding: var(--space-2) var(--space-3);
        clip-path: none;
        background: var(--color-bg);
        border-radius: var(--radius);
    }

    .flex {
        display: flex;
    }

    .flex-col {
        flex-direction: column;
    }

    .flex-1 {
        flex: 1 1;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-col-mobile {
        @media (max-width: 64rem) {
            flex-direction: column;
        }
    }

    .desktop {
        @media (max-width: 64rem) {
            display: none;
        }
    }

    .mobile {
        @media (min-width: 64rem) {
            display: none;
        }
    }

    .items-center {
        align-items: center;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-between {
        justify-content: space-between;
    }

    .w-full {
        width: 100%;
    }

    .w-half {
        width: 50%;

        @media (max-width: 64rem) {
            width: 100%;
        }
    }

    .gap-1 {
        gap: var(--space-1);
    }

    .gap-2 {
        gap: var(--space-2);
    }

    .gap-3 {
        gap: var(--space-3);
    }

    .gap-4 {
        gap: var(--space-4);
    }

    .gap-5 {
        gap: var(--space-5);
    }

    .p-1 {
        padding: var(--space-1);
    }

    .p-2 {
        padding: var(--space-2);
    }

    .p-3 {
        padding: var(--space-3);
    }

    .px-2 {
        padding-left: var(--space-2);
    }

    .px-3 {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .px-4 {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .m-1 {
        margin: var(--space-1);
    }

    .m-2 {
        margin: var(--space-2);
    }

    .m-3 {
        margin: var(--space-3);
    }

    .mt-1 {
        margin-top: var(--space-1);
    }

    .mt-2 {
        margin-top: var(--space-2);
    }

    .mt-3 {
        margin-top: var(--space-3);
    }

    .mt-4 {
        margin-top: var(--space-4);
    }

    .mt-5 {
        margin-top: var(--space-5);
    }

    .mt-6 {
        margin-top: var(--space-6);
    }

    .mt-7 {
        margin-top: var(--space-7);
    }

    .mt-8 {
        margin-top: var(--space-8);
    }

    .mt-auto {
        margin-top: auto;
    }

    .text-xs {
        font-size: var(--text-xs);
    }

    .text-sm {
        font-size: var(--text-sm);
    }

    .text-lg {
        font-size: var(--text-lg);
    }

    .text-xl {
        font-size: var(--text-xl);
    }

    .semibold {
        font-weight: var(--weight-semibold);
    }

    .text-brand {
        color: var(--color-brand);
    }

    .text-gray {
        color: var(--dark-grey);
    }

    .text-muted {
        color: var(--color-text-muted);
    }

    .text-primary {
        color: var(--color-text);
    }

    .text-danger {
        color: var(--orange-dark);
    }

    .no-decoration {
        text-decoration: none;
    }

    .bg-white {
        background-color: var(--white);
    }

    .bg-alt {
        background: var(--blue-4);
    }

    /* Обрезка текста по числу строк. Требует display: -webkit-box,
       поэтому вешается на сам текстовый элемент, а не на flex-контейнер. */
    .line-clamp-2,
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-2 {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .line-clamp-3 {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .hidden {
        overflow: hidden;
    }
}

.not-found-page {
    max-width: 30rem;
    text-align: center;
}