/* БЕРФОРТ LMS — Design tokens (B2B sober, iSpring-influenced) */
:root {
  /* Palette */
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-surface-2: #f1f5f9;
  --c-text: #0f172a;
  --c-text-muted: #64748b;
  --c-text-light: #94a3b8;
  --c-text-on-primary: #ffffff;
  --c-border: #e2e8f0;
  --c-border-strong: #cbd5e1;

  --c-primary: #1e3a8a;
  --c-primary-hover: #1e40af;
  --c-primary-soft: #dbeafe;
  --c-primary-text: #1e40af;

  --c-success: #047857;
  --c-success-soft: #d1fae5;
  --c-success-text: #065f46;

  --c-warning: #b45309;
  --c-warning-soft: #fef3c7;
  --c-warning-text: #92400e;

  --c-danger: #b91c1c;
  --c-danger-soft: #fee2e2;
  --c-danger-text: #991b1b;

  --c-neutral-soft: #f1f5f9;
  --c-neutral-text: #475569;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-hero: 36px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-normal: 1.55;
  --lh-loose: 1.7;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Radii */
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* Shadows (subtle) */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-md: 0 4px 6px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04);
  --sh-lg: 0 10px 15px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.04);

  /* Transitions */
  --t-fast: 120ms;
  --t-base: 180ms;

  /* Layout */
  --sidebar-w: 248px;
  --header-h: 56px;
  --content-max: 1280px;
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--c-text); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0; }
a { color: var(--c-primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Utilities */
.muted { color: var(--c-text-muted); }
.dim { color: var(--c-text-light); }
.mono { font-family: ui-monospace, 'SF Mono', monospace; font-size: 0.9em; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.row { display: flex; gap: var(--s-3); align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.row-wrap { flex-wrap: wrap; }
.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.flex-1 { flex: 1; }

.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }

/* Defensive: prevent 13px horizontal overflow on mobile course pages */
@media (max-width: 768px) {
  html, body { overflow-x: clip; }
}