/* 101kpi — дизайн-токены (v2, песочница). Единственный источник цветов/отступов/радиусов.
   Не хардкодить HEX/размеры в страницах — только переменные отсюда. */
:root {
  /* Brand (бирюзовый акцент) */
  --brand-50:  #eaf8f6;
  --brand-100: #d5f1ed;
  --brand-200: #afe3dc;
  --brand-300: #79cec4;
  --brand-400: #3db4a7;
  --brand-500: #169f91;
  --brand-600: #0f8b80;
  --brand-700: #0d7068;
  --brand-800: #105a55;
  --brand-900: #104b47;

  /* Surfaces */
  --surface-page:      #f8fafc;
  --surface-primary:   #ffffff;
  --surface-secondary: #f4f7f9;
  --surface-hover:     #f0f5f5;
  --surface-selected:  #eaf8f6;

  /* Text */
  --text-primary:   #172033;
  --text-secondary: #667085;
  --text-tertiary:  #98a2b3;
  --text-disabled:  #b8c0cc;
  --text-on-brand:  #ffffff;

  /* Borders */
  --border-primary:   #e4e7ec;
  --border-secondary: #eef1f4;
  --border-strong:    #d0d5dd;

  /* Semantic */
  --success: #12b76a; --success-bg: #ecfdf3;
  --warning: #f79009; --warning-bg: #fffaeb;
  --danger:  #f04438; --danger-bg:  #fef3f2;
  --info:    #2e90fa; --info-bg:    #eff8ff;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgb(16 24 40 / 4%);
  --shadow-floating: 0 8px 24px rgb(16 24 40 / 8%), 0 2px 6px rgb(16 24 40 / 4%);

  /* Layout */
  --sidebar-width: 216px;
  --sidebar-collapsed-width: 72px;
  --content-max-width: 1920px;
  --page-padding: 24px;
  --control-height: 44px;

  /* Typography */
  --font-sans: Inter, 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* База типографики и сброс */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }