/* ─────────────────────────────────────────────────────────────
   Токены карьерамолодых.рф. Источник — design/SPEC.md.
   Значений вне этого файла быть не должно: увидели в вёрстке
   голый hex или произвольный px — значит, токен забыли завести.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Фирменные цвета. Других нет ── */
  --red: #FF443B;      /* акцент и CTA: плашка с белым текстом */
  /* Тот же красный, затемнённый до контраста. Фирменный #FF443B
     на белом даёт 3,42:1 — для текста мало, нужно 4,5:1 (WCAG AA).
     На чёрном фирменный проходит с запасом (6,14:1), поэтому
     на тёмном фоне остаётся он. Тон и насыщенность не тронуты. */
  --red-ink: #DE0A00;  /* красный текст на светлом фоне   5,06:1 */
  --cyan: #99F7FF;     /* подложки и окна возможностей, текст поверх — чёрный */
  --black: #000000;
  --white: #FFFFFF;

  /* ── Нейтральные. Ровно пять, роли закреплены ── */
  --ink-2: #1A1A1A;         /* вторичный текст на белом      17,4:1 */
  --ink-3: #4A4A4A;         /* метки, крошки, даты            8,9:1 */
  --line: #E6E6E6;          /* все рамки и разделители на белом */
  --surface: #F2F2F2;       /* заливки-подложки */
  --ink-inverse: #C9C9C9;   /* вторичный текст на чёрном     12,7:1 */
  --line-inverse: rgb(201 201 201 / 28%);  /* разделитель на чёрном */

  /* ── Типографика ── */
  --font: 'Rosmol Sans', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --w-book: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  --fs-hero: clamp(38px, 5.4vw, 86px);
  --fs-h1: clamp(30px, 3.6vw, 62px);
  --fs-h1-page: clamp(30px, 2.9vw, 42px);
  --fs-h2: clamp(28px, 2.6vw, 46px);
  --fs-h3: clamp(20px, 1.9vw, 28px);
  --fs-lead: clamp(16px, 1.3vw, 19px);
  --fs-body: clamp(16px, 1.25vw, 18px);
  --fs-small: clamp(13px, 1vw, 15px);
  --fs-micro: 13px;

  --lh-hero: 1.02;
  --lh-head: 1.06;
  --lh-h3: 1.15;
  --lh-lead: 1.35;
  --lh-body: 1.45;
  --lh-small: 1.4;

  /* Трекинг: у основного текста +0.03em, у заголовков нет */
  --track-body: 0.03em;
  --track-caps: 0.05em;

  /* ── Отступы ── */
  --gutter: clamp(18px, 3.9vw, 56px);       /* горизонтальные поля секции */
  --section-y: clamp(40px, 5.5vw, 80px);    /* вертикальные поля секции */
  --section-y-lg: clamp(44px, 6.2vw, 90px);
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: clamp(20px, 3vw, 44px);
  --content-max: 1440px;

  /* ── Радиусы: по крупности элемента ── */
  --r-plate: 3px;      /* плашки логотипа */
  --r-cover: 4px;      /* обложки карточек */
  --r-control: 12px;   /* поля, кнопки, бейджи. Кнопки прямоугольные, не пилюли */
  --r-control-sm: 10px;
  --r-card: 20px;      /* крупные карточки и блоки */
  --r-card-lg: 32px;   /* карточки направлений */

  /* ── Тени ── */
  --shadow-card: 0 14px 30px rgb(0 0 0 / 10%);
  --shadow-lift: 0 16px 36px rgb(0 0 0 / 14%);
  --shadow-page: 0 24px 60px rgb(0 0 0 / 14%);
  --shadow-pin: 0 2px 10px rgb(0 0 0 / 14%);

  /* ── Движение ── */
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);
  --t-fast: 0.2s;
  --t-hover: 0.35s;
  --t-card: 0.45s;
  --t-reveal: 0.55s;
  --t-slow: 0.7s;
  --t-appear: 0.8s;   /* выезд блока при появлении, длиннее ховерных */

  /* ── Фокус: виден всегда, на всех интерактивных ── */
  --focus-width: 3px;
  --focus-offset: 3px;

  /* ── Логотип-лока́п ────────────────────────────────────────
     Просвет задан константой, перекрытие из неё вычисляется:
       просвет = pad-bottom + overlap − (кегль + 2 × padding-v)
     Отсюда overlap = просвет + высота_красной − pad-bottom.
     Меняете кегль — просвет остаётся 6px сам, без пересчёта руками. */
  --logo-gap: 6px;
  --logo-main-size: 32px;
  --logo-main-pad-v: 7px;
  --logo-main-pad-h: 16px;
  --logo-sub-size: 13px;
  --logo-sub-pad-t: 6px;
  --logo-sub-pad-h: 12px;
  --logo-sub-pad-b: 20px;
  --logo-tilt-sub: 1.8deg;
  --logo-tilt-main: -1.6deg;
  --logo-bleed: 12px;          /* сдвиг красной плашки вправо */
  --logo-safe: 23px;           /* охранное поле = половина высоты красной */

  --logo-main-h: calc(var(--logo-main-size) + 2 * var(--logo-main-pad-v));
  --logo-overlap: calc(var(--logo-gap) + var(--logo-main-h) - var(--logo-sub-pad-b));
}

/* Мобильный лока́п: обе плашки видны, циановая держит кегль 13px —
   мельче наименование учреждения нечитаемо. Уменьшается только красная,
   ради высоты шапки. Просвет пересчитается сам и останется 6px. */
@media (max-width: 900px) {
  :root {
    --logo-main-size: 24px;
    --logo-main-pad-v: 5px;
    --logo-main-pad-h: 12px;
    --logo-sub-pad-t: 5px;
    --logo-sub-pad-h: 10px;
    --logo-sub-pad-b: 16px;
    --logo-bleed: 10px;
    --logo-safe: 10px;
  }
}