/* Shared by both sides. src/views/layout.tsx loads it first, before client.css or staff.css. It holds
   the Metropolis faces, the LIME and ink tokens, today's Xfer page gradient, and the base rules
   (no italics, focus, selection) that keep the client and staff sides one family. Tokens that only
   one side uses live in that side's stylesheet.

   Metropolis by Chris Simpson is the face today's Xfer client links use. It is released into the
   public domain under the Unlicense (public/assets/fonts/UNLICENSE.txt). The original repo,
   github.com/chrismsimpson/Metropolis, has been deleted; github.com/dw5/Metropolis is an archived
   copy with the same UNLICENSE. It is self-hosted, so there are no third-party font
   requests and the CSP stays 'self'. There are no italic files, so nothing may be italic.

   Type rules for both sides: thin weights are beautiful large and risky small. Light (300) is for
   titles and for text of 15px and up, in dark ink. Thin (100) and ExtraLight (200) are only for
   display sizes (28px and up). Small labels, buttons and numbers use Regular or Medium. */

@font-face { font-family: "Metropolis"; font-weight: 100; font-display: swap; src: url("/assets/fonts/Metropolis-Thin.woff2") format("woff2"); }
@font-face { font-family: "Metropolis"; font-weight: 200; font-display: swap; src: url("/assets/fonts/Metropolis-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "Metropolis"; font-weight: 300; font-display: swap; src: url("/assets/fonts/Metropolis-Light.woff2") format("woff2"); }
@font-face { font-family: "Metropolis"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Metropolis-Regular.woff2") format("woff2"); }
@font-face { font-family: "Metropolis"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Metropolis-Medium.woff2") format("woff2"); }
@font-face { font-family: "Metropolis"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Metropolis-SemiBold.woff2") format("woff2"); }

:root {
  /* LIME brand */
  --teal: #005d4c; /* primary actions, the selected file, focus */
  --navy: #0b2652;
  --black: #1a1919;

  /* Ink. Thin strokes get dark ink, not mid-grey. Ratios are against #ededed, the gradient's
     darkest grey (white is higher). */
  --ink: #142c61; /* today's Xfer link navy: titles, names, buttons. 11.5:1 */
  --ink-2: #3a4766; /* secondary text and detail lines; Light is fine. 7.9:1 */
  --ink-3: #485472; /* labels, sizes, counts; Regular or Medium. 6.4:1 */

  /* Today's Xfer page: white, #ededed at 58%, white. */
  --page: #ffffff;
  --page-mid: #ededed;

  /* One focus ring and one selection on both sides. */
  --focus: var(--teal); /* 7.6:1 on white */
  --focus-on-dark: #7ad8c1; /* on the black stage */
  --selection: #c9e0da; /* navy ink on it: 9.7:1 */

  --font: "Metropolis", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* One radius scale: controls, then cards, sheets and dialogs. */
  --radius: 4px;
  --radius-lg: 10px;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* No italic font files exist, so nothing may ask for italics (the UA's em, i, cite and address
   defaults included). font-synthesis below stops the browser from faking them. */
*,
*::before,
*::after,
::placeholder {
  font-style: normal;
}

html {
  background: var(--page);
  font-synthesis: none; /* no faux italics or faux bold */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The body stays transparent so the gradient layer below shows through it. */
body {
  margin: 0;
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The gradient is pinned to the screen with a fixed layer, which also works on iOS. A long list
   then scrolls over one gradient instead of repeating it on every screen. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background: linear-gradient(to bottom, var(--page) 0%, var(--page-mid) 58%, var(--page) 100%);
  pointer-events: none;
}

[hidden] {
  display: none !important;
}

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

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}