/* ============================================================
   Fakeradar — Design tokens, fonts, reset, typography
   Canonical values from the Figma UI-kit (palette / type / spacing / radii).
   Loaded first, before chrome.css and components.css.
   ============================================================ */

/* ---------- Font: TT Interfaces (weights 400/500/600/700 + italic) ---------- */
@font-face {
  font-family: 'TT Interfaces';
  src: url('../fonts/TTInterfaces-Regular.woff2') format('woff2'),
       url('../fonts/TTInterfaces-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Interfaces';
  src: url('../fonts/TTInterfaces-Italic.woff2') format('woff2'),
       url('../fonts/TTInterfaces-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'TT Interfaces';
  src: url('../fonts/TTInterfaces-Medium.woff2') format('woff2'),
       url('../fonts/TTInterfaces-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Interfaces';
  src: url('../fonts/TTInterfaces-SemiBold.woff2') format('woff2'),
       url('../fonts/TTInterfaces-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Interfaces';
  src: url('../fonts/TTInterfaces-Bold.woff2') format('woff2'),
       url('../fonts/TTInterfaces-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* neutral ramp */
  --n-100: #ffffff;
  --n-95:  #fbfcfe;
  --n-90:  #f1f4f9;
  --n-80:  #e2e8f0;
  --n-60:  #a9b9cc;
  --n-40:  #68778d;
  --n-30:  #4a5568;
  --n-10:  #23221f;

  /* brand */
  --primary-95: #eef8ff;
  --primary-80: #8ac7ff;
  --primary-50: #2b83ff;
  --primary-40: #1362fc;
  --primary-30: #0036f4;
  --secondary-90: #f5e8ff;
  --secondary-50: #b955f7;
  --secondary-40: #af46ec;
  --secondary-30: #9122ce;

  /* status */
  --success: #21c66e;  --success-90: #dcfcea;
  --warning: #ee9112;  --warning-90: #fcefc9;
  --error:   #f24156;  --error-90:   #ffe4e5;

  /* semantic aliases */
  --bg:      var(--n-95);
  --surface: var(--n-100);
  --fill:    var(--n-90);
  --text:    var(--n-10);
  --muted:   var(--n-40);
  --border:  var(--n-80);
  --link:    var(--primary-50);

  /* spacing scale (Space 1–11) */
  --s1: 0.25rem;   /* 4  */
  --s2: 0.375rem;  /* 6  */
  --s3: 0.5rem;    /* 8  */
  --s4: 0.75rem;   /* 12 */
  --s5: 1rem;      /* 16 */
  --s6: 1.25rem;   /* 20 */
  --s7: 1.5rem;    /* 24 */
  --s8: 2rem;      /* 32 */
  --s9: 2.5rem;    /* 40 */
  --s10: 3rem;     /* 48 */
  --s11: 4rem;     /* 64 */

  /* radii (Radius 1–5) */
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 16px;
  --r5: 24px;

  /* elevation */
  --shadow-xs: 0 1px 2px rgba(35, 34, 31, 0.04);
  --shadow-s:  0 2px 8px rgba(80, 80, 140, 0.06);
  --shadow-m:  0 4px 16px rgba(80, 80, 140, 0.08);
  --shadow-l:  0 8px 32px rgba(80, 80, 140, 0.10);

  /* layout */
  --content-max: 1228px;
  --sidebar-w: clamp(5.3rem, 7.36vw, 6.625rem);  /* 106px @1440 → shrinks to 85px on narrow desktops; right gutter mirrors it */
  --page-max: 1440px;                       /* sidebar 106 + content 1228 + gutter 106 @1440 */
  --gutter: clamp(1rem, 4vw, 6.625rem);     /* 16px → 106px */
  --bp: 768px;                              /* primary structural breakpoint */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* Резервируем место под вертикальный скроллбар ВСЕГДА — иначе на экранах шире 1440
     появление/исчезновение скролла (страница со скроллом ↔ contacts без него) меняет
     ширину раскладочного вьюпорта, и центрированный .app (margin-inline:auto) + fixed .sidebar
     прыгают по горизонтали на полширины полосы. */
  overflow-y: scroll;                       /* универсальный фолбэк (все браузеры) */
}
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }   /* современные: резерв без вечно-видимого трека */
}

body {
  font-family: 'TT Interfaces', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ---------- Typography scale (token classes) ----------
   Switch the token per breakpoint where the mockup differs;
   weight is applied separately (.fw-*). */
.t-xs  { font-size: 0.75rem;  line-height: 0.875rem; }  /* 12 / 14 */
.t-s   { font-size: 0.875rem; line-height: 1.25rem;  }  /* 14 / 20 */
.t-m   { font-size: 1rem;     line-height: 1.5rem;   }  /* 16 / 24 */
.t-l   { font-size: 1.25rem;  line-height: 1.75rem;  }  /* 20 / 28 */
.t-xl  { font-size: 1.5rem;   line-height: 2rem;     }  /* 24 / 32 */
.t-2xl { font-size: 1.75rem;  line-height: 2.25rem;  }  /* 28 / 36 */
.t-3xl { font-size: 2.25rem;  line-height: 3rem;     }  /* 36 / 48 */

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }