/* Crachá hosted: the synergy / motiró look (Lato, navy on white, the light
   blues, green and yellow), over the desktop's stylesheet; and the account
   bar and the entry pages. The synergy has no dark mode, nor does this. */

@font-face { font-family: "Lato"; src: url("fonts/Lato-Light.ttf"); font-weight: 300; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Bold.ttf"); font-weight: 700; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Black.ttf"); font-weight: 900; }

:root {
  --paper: #ebf1ff;
  --card: #ffffff;
  --ink: #012169;
  --muted: #4f6194;
  --line: #d7e3ff;
  --wax: #012169;
  --wax-soft: #ebf1ff;
  --on-wax: #ffffff;
  --good: #009739;
  --good-soft: #dbffe9;
  --warn: #988500;
  --warn-soft: #fff8cc;
  --bad: #a52a1c;
  --bad-soft: #f7e1de;
  --shadow: none;
  --radius: 4px;
  --sans: "Lato", system-ui, sans-serif;
  --serif: "Lato", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #ebf1ff; --card: #ffffff; --ink: #012169; --muted: #4f6194; --line: #d7e3ff;
    --wax: #012169; --wax-soft: #ebf1ff; --good: #009739; --good-soft: #dbffe9;
    --warn: #988500; --warn-soft: #fff8cc; --bad: #a52a1c; --bad-soft: #f7e1de; --shadow: none;
  }
}

body { font-weight: 400; }
h1, h2, h3, h4 { font-weight: 700; }

.wordmark { font-family: "Lato", sans-serif; font-weight: 900; font-style: normal; color: var(--ink); letter-spacing: 0; }

/* The synergy's top bar: light blue, the wordmark heavy. */
.bar { background: #afc7fe; border-bottom: none; }
.nav button { color: var(--ink); }
.nav button[aria-current] { background: #ffffff; box-shadow: none; }

/* The synergy's buttons: light blue, a navy shadow, square. */
button { border-radius: 0; font-family: "Lato", sans-serif; }
button.primary {
  background: #afc7fe; border: none; color: #012169;
  box-shadow: #012169 .125rem .125rem .125rem;
}
button.primary:hover:not(:disabled) { filter: none; background: #c3d5fe; }
input, textarea, select { border-radius: 2px; }
.card { border: 1px solid var(--line); box-shadow: none; }

/* The account bar. */
.hosted-bar {
  position: fixed; top: 0; right: 0; z-index: 10;
  padding: .3rem .8rem; font-size: .8rem;
  background: #fff8cc; color: #012169;
}
.hosted-bar a { margin-left: .2rem; color: #012169; font-weight: 700; }

/* The entry pages. */
.entry .note { font-size: .85rem; color: var(--muted); }
.entry form { display: grid; gap: .8rem; margin-top: 1rem; }
.entry .error { color: var(--bad); }

/* An app asking for access. */
.request-dialog { max-width: 30rem; }
.request-dialog .actions { display: flex; gap: .6rem; justify-content: flex-end; }
.entry .request { background: #fff8cc; padding: .6rem .8rem; }
.entry .request code { word-break: break-all; }