/*
 * Element defaults: the font faces, the page's type and colour, the focus ring
 * and reduced motion. Anything with a class name belongs in components/.
 *
 * Propshaft resolves the relative url()s below against app/assets/fonts and
 * rewrites them to digested paths. Every face is woff2 only, with
 * `font-display: swap`, and every weight and style the app sets has a real
 * file behind it — nothing is synthesised (see `font-synthesis` on html).
 */
@layer base {
  /*
   * IBM Plex Sans: UI and data. IBM's own Latin-1 split, which covers ASCII,
   * Latin-1, the dashes, curly quotes, the ellipsis, the minus sign and the ‡
   * the paywall masks with. Its figures are lining and tabular by default.
   */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/IBMPlexSans-Regular-Latin1-6115bad7.woff2") format("woff2");
  }

  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/IBMPlexSans-Italic-Latin1-787ce8b2.woff2") format("woff2");
  }

  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/IBMPlexSans-Medium-Latin1-1f4326e4.woff2") format("woff2");
  }

  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/IBMPlexSans-SemiBold-Latin1-bec83101.woff2") format("woff2");
  }

  /* Source Serif 4: prose and headings. Adobe's static text cuts, unmodified. */
  @font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/SourceSerif4-Regular-57e32b66.woff2") format("woff2");
  }

  @font-face {
    font-family: "Source Serif 4";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/SourceSerif4-It-f8101589.woff2") format("woff2");
  }

  @font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/SourceSerif4-Semibold-b1e7c947.woff2") format("woff2");
  }

  html {
    font-family: var(--font-ui);
    font-size: 100%;
    line-height: 1.5;
    color: var(--color-ink);
    background-color: var(--color-surface);
    /* A weight or style without a file is a bug to fix, not one to fake. */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Tables are where figures are compared down a column. */
  td, th {
    font-variant-numeric: tabular-nums lining-nums;
  }

  ::selection {
    background-color: var(--color-accent-tint-2);
    color: var(--color-ink);
  }

  /*
   * One ring, everywhere, for keyboard focus. Mouse focus draws nothing; a
   * text field counts as keyboard focus in every browser, so inputs always
   * show it.
   */
  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  kbd {
    font-family: var(--font-ui);
  }

  /*
   * The shimmer, the drawer's slide and every transition stop for readers who
   * ask for less motion. `!important` because this has to beat any duration a
   * component sets, whichever layer it is in — the one other place the app
   * uses it besides `[hidden]`.
   */
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}