:root {
  --font-main: Inter, "Noto Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: Inter, "Noto Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --lh-tight: 1.2;
  --lh-body: 1.5;
  --lh-ui: 1.35;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xxs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-body: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;

  --fs-table-head: var(--fs-xs);
  --fs-table-cell: var(--fs-sm);
  --fs-table-meta: var(--fs-xs);
}

body {
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.bl-page-header__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.bl-page-header__subtitle,
.muted-meta {
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}

.btn {
  font-family: inherit;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
}

input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}

.sidebar-menu .nav-link {
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}

.sidebar-menu .sidebar-section {
  font-size: var(--fs-xxs);
  line-height: var(--lh-ui);
}

.table,
.bl-table {
  font-size: var(--fs-table-cell);
  line-height: var(--lh-ui);
}

.table thead th,
.bl-table thead th {
  font-size: var(--fs-table-head);
  line-height: var(--lh-ui);
}

.form-label,
.form-text {
  line-height: var(--lh-ui);
}

.bl-font-mono {
  font-family: var(--font-mono);
}

.bl-table-meta {
  font-size: var(--fs-table-meta);
  line-height: var(--lh-ui);
}

@media (max-width: 576px) {
  :root {
    --fs-body: 14px;
    --fs-sm: 14px;
    --fs-xs: 13px;
    --fs-xxs: 12px;
  }
}
