// -----------------------------------------------------------------------------
// Root (global `--variables` and `font` styles)
// =============================================================================
// Extends `print-first-css`: @ https://stackoverflow.com/a/29727884
//
// Typography
// ----------
// There seems to be a trend for massive font sizes: See issue #75
//
// 1. Here we import all our variables. There's _three_ options right now
//    for colours, two of which I'll remove in the next release. They're marked
//    with a little artist!
//
//    - I'm still not happy with the colours, but they do take a while to get
//      right and Pandoc is a bit limiting in some ways. An artist ships, as they
//      say, otherwise I'd _still_ be working on those colours now!
//
// 2. Anki (app) sets default `body` styles and `:root` doesn't override this.
//    Might have to override all the styles in print-first-css `:root`?
//    @ https://github.com/badlydrawnrob/anki/issues/117
//
// 3. @font-face should live outside of `:root` I found out. See issue #12
//
//     - Add your custom `--font-variable` and `@font-face`
//     - https://www.hacksoft.io/blog/using-multiple-font-files-the-right-way
//
// 4. Italics are a bit problematic. Even though there's an italics style
//    within the Recursive font file, it's not working in AnkiMobile Safari
//
//    - `font-variation-settings: 'slnt' 0.5;` is the best current option.
//    - #! @ https://github.com/arrowtype/recursive/issues/56
//
// 4. I'm still not 100% sold on Recursive font. The `MONO` is nice, but having
//    recursive as the heading/body font can feel hard to read on desktop (it's
//    _far_ better on mobile) — I could spend forever on typography, so I'll
//    punt better typography to a future release.
//
//    - If you absolutely HATE Recursive, you can switch back to DejaVu Sans as
//      body and header text :)
//    - This will be deprecated in future versions.

// 1
:root {
  @import '../variables/color';
  @import '../variables/breezedark-modified';  // 👨‍🎨 My preference (modified)
  // @import '../variables/breezedark';       // 🧑‍🎨 Pandoc's original
  // @import '../variables/monokai';          // 👩‍🎨 Old theme (deprecated)
  @import '../variables/typography';
}

// 2 !#
body {
  color: var(--font-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-variation-settings: 'CASL' 0.43;  // #! For recursive font only
  line-height: var(--line-height);
  background: transparent;
}

// 3, 4
@font-face {
  font-family: 'Recursive';
  src: url('_RecursiveVariableFont.woff2') format('woff2-variations');
  font-style: oblique 0deg 15deg; // #! (4) This isn't doing much?
  font-weight: 300 1000;
}

// 4 (deprecated)
@font-face {
  font-family: "DejaVu Sans";
  src: url("_DejaVuSans.ttf");
  font-style: normal;
  font-weight: 400;
}
