/* Vashti's look. site.css draws everything from variables; this file says
   which ones differ. Album pages (album.css) and each album's own colours
   (look.css, jadd.css, ...) come after it. */

@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap');

@font-face {
  font-family: handwritten;
  src: url('/static/handwritten.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg: #fffdf5;
  --text: #4a4230;
  --muted: #7a705a;
  --accent: #7a6200;
  --border: #e6dfc4;
  --surface: #f8f3dc;

  --font-body: handwritten, Georgia, "Times New Roman", serif;
  --font-heading: "Julius Sans One", handwritten, Georgia, serif;
  --measure: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --text: #ece5cc;
    --muted: #b3a985;
    --accent: #e0cc47;
    --border: #3a3524;
    --surface: #25211a;
  }
}

/* The handwriting is light and small for its size */
body {
  font-size: 1.2rem;
}

h1, h2, h3 {
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* The search box's edge, from each album's own colours rather than duckdown's
   blue-grey default (0.10's --field-border): the page's text eased two-thirds
   of the way toward its background, which is 3:1 or more on every album and
   the news (3.0 on news' blue, 7.8 on Heartleap's black). Declared on the
   input, so it takes the colours where the input is. */
.search-panel input {
  --field-border: color-mix(in srgb, var(--text) 65%, var(--bg));
}