/* Моя траєкторія — generated from tokens.json */
/* Собрано для канваса из tokens.json системы https://claude.ai/artifact/8AmfXCHEUG6hmVbW8BF6e9 (версия 1792157428-8aa5): страница системы строит этот файл сама и не публикует его. */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Miratrix ua";
  src: url("fonts/Miratrix-Normal-UA.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color */
  --black: #050505;
  --white: #ffffff;
  --green: #00dd64;
  --green-dark: #00bd55;
  --ink: #202020;
  --muted: #6b6b6b;
  --soft: #f2f3f1;
  --tint: #fafafa;
  --plate: #f3f3f3;
  --line: rgba(0, 0, 0, 0.16);
  --hairline: rgba(0, 0, 0, 0.07);
  --on-green-muted: rgba(5, 5, 5, 0.72);
  --on-green-faint: rgba(5, 5, 5, 0.6);
  --on-photo: rgba(255, 255, 255, 0.82);
  --on-photo-faint: rgba(255, 255, 255, 0.4);
  --scrim: rgba(5, 5, 5, 0.86);
  --photo-fallback: #0d1a10;

  /* type families */
  --font-sans: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Miratrix ua", Montserrat, sans-serif;

  /* spacing */
  --gap-2xs: 6px;
  --gap-xs: 10px;
  --gap-sm: 14px;
  --gap-md: 18px;
  --title-gap: 24px;
  --kicker-gap: 28px;
  --card-pad-y: 28px;
  --card-pad-x: 24px;
  --col-gap-s: 48px;
  --col-gap: 60px;
  --actions-gap: 52px;
  --button-pad-y: 14px;
  --button-pad-x: 24px;
  --button-h: 54px;
  --header-height: 88px;
  --header-height-sm: 76px;
  --max: 1440px;
  --x-min: 20px;
  --x-max: 96px;
  --y-sm: 52px;

  /* radius */
  --radius: 0px;
  --radius-bubble: 22px;
  --radius-bubble-tail: 4px;
  --radius-social: 11px;
  --radius-round: 50%;

  /* shadow */
  --shadow-menu: 0 18px 45px rgba(0, 0, 0, 0.12);
  --shadow-drawer: -14px 0 32px rgba(0, 0, 0, 0.12);

  /* border */
  --rule: 1px;
  --rule-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 4px;

  /* fluid */
  --x: clamp(20px, 6vw, 96px);
  --y: clamp(56px, 5.4vw, 88px);
  --head-gap: clamp(32px, 3.4vw, 52px);
  --block-gap: clamp(36px, 4vw, 56px);
  --sub-gap: clamp(40px, 4vw, 62px);
  --row-gap: clamp(26px, 2.8vw, 40px);
  --plate-pad-y: clamp(24px, 2.8vw, 36px);
  --plate-pad-x: clamp(22px, 3vw, 40px);
  --card-pad: clamp(22px, 2.4vw, 30px);
  --fs-display: clamp(42px, 5.6vw, 86px);
  --fs-page-title: clamp(38px, 4.4vw, 66px);
  --fs-h2: clamp(44px, 5.6vw, 84px);
  --fs-h2-final: clamp(34px, 4.4vw, 62px);
  --fs-sub-head: clamp(26px, 2.8vw, 38px);
  --fs-h3: clamp(24px, 2.2vw, 34px);
  --fs-card-title: clamp(20px, 2vw, 27px);
  --fs-band: clamp(30px, 4.4vw, 66px);
  --fs-quote: clamp(20px, 2.2vw, 34px);
  --fs-voice: clamp(19px, 1.8vw, 27px);
  --fs-question: clamp(19px, 1.8vw, 27px);
  --fs-claim: clamp(19px, 1.9vw, 26px);
  --fs-bubble: clamp(18px, 1.5vw, 23px);
  --fs-lead: clamp(18px, 1.5vw, 23px);
  --fs-item: clamp(18px, 1.5vw, 23px);
  --fs-price: clamp(30px, 3.2vw, 44px);
  --fs-number-l: clamp(22px, 2.4vw, 30px);
}