@import url("fonts.css");
@import url("typography.css");
@import url("nav.css");
@import url("layout.css");
@import url("page.css");
@import url("cards/_base.css");
@import url("cards/grid.css");
@import url("cards/horizontal.css");
@import url("cards/text-only.css");
@import url("cards/magazine.css");
@import url("cards/secondary.css");
@import url("content/utopian-novels.css");
@import url("content/interactive-fiction.css");
@import url("responsive.css");

:root {
  /* Fonts */
  --font-body: "Source Serif Pro", serif;
  --font-heading: "Roboto Condensed", sans-serif;
  --font-nav: "Libre Baskerville", serif;
  --font-card-title: "Libre Baskerville", serif;
  --font-display: "Cinzel Decorative", serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  /* Core colours */
  --color-link: #e86b22;
  --color-link-hover: rgb(200, 70, 15);
  --color-button: steelblue;
  --color-button-hover: rgb(50, 100, 140);
  --color-link-subnav: teal;
  --color-nav-active: rgb(255, 234, 0);
  --color-nav-text: whitesmoke;

  /* Text greys (warm-tinted) */
  --color-text-dark: rgb(40, 40, 40);
  --color-text: rgb(60, 60, 60);
  --color-text-h4: rgb(80, 80, 80);
  --color-text-muted: rgb(120, 120, 120);
  --color-text-note: rgb(100, 100, 100);
  --color-text-lede: rgb(50, 50, 50);

  /* Warm greys for borders, decorative elements */
  --color-border: rgb(218, 218, 218);
  --color-border-warm: rgb(215, 210, 200);
  --color-border-accent: rgb(180, 180, 170);
  --color-border-aside: rgb(140, 130, 115);
  --color-separator-dot: rgb(200, 195, 185);

  /* Backgrounds */
  --color-bg-light: rgb(240, 240, 240);
  --color-bg-aside: rgb(247, 244, 238);
  --color-bg-summary: rgb(248, 248, 245);
  --color-bg-snippet: whitesmoke;
  --color-bg-subnav: rgb(242, 240, 230);
  --color-bg-subnav-overlay: rgba(255, 255, 255, 0.25);

  /* Aside/content-warning palette */
  --color-aside-text: rgb(70, 65, 58);
  --color-aside-heading: rgb(100, 95, 82);
  --color-aside-blockquote-border: rgb(200, 175, 130);
  --color-aside-blockquote-text: rgb(110, 100, 85);
  --color-content-warning-border: rgb(180, 140, 90);
  --color-content-warning-text: rgb(90, 85, 75);
  --color-content-warning-link: rgb(150, 115, 60);

  /* TOC palette */
  --color-toc-heading: rgb(80, 75, 70);
  --color-toc-counter: rgb(90, 85, 75);
  --color-toc-link: rgb(40, 40, 35);
  --color-toc-link-hover: rgb(140, 60, 20);
  --color-toc-underline: rgb(200, 195, 185);

  /* Section years */
  --color-section-years: rgb(150, 145, 135);

  /* Nav (on dark background) */
  --color-nav-hover: rgb(255, 200, 140);
  --color-nav-text-muted: rgba(245, 245, 245, 0.8);
  --color-nav-band-bg: rgba(255, 255, 255, 0.12);
  --color-nav-band-border: rgba(255, 255, 255, 0.25);

  /* Code blocks */
  --color-code-bg: rgb(50, 48, 47);
  --color-code-gold: rgb(224, 180, 90);
  --color-code-border: rgb(80, 75, 70);

  /* Screenshot figures */
  --color-border-screenshot: rgb(95, 115, 140);

  /* One-off colours */
  --color-ento: rgb(196, 94, 147);
  --color-scrollbar-bg: darkgrey;
  --color-scrollbar-thumb: darkred;

  /* Layout */
  --margin-page: 15vw;
  --margin-page-mobile: 10vw;
}