:root{
  --font-sans: 'Public Sans', sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Base scope */
.app-typography{
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

/* Utility classes */
.app-typography .text-xs{ font-size: var(--font-size-xs); }
.app-typography .text-sm{ font-size: var(--font-size-sm); }
.app-typography .text-md{ font-size: var(--font-size-md); }
.app-typography .text-lg{ font-size: var(--font-size-lg); }
.app-typography .text-xl{ font-size: var(--font-size-xl); }
.app-typography .text-2xl{ font-size: var(--font-size-2xl); }
.app-typography .text-3xl{ font-size: var(--font-size-3xl); }

.app-typography .font-regular{ font-weight: var(--font-weight-regular); }
.app-typography .font-medium{ font-weight: var(--font-weight-medium); }
.app-typography .font-semibold{ font-weight: var(--font-weight-semibold); }
.app-typography .font-bold{ font-weight: var(--font-weight-bold); }

.app-typography .lh-tight{ line-height: var(--line-height-tight); }
.app-typography .lh-normal{ line-height: var(--line-height-normal); }
.app-typography .lh-relaxed{ line-height: var(--line-height-relaxed); }

/* Headings */
.app-typography h1{
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}
.app-typography h2{
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}
.app-typography h3,
.app-typography h4{
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
}
.app-typography h5{
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
}
.app-typography h6{
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
}

/* Page titles / section titles */
.app-typography .page-title-custom h4{
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}
.app-typography .box-title{
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}

/* Forms */
.app-typography label,
.app-typography .control-label{
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}
.app-typography .form-control{
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}
.app-typography .help-block{
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

/* Buttons */
.app-typography .btn{
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
}
.app-typography .btn.btn-primary,
.app-typography .btn.btn-cta{
  font-weight: var(--font-weight-semibold);
}
.app-typography .btn-sm{
  font-size: var(--font-size-sm);
}
.app-typography .btn-xs{
  font-size: var(--font-size-xs);
}

/* Tables */
.app-typography .table thead th{
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
.app-typography .table tbody td{
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* Navbar / Sidebar */
.app-typography .navbar-brand{
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.app-typography .nav > li > a,
.app-typography .navbar-nav > li > a{
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
}

/* Alerts / Labels / Badges */
.app-typography .alert{
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.app-typography .label,
.app-typography .badge{
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

/* Login specifics */
.app-typography .lx-auth__title{
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}
.app-typography .lx-auth__subtitle{
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.app-typography .lx-label{
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.app-typography .lx-input{
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}
.app-typography .lx-btnPrimary{
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
.app-typography,
.app-typography .lx-link{
  font-size: var(--font-size-sm);
}

.app-typography .lx-check{
  display: inline-flex;
  align-items: center;
}


.app-typography .lx-checkText{
  line-height: 1;
}

.app-typography .lx-row{
  align-items: center;
}

/* Responsive tweaks */
@media (max-width: 767px){
  .app-typography .page-title-custom h4{
    font-size: 22px;
  }
  .app-typography .box-title{
    font-size: 18px;
  }
  .app-typography h1{
    font-size: 22px;
  }
  .app-typography .lx-auth__title{
    font-size: 22px;
  }
}