/*
  Design tokens — Kirill Bush / in-buro.com

  Single source of truth for color and typography across the portfolio site
  and its sub-pages (e.g. /cv/). Documented in Storybook (see /storybook).

  - "Brand" tokens are copied verbatim from the live Webflow export's compiled
    stylesheet (_assets/.../portfolio-*.webflow.shared.*.css) — this file does
    NOT replace that stylesheet, it documents and re-exposes the same values
    so new pages (like /cv/) can consume them without redefining them.
  - "CV" tokens are new, introduced for the /cv/ resume pages. They're kept in
    a separate documented block below so it's clear which values are original
    brand tokens vs. additions made for the CV work.
*/

@font-face{
  font-family:"Ttfirsneue";
  src:url("_assets/cdn.prod.website-files.com/64eedddf6d70e2e4a13cf0fc/64eedddf6d70e2e4a13cf2ca_TTFirsNeue-DemiBold.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
/* Medium cut of the same display face, converted to woff2 from the .ttf that
   shipped with the brand assets. Used where a headline number should carry the
   family without the weight of DemiBold. */
@font-face{
  font-family:"Ttfirsneue";
  src:url("_assets/fonts/TTFirsNeue-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
/*
  Body face: Graphik LCG (Latin + Cyrillic + Greek), served as woff2 with a woff
  fallback. It replaces the Latin-only Graphik .otf that used to sit here.

  Why LCG: /cv/ru/ is ~4300 Cyrillic characters and the Latin cut has zero
  glyphs in U+0400-04FF, which forced the CV onto an uncontrolled system stack.
  LCG carries 96 Cyrillic and 73 Greek glyphs, so one face now covers both
  languages and the CV no longer renders differently per operating system.

  Two things to know before touching this:
  - LCG runs ~2.2% wider than the Latin cut at Regular and Semibold, ~0.75% at
    Medium. Vertical metrics are identical, so line heights and block heights
    are unaffected; only horizontal wrapping can shift by a word.
  - The family is still called "Graphic" (the name the live Webflow export
    uses). Renaming it would mean touching every stylesheet, so the name stays
    and only the source files change.
*/
@font-face{
  font-family:"Graphic";
  src:url("_assets/fonts/GraphikLCG-Regular.woff2") format("woff2"),
      url("_assets/fonts/GraphikLCG-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Graphic";
  src:url("_assets/fonts/GraphikLCG-Medium.woff2") format("woff2"),
      url("_assets/fonts/GraphikLCG-Medium.woff") format("woff");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Graphic";
  src:url("_assets/fonts/GraphikLCG-Semibold.woff2") format("woff2"),
      url("_assets/fonts/GraphikLCG-Semibold.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
/* Deliberately no 700. Semibold is the heaviest weight the design uses — a real
   Bold was tried on the CV and read as too heavy, flattening the hierarchy
   between company name and job title. Nothing should request weight 700 on this
   family; if something does, the browser will fake it by smearing Semibold. */

:root{
  /* ---- Brand color tokens (mirror the live site's custom properties) ---- */
  --black:#000000;
  --white:#FFFFFF;
  --black-72:#000000B8;      /* 72% black — muted body text on light backgrounds */
  --white-72:#FFFFFFB8;
  --white-36:#FFFFFF5C;
  --white-20:#FFFFFF33;
  --transparent:#FFFFFF00;

  --blue-violet:#6F01FF;     /* primary site accent — buttons, interactive UI */
  --blue-violet-2:#9847FF;   /* lighter accent variant / hover */
  --blue-violet-3:#9847FF70; /* 44% alpha */
  --blue-violet-4:#9847FF42; /* 26% alpha */

  --dark-grey:#5D6669;       /* secondary/muted text */
  --dark-grey-32:#5D666952;  /* 32% alpha */
  --dark-grey-48:#5D66697A;  /* 48% alpha */

  --light-gray:#C8DADF;      /* light surfaces / dividers on dark sections */
  --light-gray-24:#C8DADF52; /* 24% alpha */
  --middle-gray:#979D9F;

  /* ---- Brand typography tokens ---- */
  --font-headline:"Ttfirsneue","Trebuchet MS","Segoe UI",Helvetica,Arial,sans-serif; /* display font, weights 500 and 600. Full Cyrillic coverage — safe for EN + RU. */
  --font-body-brand:"Graphic","Segoe UI",Helvetica,Arial,sans-serif; /* site's body font — now Graphik LCG. Latin + Cyrillic + Greek, safe for EN and RU alike. */
  --font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* OS stack. No longer needed for Cyrillic; kept only as a last-resort fallback. */

  /* ---- CV-specific additions (not part of the original brand palette) ---- */
  --cv-ink:#231F20;           /* CV document ink — distinct from --black, matches the original CV template */
  --cv-ink-56:rgba(35,31,32,.56);
  --cv-ink-40:rgba(35,31,32,.4);
  --cv-ink-16:rgba(35,31,32,.14);
  --cv-link:#0374A0;          /* CV hyperlink color — intentionally distinct from --blue-violet; violet is reserved for buttons, this blue is the CV document's own link convention */
  --cv-paper:#F7F7F7;
  --cv-line:#E4E1DC;

  /* ---- Type scale (used by /cv/; recommended baseline for future pages) ---- */
  --fs-2xs:14px;
  --fs-xs:15px;
  --fs-sm:16px;
  --fs-eyebrow:15px;
  --fs-base:19px;
  --fs-md:18px;
  --fs-lg:16px;
  --fs-display:clamp(40px,9vw,114px);
}