/* ==========================================================================
   base.css — токены дизайн-системы, reset, типографика
   ========================================================================== */

:root {
  /* Бренд */
  --brand:            #1668ff;
  --brand-hover:      #0d57e0;
  --brand-soft:       #e8f0ff;
  --brand-soft-2:     #dbe8ff;

  /* Текст */
  --text:             #16233a;
  --text-2:           #5b6b83;
  --text-3:           #8a99ad;

  /* Поверхности */
  --bg:               #e9f0f9;
  --bg-2:             #f2f6fb;
  --surface:          #ffffff;
  --surface-2:        #f7fafd;

  /* Границы */
  --border:           #e6ecf4;
  --border-2:         #dfe7f1;

  /* Статусы */
  --green:            #12855a;
  --green-soft:       #e6f7ee;
  --red:              #d5322b;
  --red-soft:         #fdecea;
  --amber:            #b7791f;
  --amber-soft:       #fdf3e2;
  --violet:           #7c4dff;
  --violet-soft:      #efe9ff;
  --teal:             #0f9b8e;
  --teal-soft:        #e2f6f4;

  /* Радиусы */
  --r-card:           16px;
  --r-md:             10px;
  --r-sm:             8px;
  --r-pill:           999px;

  /* Тени */
  --shadow-card:      0 1px 2px rgba(16, 30, 54, .04), 0 8px 24px -16px rgba(16, 30, 54, .16);
  --shadow-pop:       0 2px 6px rgba(16, 30, 54, .06), 0 18px 40px -20px rgba(16, 30, 54, .28);
  --shadow-btn:       0 1px 2px rgba(22, 104, 255, .24), 0 6px 14px -8px rgba(22, 104, 255, .5);

  /* Метрики layout */
  --sidebar-w:        220px;
  --gap:              16px;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover { text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input, select {
  font: inherit;
  color: inherit;
}

table {
  width: 100%;
  border-collapse: collapse;
}

svg { display: block; }

/* ---------- утилиты типографики ---------- */
.t-num {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.t-muted { color: var(--text-2); }
.t-faint  { color: var(--text-3); }

.u-up   { color: var(--green); }
.u-down { color: var(--red); }

/* ---------- скроллбар ---------- */
.scroll-y { overflow-y: auto; }

.scroll-y::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.scroll-y::-webkit-scrollbar-thumb {
  background: #d6dfeb;
  border-radius: var(--r-pill);
}
.scroll-y::-webkit-scrollbar-thumb:hover { background: #c2cede; }

/* ---------- иконки ---------- */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 22px; height: 22px; }