/* ==========================================================================
   IR Systems — design tokens
   The only place colours, sizes and spacing are defined. Nothing on the site
   may introduce a value that is not declared here.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Served locally as woff2, split latin / cyrillic so each page only pulls the
   subsets it actually paints. Onest and Golos Text are variable fonts, so a
   single file covers every weight we use.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../fonts/onest-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: 'Golos Text';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/golos-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jbmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jbmono-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 {
  /* --- Colour ------------------------------------------------------------
     paper + ink hold ~85% of the surface, steel + line ~12%,
     infra never more than 3%.
     --------------------------------------------------------------------- */
  --paper: #E9EBEC;   /* page background — cold light grey, not beige */
  --ink: #14161A;     /* body text, graphite — 15.1:1 on paper */
  --deep: #0B0C0E;    /* dark section background */
  --steel: #656A70;   /* secondary text, captions — 4.6:1 on paper */
  --line: #C9CDD0;    /* rules, borders, dividers — never used for text */
  --infra: #A81F17;   /* accent, infrared — 6.1:1 on paper */

  /* infra is only 2.7:1 on deep, so the accent is lightened for dark
     sections — 4.6:1 there. */
  --infra-on-deep: #DA453A;

  /* The inline monogram reads its two colours from here, so the one <symbol>
     repaints itself correctly inside a dark section. */
  --logo-ink: var(--ink);
  --logo-tick: var(--infra);

  /* --- Type families ---------------------------------------------------- */
  --ff-display: 'Onest', 'Segoe UI', system-ui, sans-serif;
  --ff-text: 'Golos Text', 'Segoe UI', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* --- Type scale ------------------------------------------------------- */
  --fs-display: clamp(44px, 7vw, 76px); /* lh 1.02, ls -0.03em, Onest 800 */
  --fs-h2: clamp(30px, 4vw, 40px);      /* lh 1.12, ls -0.02em, Onest 700 */
  --fs-h3: 22px;                        /* lh 1.3,  Golos Text 500 */
  --fs-body: 17px;                      /* lh 1.65, Golos Text 400 */
  --fs-small: 15px;                     /* lh 1.5,  Golos Text 400 */
  --fs-label: 12px;                     /* lh 1.2,  JetBrains Mono 500 */

  --lh-display: 1.02;
  --lh-h2: 1.12;
  --lh-h3: 1.3;
  --lh-body: 1.65;
  --lh-small: 1.5;
  --lh-label: 1.2;

  --ls-display: -0.03em;
  --ls-h2: -0.02em;
  --ls-label: 0.09em;

  /* --- Spacing, eight-step ---------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 160px;

  /* --- Grid ------------------------------------------------------------- */
  --grid-max: 1240px;
  --gutter: var(--s-4);
  --pad: var(--s-4);        /* side padding, 64px from 1024px up */
  --section-y: var(--s-6);  /* vertical section rhythm, 160px on desktop */

  /* --- Shape ------------------------------------------------------------
     Almost square. No shadows anywhere: layers are separated by a 1px line
     and by background colour only.
     --------------------------------------------------------------------- */
  --radius: 2px;
  --hairline: 1px solid var(--line);
}

@media (min-width: 1024px) {
  :root {
    --pad: var(--s-6);
    --section-y: var(--s-8);
  }
}