/* merkuroffice, appearance of the account console.
 *
 * The console is a React application built on PatternFly 5, so this works
 * through its variables rather than by chasing class names, which would break
 * on the next Keycloak release.
 */

:root {
  --mo-primary: #56a5d7;
  --mo-primary-dark: #3d8ec1;
  --mo-anchor: #111111;
  --mo-neutral: #cac6bd;
  --mo-base: #f2f0ec;
  --mo-light: #d8eef7;

  /* PatternFly takes its accent from these, so buttons, links, active tabs and
     focus rings follow along without touching a single component. */
  --pf-v5-global--primary-color--100: var(--mo-primary);
  --pf-v5-global--primary-color--200: var(--mo-primary-dark);
  --pf-v5-global--link--Color: var(--mo-primary-dark);
  --pf-v5-global--link--Color--hover: var(--mo-anchor);
  --pf-v5-global--active-color--100: var(--mo-primary);
  --pf-v5-global--BackgroundColor--200: var(--mo-base);
  --pf-v5-global--BorderColor--100: var(--mo-neutral);
  --pf-v5-global--FontFamily--text: "DM Sans", system-ui, sans-serif;
  --pf-v5-global--FontFamily--heading: "Syne", system-ui, sans-serif;
  --pf-v5-global--FontFamily--redhatfont--sans-serif: "DM Sans", system-ui, sans-serif;
  --pf-v5-global--FontFamily--redhatfont--heading: "Syne", system-ui, sans-serif;
}

body {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 300;
}

h1, h2, h3,
.pf-v5-c-title {
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* The masthead carries the logo, so it gets the page background rather than the
   dark bar PatternFly paints by default. */
.pf-v5-c-masthead {
  background: var(--mo-base);
  border-bottom: 1px solid var(--mo-neutral);
}

.pf-v5-c-masthead__brand img,
.pf-v5-c-brand {
  max-height: 40px;
}