/* ================================================================
   global.css — Figma-токены + подключение шрифтов
   ================================================================ */

/* Шрифты — Onest через Google Fonts, Unbounded тоже.
   Если шрифты лежат локально в /assets/fonts/ — замени на @font-face */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;700&family=Unbounded:wght@400;600&display=swap');

:root {
    /* ── Цвета ───────────────────────────────────────────────── */
    --white:   #ffffff;
    --active:  #9298b1;
    --text:    #bfbfc0;
    --button:  #101010;
    --text2:   #666666;

    /* фон сайта (тёмный, судя по палитре) */
    --bg:      #0B0C0F;

    /* ── Типографика ─────────────────────────────────────────── */
    --h1-font-family:              "Unbounded", sans-serif;
    --h1-font-size:                128px;
    --h1-line-height:              120%;
    --h1-font-weight:              600;

    --h2-font-family:              "Unbounded", sans-serif;
    --h2-font-size:                64px;
    --h2-line-height:              100%;
    --h2-font-weight:              600;

    --h3-font-family:              "Unbounded", sans-serif;
    --h3-font-size:                40px;
    --h3-line-height:              120%;
    --h3-font-weight:              400;

    --h4-font-family:              "Unbounded", sans-serif;
    --h4-font-size:                30px;
    --h4-line-height:              110%;
    --h4-font-weight:              400;

    --h1-stati-font-family:        "Unbounded", sans-serif;
    --h1-stati-font-size:          48px;
    --h1-stati-line-height:        120%;
    --h1-stati-font-weight:        600;

    --text-font-family:            "Unbounded", sans-serif;
    --text-font-size:              24px;
    --text-line-height:            120%;
    --text-font-weight:            600;

    --text4-font-family:           "Unbounded", sans-serif;
    --text4-font-size:             16px;
    --text4-line-height:           120%;
    --text4-font-weight:           600;

    --text2-caps-font-family:      "Onest", sans-serif;
    --text2-caps-font-size:        18px;
    --text2-caps-line-height:      120%;
    --text2-caps-font-weight:      400;

    --podpisi1-caps-font-family:   "Unbounded", sans-serif;
    --podpisi1-caps-font-size:     12px;
    --podpisi1-caps-line-height:   120%;
    --podpisi1-caps-font-weight:   400;

    --text1-font-family:           "Onest", sans-serif;
    --text1-font-size:             22px;
    --text1-line-height:           120%;
    --text1-font-weight:           400;

    --text2-font-family:           "Onest", sans-serif;
    --text2-font-size:             18px;
    --text2-line-height:           120%;
    --text2-font-weight:           400;

    --podpisi-font-family:         "Onest", sans-serif;
    --podpisi-font-size:           16px;
    --podpisi-line-height:         100%;
    --podpisi-font-weight:         400;

    --podpisi1-font-family:        "Onest", sans-serif;
    --podpisi1-font-size:          12px;
    --podpisi1-line-height:        120%;
    --podpisi1-font-weight:        400;

    --text-button-font-family:     "Onest", sans-serif;
    --text-button-font-size:       24px;
    --text-button-line-height:     120%;
    --text-button-font-weight:     400;

    --text-button1-font-family:    "Onest", sans-serif;
    --text-button1-font-size:      20px;
    --text-button1-line-height:    120%;
    --text-button1-font-weight:    400;

    --text-button2-font-family:    "Onest", sans-serif;
    --text-button2-font-size:      12px;
    --text-button2-line-height:    120%;
    --text-button2-font-weight:    400;

    --text3-zifr-font-family:      "Onest", sans-serif;
    --text3-zifr-font-size:        48px;
    --text3-zifr-line-height:      120%;
    --text3-zifr-font-weight:      700;
    
    
   
--container-width: 1640px; /* 1920 - 2*140px */
--container-pad: 140px;
--gap: 1.5rem;
--radius: 8px;
--radius-sm: 4px;
--radius-lg: 16px;
--transition: 0.25s ease;
}

/* ── Сброс ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }

body {
    font-family: var(--podpisi-font-family);
    font-size: var(--podpisi-font-size);
    line-height: var(--podpisi-line-height);
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}


/* ── Глобальный запрет горизонтального скролла ───────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}


   /* ── Hover кнопки (все прозрачные с бордером) ───────────────── */
.post-card__btn:hover,
.fp-proj__btn:hover,
.header__btn:hover,
.footer__contact-btn:hover,
.blog-filter__btn:hover {
    background: var(--active);
    border-color: var(--active);
    color: var(--button);
}





/* ================================================================
   404.css
   ================================================================ */

.page-404 {
    min-height: 100vh;
    background: #0b0c0f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px;
    text-align: center;
}

.page-404__code {
    color: var(--active);
    font-family: var(--h1-font-family);
    font-size: clamp(120px, 20vw, 200px);
    font-weight: var(--h1-font-weight);
    line-height: 1;
    opacity: 0.15;
}

.page-404__title {
    color: var(--white);
    font-family: var(--h3-font-family);
    font-size: clamp(24px, 4vw, var(--h3-font-size));
    font-weight: var(--h3-font-weight);
    line-height: var(--h3-line-height);
}

.page-404__text {
    color: var(--text);
    font-family: var(--text1-font-family);
    font-size: var(--text1-font-size);
    line-height: var(--text1-line-height);
    max-width: 400px;
}

.page-404__btn {
    background: var(--active);
    padding: 20px 40px;
    color: #000000;
    font-family: var(--text-button1-font-family);
    font-size: var(--text-button1-font-size);
    font-weight: var(--text-button1-font-weight);
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}
.page-404__btn:hover { opacity: 0.85; }