/* Brand typography & colors for mice dashboards.
   Palette and fonts come from the company brand book
   (colors.txt / fonts/fonts.txt). */

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter_24pt-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter_24pt-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter_24pt-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Loew";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/LoewVariable-SemiCondensed.ttf") format("truetype");
}

:root {
  --brand-emerald: #005E50;
  --brand-mint: #DAE6DF;
  --brand-leafy: #B0BCAB;
  --brand-isabelline: #F2EFE9;
  --brand-beaver: #A38B71;
  --brand-powder: #A8BECC;
  --brand-flash: #ECECEC;
  --brand-rose: #B4807A;
  --brand-magenta: #824254;
}

html, body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #1f2a25;
  background-color: var(--brand-isabelline);
}

.font-display,
h1.display {
  font-family: "Loew", "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h1, h2, h3 {
  font-family: "Loew", "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.brand-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.brand-btn {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* Icon rendering via CSS mask so the SVG shape inherits currentColor. */
.icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.icon-dashboard {
  -webkit-mask-image: url("../icons/dasboard.svg");
          mask-image: url("../icons/dasboard.svg");
}
.icon-fab {
  -webkit-mask-image: url("../icons/FAB.svg");
          mask-image: url("../icons/FAB.svg");
}

/* Strip default disclosure triangle on <summary> used for menus. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }