@font-face {
  font-family: "CEBEM Montserrat";
  src: url("../fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-primary: #1769A6;
  --brand-primary-hover: #164B73;
  --brand-primary-active: #123E60;
  --brand-deep: #164B73;
  --brand-orange: #E9A04B;
  --brand-gold: #F2C477;
  --brand-cream: #F7F3EA;
  --brand-white: #FFFFFF;
  --brand-soft: #EAF2F8;
  --brand-muted: #59758B;
}

body {
  font-family: Arial, "Liberation Sans", sans-serif;
}

h1, h2, h3, .brand-name {
  font-family: "CEBEM Montserrat", Arial, sans-serif;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-deep);
  text-decoration: none;
}

.brand-topbar {
  border-bottom: 2px solid var(--brand-gold);
}

.brand-sidebar {
  border-right: 1px solid var(--brand-gold);
}

.brand-symbol {
  width: 40px;
  height: 40px;
  padding: 3px;
  background: var(--brand-cream);
  border-radius: 50%;
}

.brand-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.home-summary-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid rgb(22 75 115 / 12%);
  border-top: 4px solid var(--summary-accent);
  border-radius: 8px;
  background: var(--brand-cream);
  color: var(--brand-deep);
  text-decoration: none;
}

.home-summary-books { --summary-accent: var(--brand-primary); }
.home-summary-customers { --summary-accent: var(--brand-orange); }
.home-summary-loans { --summary-accent: var(--brand-deep); }
.home-summary-overdue { --summary-accent: var(--brand-gold); }

.home-summary-card:hover {
  background: var(--brand-soft);
}

.home-summary-card:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.home-summary-heading, .home-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-summary-heading {
  min-height: 36px;
  font-size: 14px;
}

.home-summary-heading > span {
  flex: 1;
}

.home-summary-card .home-summary-heading .home-summary-icon {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 10px;
  border-radius: 8px;
  background: var(--brand-cream);
  color: var(--brand-deep);
}

.home-summary-total {
  margin-top: 14px;
}

.home-summary-total strong {
  font-family: "CEBEM Montserrat", Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}