/* Design tokens: fonts, outline/shadow and type families. Every other file builds on these.
   The colors live in the theme file (css/themes/, linked from index.html): every color on the site comes
   from there, so the palette tool (the Palette button on the page while server.cmd runs) or a theme file
   changes them for the whole site.
   Mobile first: each file's plain rules are the phone layout, then its own @media blocks add the
   bigger screens: min-width 681px (tablet and up), then min-width 901px (desktop) */

/* Fonts are named by their job, not by the typeface: to try another font, replace its file in
   assets/fonts/ with the new font under the same name (woff2). If it comes out too big or too small,
   change its size-adjust (100% = as drawn). The body font is a variable font covering weights 400 to 900;
   a replacement should be one too, or bold text stays regular.
   Now: display = Bagel Fat One, magic = Griffy, body = Nunito, hand = Caveat */
@font-face {
  font-family: 'Pixie Display';
  font-weight: 400;
  font-display: swap;
  size-adjust: 100%;
  src: url('../../assets/fonts/display.woff2') format('woff2');
}
@font-face {
  font-family: 'Pixie Magic';
  font-weight: 400;
  font-display: swap;
  size-adjust: 100%;
  src: url('../../assets/fonts/magic.woff2') format('woff2');
}
@font-face {
  font-family: 'Pixie Body';
  font-weight: 400 900;
  font-display: swap;
  size-adjust: 100%;
  src: url('../../assets/fonts/body.woff2') format('woff2');
}
@font-face {
  font-family: 'Pixie Hand';
  font-weight: 600;
  font-display: swap;
  size-adjust: 100%;
  src: url('../../assets/fonts/hand.woff2') format('woff2');
}

:root {
  /* Pixie C0res accents, sampled from its background art (used on its dark strip). They belong to that
     collection's art, so they stay out of the themes */
  --periwinkle: #9296F2;
  --periwinkle-light: #CBCEFF;

  --line: 3px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --radius: 22px;

  --font-display: 'Pixie Display', 'Arial Rounded MT Bold', sans-serif;  /* headlines, buttons, ribbon */
  --font-magic: 'Pixie Magic', Georgia, serif;                           /* accent words */
  --font-body: 'Pixie Body', Arial, sans-serif;                          /* body text */
  --font-hand: 'Pixie Hand', cursive;                                    /* handwritten notes and tags */
}