/* Reputation Engine - design tokens v1.0 */

/* ===== Шрифты (self-host) =====
   Локальные копии Unbounded и IBM Plex Sans/Mono. Google Fonts не
   подключаем: запрос к fonts.googleapis.com передаёт IP и User-Agent
   посетителя в Google LLC на каждом просмотре, до cookie-баннера, -
   это трансграничная передача, которую раздел 10 политики обработки
   ПДн отрицает. Убрано 26.07.2026 вместе с GA4.

   Unbounded и IBM Plex Sans - вариативные (вес по оси wght),
   IBM Plex Mono - статические 400/500. Подмножества latin,
   latin-ext, cyrillic, cyrillic-ext; unicode-range сохранён от
   Google, поэтому браузер грузит только нужные файлы.
   Обе гарнитуры под SIL Open Font License - self-host разрешён.
   ============================================================= */

/* Unbounded 400 800 - latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/unbounded-var-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;
}

/* Unbounded 400 800 - latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/unbounded-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Unbounded 400 800 - cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/unbounded-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Unbounded 400 800 - cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/unbounded-var-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* IBM Plex Sans 300 600 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-var-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;
}

/* IBM Plex Sans 300 600 - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 300 600 - cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Sans 300 600 - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-var-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* IBM Plex Mono 400 - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-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;
}

/* IBM Plex Mono 400 - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 400 - cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Mono 400 - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* IBM Plex Mono 500 - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-500-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;
}

/* IBM Plex Mono 500 - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 - cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Mono 500 - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


:root {
  /* ===== Colors ===== */
  /* Base */
  --c-ink: #0A0D0E;          /* near-black, softened */
  --c-ink-pure: #000000;
  --c-paper: #FFFFFF;
  --c-paper-warm: #F7F5F1;   /* warm off-white, paper */

  /* Petrol scale (brand accent) */
  --c-petrol-950: #07181D;
  --c-petrol-900: #0C2730;   /* darkest fixed */
  --c-petrol-800: #11323D;
  --c-petrol-700: #17404D;
  --c-petrol-600: #1E515F;
  --c-petrol-500: #24464F;   /* lightest fixed */
  --c-petrol-400: #3D6470;
  --c-petrol-300: #6A8A94;
  --c-petrol-200: #A8BBC1;
  --c-petrol-100: #D6E0E4;
  --c-petrol-050: #ECF1F3;

  /* Neutrals - cool */
  --c-neutral-950: #111315;
  --c-neutral-900: #181B1D;
  --c-neutral-800: #24282B;
  --c-neutral-700: #363A3D;
  --c-neutral-600: #50555A;
  --c-neutral-500: #71787E;
  --c-neutral-400: #969CA2;
  --c-neutral-300: #B8BDC2;
  --c-neutral-200: #D7DADD;
  --c-neutral-100: #E8EAEC;
  --c-neutral-050: #F3F4F5;

  /* Semantic (muted - no candy colors) */
  --c-positive: #5E8564;     /* forest green, desaturated */
  --c-negative: #A94A3D;     /* terracotta, desaturated */
  --c-neutral-hue: #8C8578;

  /* Context - dark surface (hero, footer) */
  --c-bg-dark: var(--c-petrol-900);
  --c-surface-dark: var(--c-petrol-800);
  --c-text-on-dark: #EAEEEF;
  --c-text-dim-on-dark: #8FA0A7;
  --c-rule-on-dark: rgba(234,238,239,0.12);

  /* Context - light surface */
  --c-bg-light: var(--c-paper-warm);
  --c-surface-light: #FFFFFF;
  --c-text-on-light: var(--c-ink);
  --c-text-dim-on-light: var(--c-neutral-600);
  --c-rule-on-light: rgba(10,13,14,0.10);

  /* Aliases /補完 - referenced across blog + article + components.
     Previously undefined → resolved to currentColor / 0 / inherited.
     Defined here so borders, surfaces and radii render as designed. */
  --c-rule: var(--c-rule-on-light);   /* light-context hairline (used ×103) */
  --c-paper-2: #EFEAE1;               /* subtle warm surface (callout, footnote, closer) */
  --c-ink-2: #112C36;                 /* deep petrol surface (team photo bg) */
  --c-copper: #B8704A;                /* warn accent (article callout--warn) */

  /* Accent - CTA */
  --c-accent: var(--c-petrol-500);
  --c-accent-hover: var(--c-petrol-400);

  /* Chart scales - derived from --c-negative / --c-positive (reports, dashboards) */
  --chart-neg-1: #5E2A22;
  --chart-neg-2: #843A2F;
  --chart-neg-3: #A94A3D;
  --chart-neg-4: #C47C70;
  --chart-neg-5: #DDB0A8;
  --chart-pos-1: #2E4A33;
  --chart-pos-2: #436449;
  --chart-pos-3: #5E8564;
  --chart-pos-4: #86A98B;
  --chart-pos-5: #B9CDBC;
  --chart-star-1: #A94A3D;
  --chart-star-2: #C47C70;
  --chart-star-3: #C9CDD0;
  --chart-star-4: #86A98B;
  --chart-star-5: #5E8564;
  --chart-cat: #7A352B;
  --chart-sub: #C47C70;
  --chart-gold: #D9A441;

  /* ===== Typography ===== */
  --f-display: 'Unbounded', 'Arial Black', ui-sans-serif, sans-serif;
  --f-body: 'IBM Plex Sans', 'Helvetica Neue', ui-sans-serif, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --f-sans: var(--f-body);   /* alias - some components reference --f-sans */

  /* Type scale - desktop */
  --t-display-xl: clamp(64px, 7.8vw, 128px);
  --t-display-l: clamp(48px, 5.2vw, 80px);
  --t-h1: clamp(40px, 4.2vw, 64px);
  --t-h2: clamp(32px, 3.0vw, 44px);
  --t-h3: 28px;
  --t-h4: 20px;
  --t-body-l: 18px;
  --t-body-m: 16px;
  --t-body-s: 14px;
  --t-caption: 12px;
  --t-label: 11px;

  /* Weights */
  --w-display: 800;
  --w-heavy: 700;
  --w-medium: 500;
  --w-regular: 400;

  /* Leading */
  --lh-tight: 1.02;
  --lh-display: 1.05;
  --lh-heading: 1.12;
  --lh-body: 1.55;
  --lh-caption: 1.4;

  /* Tracking */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0;
  --ls-micro: 0.14em;  /* all-caps labels */

  /* ===== 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;

  /* ===== Grid ===== */
  --grid-max: 1440px;
  --grid-outer: 80px;
  --grid-gutter: 24px;

  /* ===== Radii ===== */
  --r-0: 0;
  --r-xs: 2px;
  --r-s: 4px;
  --r-m: 8px;
  /* size-suffix aliases used by blog/article components */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* ===== Motion ===== */
  --d-fast: 150ms;
  --d-medium: 300ms;
  --d-slow: 500ms;
  --e-std: cubic-bezier(0.4, 0, 0.2, 1);
  --e-accel: cubic-bezier(0.4, 0, 1, 1);
  --e-decel: cubic-bezier(0, 0, 0.2, 1);
}

/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--c-paper-warm);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--c-petrol-500); color: #fff; }

/* Utility */
.container {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-outer);
}
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
}
@media (max-width: 767px) {
  .container { padding: 0 20px; }
}

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--c-petrol-300);
}

.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.rule {
  height: 1px;
  background: var(--c-rule-on-dark);
  width: 100%;
}
.rule--light { background: var(--c-rule-on-light); }