/* Gives the admin and sign-in pages (the css-zero application layout) the
   same palette and serif type as the learner pages in learn.css, so the
   whole site reads as one app. Light only, like the learner pages. */
.fabulae-theme {
  color-scheme: light;

  --color-bg: rgb(240 245 235);
  --color-surface: rgb(255 255 255 / .85);
  --color-text: rgb(43 31 23);
  --color-text-reversed: white;
  --color-text-subtle: rgb(79 94 87);
  --color-link: rgb(15 92 87);
  --color-border-light: rgb(158 184 171 / .22);
  --color-border: rgb(158 184 171 / .7);
  --color-border-dark: rgb(158 184 171);
  --color-selected: rgb(15 92 87 / .12);
  --color-selected-dark: rgb(15 92 87);
  --color-primary: rgb(15 92 87);
  --color-secondary: rgb(158 184 171 / .25);
  --color-negative: rgb(158 28 23);

  h1, h2 { font-family: Georgia, "Times New Roman", serif; }

  #sidebar { background-color: rgb(158 184 171 / .14); }

  .sidebar-menu__button[aria-current="page"] {
    --btn-background: rgb(15 92 87);
    --btn-color: white;
    --btn-font-weight: var(--font-bold);
  }
}

.sidebar-menu__brand {
  /* Also the logo on the sign-in card. */
  align-items: center;
  display: flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 700;
  gap: .5rem;
  padding: var(--size-1) var(--size-2);

  img { block-size: 2rem; inline-size: 2rem; }
}