/* ==========================================================================
   TOKENS: the one file you edit to rebrand the site.
   Load order: tokens.css, then base.css. base.css only uses the names below,
   never a raw colour or size, so nothing else needs to change.

   The values reproduce the old ex-Artis site (Joomla, RocketTheme
   "Ethereal"): Asap, grey text, black links, a black rule under the white
   header, a grey footer band.
   ========================================================================== */


/* 1. Fonts =================================================================
   Asap (SIL Open Font License), the old site's own two files, regular and
   bold. They cover Latin and Greek. Characters they lack fall back to the
   old site's list: Helvetica, Tahoma, Geneva, Arial. */

@font-face {
  font-family: "asap";
  src: url("/fonts/asap-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "asap";
  src: url("/fonts/asap-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {

  /* 2. Colour ==============================================================
     Hex on purpose: works everywhere, easy to paste from a brand guide.
     The old body text was #888; #767676 looks the same and reaches 4.5:1
     on white. */

  --color-bg: #ffffff;           /* page background */
  --color-text: #767676;         /* body text, page and item titles */
  --color-ink: #000000;          /* links, the current menu item, header rule */
  --color-ink-soft: #555555;     /* titles in the project and news lists */
  --color-label: #666666;        /* "Download attachments:", to-top arrow */
  --color-nav: #808080;          /* menu items (bold 20.8px: large text) */
  --color-line: #dddddd;         /* pagination boxes */
  --color-dropdown: #dfdfdf;     /* menu dropdowns */
  --color-footer: #a0a0a0;       /* footer band */
  --color-footer-link: #333333;  /* footer page list */
  --color-thumb-frame: #222222;  /* frame around gallery thumbnails */
  --color-scrim: rgba(0, 0, 0, 0.88);      /* behind an enlarged photo */
  --color-scrim-soft: rgba(0, 0, 0, 0.55); /* its buttons */
  --color-on-dark: #ffffff;

  /* Keep in step with <meta name="theme-color"> in every page. */


  /* 3. Type ================================================================ */

  --font-sans: "asap", Helvetica, Tahoma, Geneva, Arial, sans-serif;

  --step--2: 0.6875rem;  /* 11px: photo credits */
  --step--1: 0.9rem;     /* 14.4px: list intros, footer page list */
  --step-0: 1rem;        /* 16px: text */
  --step-1: 1.1rem;      /* 17.6px: titles in the lists */
  --step-2: 1.5rem;      /* 24px: "Image Gallery", "Media" */
  --step-3: 1.9rem;      /* 30.4px: page and item titles */
  --step-nav: 1.3rem;    /* 20.8px: menu */


  /* 4. Space & layout ====================================================== */

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --container: 79rem;           /* 1200px of content + the gutters */
  --gutter: 1rem;               /* side padding on phones */
  --header-h: 4.5rem;           /* header bar height, without its rule */
  --header-rule: 5px;           /* the black line under the header */

  --radius-s: 3px;
  --radius: 5px;
}

@media (min-width: 48em) {
  :root {
    --gutter: 2rem;
    --header-h: 5rem;
  }
}