/* Tokens from DESIGN.md §2–§6. The only file allowed to hold raw colour and radius values. */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/jost-300-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/jost-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400; /* weight 400: buttons and headings (tim, v12–v13) */
  font-display: swap;
  src: url("../fonts/jost-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400; /* weight 400: buttons and headings (tim, v12–v13) */
  font-display: swap;
  src: url("../fonts/jost-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* §2 palette */
  --bg: #000000;
  --text-1: #E6E6E6;
  --text-2: #9A9A9A;
  --text-3: #7A7A7A;
  --line: #5C5C5C;
  --line-soft: #262626;
  --accent: #FFFFFF;

  /* §3 type (desktop values; phone values arrive with the mobile pass) */
  --fs-hero: min(5.8vw, 112px);
  --fs-h: 60px;
  --fs-body: 18px;
  --fs-ui: 16px;
  --fs-small: 15px;
  --fs-intro: calc(var(--fs-hero) / 2); /* phrases before soon are half size (tim) */
  --fs-sub: 30px;
  --lh-hero: 1;
  --lh-sub: 1.2;
  --fw-strong: 400; /* buttons and headings a touch bolder; everything else is 300 (tim, v12–v13) */
  --lh-h: 1.05;
  --lh-body: 1.5;
  --lh-small: 1.4;
  --track-h: -0.02em;

  /* §4 spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --container: 1280px;
  --content-x: calc(var(--card-inset) + var(--border) + var(--card-pad)); /* one text line for menu and slides */
  --nav-x: 32px; /* desktop: menu sits at the screen edges (tim, v32) */
  --cover-share: 1; /* share of a screen of scroll the black block needs to cover slide 1 */
  --nav-top: 20px;
  --nav-row: 44px;
  --card-inset: 24px;
  --card-pad: max(var(--s-8), (100vw - var(--container)) / 2 - var(--card-inset));
  --hero-cta-gap: 22px; /* moved closer again (tim, v3) */
  --hero-sub-gap: 6px;
  --dot: 5px;
  --form-pad: 40px;
  --list-pad: 24px;
  --slide3-top: 88px; /* gap from slide 2 content to the form ≈ 1/1.5 of the centred layout */
  --half-block: 480px; /* form block width on slide 3 */
  --tight: 1.7; /* gaps between text elements are divided by this (tim) */

  /* §5 shape */
  /* Buttons and form fields: 0.7 × half height, i.e. 30% less rounded than a full pill (tim, v11–v12) */
  --r-btn: 17px; /* 48px buttons */
  --r-btn-lg: 18px; /* 52px form button and fields */
  --r-lang: 13px; /* 36px language switch */
  --r-pill: 999px; /* list dots */
  --r-card: 24px;
  --border: 1px;

  /* §6 motion */
  --t-hover: 200ms ease;
  --t-in: 300ms cubic-bezier(0.2, 0, 0, 1);
  --t-out: 200ms cubic-bezier(0.4, 0, 1, 1);
  --t-reveal: 600ms cubic-bezier(0.2, 0, 0, 1);
  --t-video-out: 700ms cubic-bezier(0.4, 0, 1, 1);
  --t-video-in: 900ms cubic-bezier(0.2, 0, 0, 1);
  --hero-shade: 40%; /* bottom fade on the video (tim, v29) */
  --hero-dim: 0.65; /* looped video is 35% darker (tim) */
  --hero-scroll-dim: 0.8; /* how dark slide 1 gets under the rising block (tim, v7) */
}

/* Tablet (768–1023px) */
@media (max-width: 1023px) {
  :root {
    --fs-hero: clamp(30px, 9vw, 72px);
    --fs-h: 44px;
      --fs-sub: 24px;
    --content-x: 40px;
    --nav-x: var(--content-x);
    --nav-top: calc(24px + env(safe-area-inset-top));
    --hero-cta-gap: 20px;
  }
}

/* Phone (up to 767px): DESIGN.md §3–§4 phone values */
@media (max-width: 767px) {
  :root {
    --fs-h: 36px;
      --fs-body: 17px;
    --fs-sub: 20px;
    --content-x: 20px;
    --cover-share: 0.2415; /* 2.3 × 1.8 ≈ 4.1× faster on phones (tim, v32–v33) */
    --nav-top: calc(34px + env(safe-area-inset-top));
    --form-pad: 24px;
    --r-card: 20px;
  }
}