/*
  Design tokens — единый источник правды.
  Все значения сверены с Figma (file dSiAZH6j9CCg3E60sDPQkQ, узлы 187:77756/77777/77900/77949).

  Правило: если в макете встречается «непоследовательность» одной роли — закрепляется
  каноничное значение и используется везде. Точечные правки не у элемента, а у токена.

  Адаптив:
    • Типографика и радиусы в rem — масштабируются вместе с :root font-size.
    • На мобильных :root font-size уменьшается → все размеры пропорционально сжимаются.
    • Падинг страницы и bezel планшета также переопределяются на мобиле.
*/

/* ============ Кастомные шрифты ============
   font-display: block — браузер не отрисовывает текст в fallback-шрифте,
   а ждёт загрузки Custom Serif (до ~3 c). В связке с preload в <head>
   каждой страницы шрифт приходит в первую очередь, и тайтлы появляются
   уже с нужным начертанием, без мерцания засечного fallback'а
   (Georgia/Times) при FOUT-swap'е.
   ============================================ */
@font-face {
    font-family: "Custom Serif";
    src: url("../assets/fonts/Custom_Serif-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    /* ============================================================
       Colors
       ============================================================ */
    --color-bg:                #000000;
    --color-surface:           #0A0A0A;
    --color-text-primary:      #FFFFFF;
    --color-text-secondary:    rgba(255, 255, 255, 0.7);
    --color-text-muted:        rgba(255, 255, 255, 0.5);

    /* Акцент шапки (CV / Telegram / LinkedIn кнопки) */
    --color-accent:            #7592F0;
    --color-accent-surface:    rgba(117, 146, 240, 0.16);

    /* Placeholder-цвет под медиа-тайлы пока не залиты фото/видео */
    --color-media-placeholder: #E6E6E6;

    /* ============================================================
       Typography — families
       ============================================================ */
    --font-family-display:     "Custom Serif", Georgia, "Times New Roman", serif;
    --font-family-primary:     "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* ============================================================
       Typography — sizes (rem, база = 16px)
       Цифры в комментах — фактический пиксельный размер на десктопе.
       На мобиле :root font-size уменьшается → все эти размеры
       пропорционально становятся меньше.
       ============================================================ */
    --font-size-display:       4rem;       /* 64 */
    --font-size-h1:            2.5rem;     /* 40 — название проекта */
    --font-size-h2:            2.25rem;    /* 36 — заголовок секции кейса */
    --font-size-h3:            1.5rem;     /* 24 */
    --font-size-body-lg:       1.375rem;   /* 22 — подзаголовок hero */
    --font-size-body:          1.125rem;   /* 18 — описание/пресса/статы */
    --font-size-body-sm:       1rem;       /* 16 — кнопки шапки */
    --font-size-caption:       0.875rem;   /* 14 */

    /* ============================================================
       Typography — line-heights & weights
       ============================================================ */
    --line-height-display:     1.1;
    --line-height-snug:        1.25;
    --line-height-body:        1.47;

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

    /* ============================================================
       Spacing — px (намеренно, чтобы компоновка не «плавала»
       вместе со шрифтом).
       ============================================================ */
    --space-4:                 4px;
    --space-8:                 8px;
    --space-12:                12px;
    --space-16:                16px;
    --space-20:                20px;
    --space-24:                24px;
    --space-32:                32px;
    --space-40:                40px;
    --space-48:                48px;
    --space-64:                64px;
    --space-80:                80px;
    --space-120:               120px;
    --space-240:               240px;

    /* ============================================================
       Radii — rem (масштабируются на мобиле)
       ============================================================ */
    --radius-sm:               0.5rem;     /* 8 */
    --radius-button:           0.875rem;   /* 14 */
    --radius-md:               1rem;       /* 16 */
    --radius-card:             1.5rem;     /* 24 */
    --radius-tile:             1.875rem;   /* 30 */
    --radius-hero:             2rem;       /* 32 */

    /* ============================================================
       Layout
       Падинг страницы переопределяется на мобиле (см. media query).
       ============================================================ */
    --hero-width:              600px;
    --card-width:              600px;
    --media-row-width:         1000px;
    --content-max-width:       1440px;
    --content-padding-x:       24px;

    /* ============================================================
       Devices — phone + tablet.
       Размеры рамки экрана + параметры bezel (внешней рамки PNG).
       Все пары значений выкладываем переменными, чтобы на мобиле
       было достаточно их переопределить — компонент сам уменьшится.
       ============================================================ */
    --device-phone-width:        250.215px;
    --device-phone-height:       544px;
    --device-phone-bezel-top:    -14.32px;
    --device-phone-bezel-left:   -14.94px;
    --device-phone-bezel-width:  280.092px;
    --device-phone-bezel-height: 572.632px;

    --device-tablet-width:        540px;
    --device-tablet-height:       372.198px;
    --device-tablet-bezel-top:    -23.65px;
    --device-tablet-bezel-left:   -24.55px;
    --device-tablet-bezel-width:  589.091px;
    --device-tablet-bezel-height: 419.504px;

    /* Мелкие телефоны для блока «сборная солянка» (Figma 198:14532). */
    --device-phone-sm-width:        118px;
    --device-phone-sm-height:       256px;
    --device-phone-sm-bezel-top:    -6.73px;
    --device-phone-sm-bezel-left:   -6.9px;
    --device-phone-sm-bezel-width:  131.808px;
    --device-phone-sm-bezel-height: 269.474px;

    --device-phone-md-width:        155px;
    --device-phone-md-height:       336px;
    --device-phone-md-bezel-top:    -8.84px;
    --device-phone-md-bezel-left:   -9.25px;
    --device-phone-md-bezel-width:  173.507px;
    --device-phone-md-bezel-height: 353.684px;
}

/* ============================================================
   Адаптив

   Брейкпоинты:
     ≤ 1023px — планшет (typescale 93.75% = база 15px)
     ≤  767px — мобила  (typescale 87.5%  = база 14px,
                         падинг страницы 16, планшет уменьшается)
   ============================================================ */

@media (max-width: 1023px) {
    html { font-size: 93.75%; }
}

@media (max-width: 767px) {
    html { font-size: 87.5%; }

    :root {
        --content-padding-x: 16px;

        /* Планшет на мобиле — уменьшенные значения (ровно ×0.47 от исходных). */
        --device-tablet-width:        320px;
        --device-tablet-height:       220.5px;
        --device-tablet-bezel-top:    -14px;
        --device-tablet-bezel-left:   -14.55px;
        --device-tablet-bezel-width:  349.1px;
        --device-tablet-bezel-height: 248.5px;
    }
}