/* ==========================================================================
   Design tokens — portfolio
   Значения-заглушки. Уточняются по макету в Figma.
   Всё, что переиспользуется, живёт здесь и подключается через var(--token).
   ========================================================================== */

/* ------- Fonts: IBM Plex Mono (локальные файлы, woff2, font-display: swap) ------- */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibmplexmono-regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/ibmplexmono-semibold.woff2") format("woff2");
}

:root {
  /* ---------------- Typography ---------------- */
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Масштаб из Figma — всего 4 кегля (моно, компактный).
     Все текстовые стили в макете: IBM Plex Mono Regular, line-height 100%. */
  --font-size-26: 26px;          /* крупный заголовок на странице кейса */
  --font-size-20: 20px;
  --font-size-16: 16px;
  --font-size-12: 12px;
  --font-size-10: 10px;

  /* Семантические алиасы поверх реального масштаба */
  --font-size-h1: var(--font-size-20);      /* Main / section title */
  --font-size-h2: var(--font-size-20);
  --font-size-h3: var(--font-size-16);
  --font-size-h4: var(--font-size-12);       /* подзаголовок-метка */
  --font-size-body: var(--font-size-16);
  --font-size-small: var(--font-size-12);
  --font-size-caption: var(--font-size-10);

  /* В Figma line-height = «100%» — это натуральные метрики IBM Plex Mono.
     Задаём в px попарно к кеглю: доли (12 × 1.3 = 15.6) копят расхождение
     с макетом, целые px совпадают точно. */
  --line-height-26: 34px;
  --line-height-20: 26px;
  --line-height-16: 21px;
  --line-height-12: 16px;
  --line-height-10: 13px;

  /* Запасной коэффициент для произвольного текста */
  --line-height-base: 1.3;
  --line-height-tight: var(--line-height-base);
  --line-height-heading: var(--line-height-base);
  --line-height-body: var(--line-height-base);

  /* В макете letter-spacing = 0 везде */
  --letter-spacing-tight: 0;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;             /* только для eyebrow-меток */

  /* ---------------- Colors (из Figma) ---------------- */
  --color-bg: #ffffff;                       /* white */
  --color-surface: #f4f5f6;                  /* grey */
  --color-surface-hover: #eceef0;            /* производное (нет в Figma) */

  --color-text: #151515;                     /* black */
  --color-text-secondary: #97a0a9;           /* dark gray */
  --color-text-muted: #97a0a9;               /* dark gray */
  --color-text-inverse: #ffffff;             /* white */

  --color-accent: #2f46f5;                   /* blue accent */
  --color-accent-hover: #2135d4;             /* производное (нет в Figma) */

  --color-border: #61616133;                 /* border (≈20% alpha) */
  --color-border-strong: #6161614d;          /* производное — плотнее */

  --color-focus: #2f46f5;                    /* blue accent */

  /* ---------------- Spacing scale (4pt) ---------------- */
  --space-2: 2px;
  --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-96: 96px;

  /* ---------------- Radii ---------------- */
  --radius-24: 24px;             /* из Figma (числовой токен 24) — скриншоты в карточке */
  --radius-34: 34px;             /* скриншоты с обводкой в коллаже */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------------- Layout ---------------- */
  --container-max: 1232px;
  --container-gutter: 24px;      /* поля по бокам между брейкпоинтами */
  --container-gutter-mobile: 16px;

  /* Брейкпоинты (для справки; в @media используем явные px) */
  --bp-desktop: 1280px;
  --bp-collapse: 768px;          /* ниже — одна колонка / мобильная раскладка */
  --bp-mobile: 375px;

  /* ---------------- Header / navigation ---------------- */
  --nav-columns: 5;              /* лого + 4 пункта */
  /* Сдвиг рукописной пометки от центра пункта. По умолчанию — по центру,
     отдельные пункты подстроены вручную. */
  --nav-mark-offset-x: 0px;
  --nav-mark-offset-y: 0px;

  --nav-mark-link-x: 2.5px;      /* левый край пометки −10px от текста, как в макете */
  --nav-mark-link-y: 4px;
  --nav-mark-resume-x: 2px;
  --nav-mark-resume-y: 2px;
  --nav-column-gap: 33px;        /* из макета: 5×220 + 4×33 = 1232 */
  --header-padding-top: var(--space-24);
  --logo-width: 48px;
  --logo-height: 26px;

  /* Мобильное меню (из макета) */
  --menu-width: 280px;
  --menu-padding: var(--space-20);
  --menu-item-gap: var(--space-16);
  --menu-list-offset: 27px;      /* от крестика до первого пункта (макет: y=75) */
  --burger-size: 28px;
  --scrim-color: rgba(21, 21, 21, 0.25);

  /* ---------------- Hero ---------------- */
  --hero-max-width: 420px;       /* ширина текстовой колонки первого экрана */
  --hero-offset-top: 67px;       /* от низа навбара до тезиса */
  --hero-text-gap: var(--space-8); /* между тезисом и описанием */

  /* Рукописная линия под словом «впервые» в тезисе (позиция из макета) */
  --hero-underline-left: 251px;
  --hero-underline-top: 49px;

  /* Пометка «упрощаю людям жизнь». Отрисована в размер макета (ширина 66px,
     см. .hero__note). Позиция сохраняет центр из макета — тот же, что и при
     прежнем размере 50×43 (было left 430 / top -30 при центре 455 / -8.5). */
  --hero-note-left: 422px;
  --hero-note-top: -37px;

  /* Рукописные SVG-пометки: наклон задаётся здесь, не в файле */
  --note-rotate: -6deg;

  /* ============ ДВИЖЕНИЕ — все тайминги здесь ============ */

  /* Прорисовка пометок «от руки» */
  --note-draw-duration: 1s;
  --note-draw-ease: cubic-bezier(0.33, 0, 0.2, 1); /* ease-out: быстро стартует, мягко тормозит */
  --note-draw-stagger: 0.12s;                      /* между штрихами внутри одной пометки */
  --note-draw-budget: 2s;                          /* потолок времени одной пометки:
     у многоштриховых надписей шаг сжимается, чтобы фраза не писалась вечность */

  /* Появление пометок внутри блока */
  --notes-lead: 0.8s;    /* пауза после попадания блока во вьюпорт */
  --notes-step: 0.4s;    /* между пометками одного блока (порядок — data-order) */
  --notes-lead-reveal: 0.3s; /* пауза, если блок перед этим проявлялся:
     ожидание уже отработало само проявление, длинная пауза сверху не нужна */

  /* Большое «сердце» в первом экране: один раз рисуется и стирается.
     Стартует через 1с после того, как дорисовались first_time (~1.8с)
     и upro (~3.2с) — то есть на 4.2с. */
  --hero-heart-duration: 10s;
  --hero-heart-delay: 4.2s;

  /* Проявление контента при скролле */
  --reveal-duration: 1.1s;
  --reveal-ease: cubic-bezier(0.33, 0, 0.2, 1);
  --reveal-shift: 28px;  /* сдвиг снизу вверх */
  --reveal-stagger: 0.18s; /* между элементами одной группы */

  /* ---------------- Sections ---------------- */
  --section-gap: 64px;                  /* между секциями */
  --section-header-gap: var(--space-4); /* заголовок → подпись */
  --section-content-gap: var(--space-16); /* шапка секции → контент */

  /* ---------------- Case card (из макета) ---------------- */
  --card-pic-height: 470px;      /* серая панель */
  --card-screen-width: 243px;    /* скриншот телефона */
  --card-screen-height: 526px;   /* выше панели — обрезается намеренно */
  --card-screens-offset: 86px;   /* сдвиг центра скриншотов вниз */
  --cases-gap: var(--space-12);  /* между карточками в ряду */
  --card-underline-offset: 5px;  /* линия под описанием на hover, от базовой линии */
  --card-hover-scrim: rgba(21, 21, 21, 0.05); /* затемнение панели на hover */

  /* ---------------- Side quests: крупные проекты ---------------- */
  --project-pic-height: 400px;
  --project-screen-width: 592px;
  --project-screen-height: 496px;
  --project-screen-offset-x: -31px;      /* сдвиг экрана от центра панели */
  --project-screen-offset-x-alt: 31px;   /* у второго проекта — в другую сторону */
  --project-screen-offset-y: 88px;
  --projects-gap: var(--space-12);
  --project-title-narrow: 88px;  /* узкое название на мобиле (Трейдинг платформа) */

  /* ---------------- Side quests: коллаж ---------------- */
  --collage-gap: var(--space-12);
  --collage-unit: 272px;         /* базовая плитка */
  --collage-col-narrow: 96px;    /* добор до широкой плитки: 272+12+96 = 380 */
  --collage-big-height: 556px;   /* высота нижнего ряда крупных плиток */
  --collage-big-side: 378px;     /* sports и music по краям; currenc посередине тянется */
  --collage-offset: 40px;        /* от крупных проектов до коллажа */
  --section-gap-lg: 120px;       /* увеличенный отступ секции (сайд квесты, обо мне) */

  /* ---------------- Обо мне ---------------- */
  --about-text-width: 460px;     /* ширина абзаца на десктопе */
  --about-card-size: 260px;      /* фото в ленте */
  --about-strip-gap: var(--space-12);
  /* Пометка «воина» привязана к самому слову (см. .about-word), позиция —
     не токенами. Остаётся только наклон. */
  --about-note-rotate: 0deg;     /* в макете не повёрнута — она подчёркивает слово */

  /* ---------------- Страница кейса ---------------- */
  /* Шапка кейса — та же карточка, но крупнее и с тремя экранами */
  --case-hero-panel-height: 507px;
  --case-hero-screen-width: 264px;
  --case-hero-screen-height: 572px;
  --case-hero-screens-gap: var(--space-24);
  --case-hero-gap: var(--space-32);      /* панель → подпись (у обычной карточки 16) */
  --case-hero-title-size: var(--font-size-26);
  --case-hero-title-line: var(--line-height-26);

  --case-hero-offset: var(--hero-offset-top); /* от навбара до шапки кейса */
  --case-link-gap: var(--space-8);       /* от шапки до ссылки */
  --case-content-gap: var(--space-32);   /* от ссылки до контента */
  --case-section-gap: 80px;              /* между секциями разбора */

  /* Секция разбора */
  --case-panel-height: 604px;
  --case-panel-padding: 0px;
  --case-screen-width: 231px;
  --case-screen-height: 500px;
  --case-screens-gap: var(--space-24);
  --case-block-gap: var(--space-24);     /* от панели до текста */
  --case-text-width: 558px;              /* колонка текста */
  --case-text-gap: var(--space-32);      /* между колонками */
  --case-item-gap: var(--space-8);       /* заголовок → текст */
  --star-item-gap: var(--space-32);      /* между частями STAR */


  /* ---------------- Футер ---------------- */
  --footer-gap: 130px;           /* от секции «обо мне» до футера */
  --footer-padding-bottom: 53px; /* воздух под футером (из макета) */
  --footer-contacts-width: 200px;/* колонка контактов на мобиле */
  --footer-item-gap: var(--space-16);

  /* ---------------- Effects (тени не заданы в Figma — заглушки) ---------------- */
  --shadow-card: 0 1px 2px rgba(21, 21, 21, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(21, 21, 21, 0.12);

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* Переход между страницами (View Transitions) */
  --page-transition-duration: 0.4s;

  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;
}