/* ============================================================
   ФАРМОБОРОНА — Design Tokens (Figma canon, measured 2026-09-08)
   Источник: /home/adm-02/farmoborona/figma-20260908/canonical/
   01_RAW_FIGMA/variables.json + 02_SITE_INTEGRATION/css-token-map.md
   Порядок подключения: tokens.css -> font-onest.css -> base.css -> ...
   ============================================================ */

/* Onest подключается в font-onest.css (локальные woff2, cyrillic+latin 400/500/600/700). */

:root{
  /* Colors — exact Figma variables.json */
  --fb-green:#009294;
  --fb-green-light:#85BAAF;
  --fb-green-extra-light:#CCF2EA;
  --fb-green-disabled:#B3DFDF;
  --fb-green-disabled-text:#DAEFEC;
  --fb-black:#272D31;
  --fb-grey:#5A6E7C;
  --fb-grey-light:#A8B4BD;
  --fb-grey-blue:#809CAF;
  --fb-grey-extra-light:#F3F7FA;
  --fb-red:#F93004;
  --fb-white:#FFFFFF;

  /* Radii — exact Figma component contracts */
  --fb-radius-card:24px;      /* cards, result shells */
  --fb-radius-field:12px;     /* inputs, category rows */
  --fb-radius-toolbar:16px;   /* segmented controls, search lines */
  --fb-radius-pill:999px;     /* pills, chips, round buttons */

  /* Typography scale — Figma variables.json (Onest) */
  --fb-h1:60/62/500;          /* Main hero H1 desktop */
  --fb-h2:40/42/500;
  --fb-h3:32/34/500;
  --fb-h4:24/26/500;
  --fb-card-title:20/22/500;
  --fb-card-title-sm:18/20/500;
  --fb-text-large:18/22/400;
  --fb-text-normal:16/18/400;
  --fb-text-normal-medium:16/18/500;
  --fb-text-small:14/16/400;
  --fb-caption:12/14/400;

  /* Layout constants */
  --fb-gutter:40px;           /* 1280 AND 1024 (Figma exact); 375 -> 16px via media query */
  --fb-header-desktop:76.3968px;
  --fb-header-mobile:64px;
  --fb-section-gap:60px;

  /* Buttons — Design-System components.json */
  --fb-btn-lg:56px;
  --fb-btn-md:50px;
  --fb-btn-sm:44px;
  --fb-btn-xs:36px;
}

/* Typography token classes — use instead of ad-hoc sizes.
   .t-h1 is the MAIN hero 60/62. Services/Tools heroes use 50/52 Bold (page-scoped). */
.t-h1{font-family:"Onest",Arial,sans-serif;font-size:60px;line-height:62px;font-weight:500;letter-spacing:0}
.t-h2{font-family:"Onest",Arial,sans-serif;font-size:40px;line-height:42px;font-weight:500}
.t-h3{font-family:"Onest",Arial,sans-serif;font-size:32px;line-height:34px;font-weight:500}
.t-h4{font-family:"Onest",Arial,sans-serif;font-size:24px;line-height:26px;font-weight:500}
.t-card-title{font-family:"Onest",Arial,sans-serif;font-size:20px;line-height:22px;font-weight:500}
.t-card-title-sm{font-family:"Onest",Arial,sans-serif;font-size:18px;line-height:20px;font-weight:500}
.t-body-l{font-family:"Onest",Arial,sans-serif;font-size:18px;line-height:22px;font-weight:400}
.t-body-n{font-family:"Onest",Arial,sans-serif;font-size:16px;line-height:18px;font-weight:400}
.t-subhead{font-family:"Onest",Arial,sans-serif;font-size:16px;line-height:18px;font-weight:500}
.t-body-s{font-family:"Onest",Arial,sans-serif;font-size:14px;line-height:16px;font-weight:400}
.t-caption{font-family:"Onest",Arial,sans-serif;font-size:12px;line-height:14px;font-weight:400}

/* Gutter contract per viewport (Figma: 40px @1280/1024, 16px @375) */
@media (max-width:768px){
  :root{--fb-gutter:16px}
}

@media (max-width:1024px){
  :root{
    /* 1024 is a SEPARATE layout contract (page 944px), not a scaled 1280 */
    --fb-section-gap:48px;
  }
}