/*
 * The base of every page of Zesiger.net: the two typefaces and the design
 * tokens. world.css (the site with its 3D world, labs/) and legal.css (the
 * legal pages) build on it; each page loads it first.
 */
@font-face {
  font-family: Satoshi;
  src: url("/static/fonts/satoshi/satoshi-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Source;
  src: url("/static/fonts/source-sans-pro/SourceSansPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* (its own bold, so bold text is never a thickened regular) */
@font-face {
  font-family: Source;
  src: url("/static/fonts/source-sans-pro/SourceSansPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --navy: #1b3263;
  --navy-06: rgba(27, 50, 99, 0.06);
  --blue: #1f66dc;
  --blue-hover: #1a58c2;
  --blue-soft: #e8f1fd;
  --sky: #e4eefb;
  /* text in ink, what goes with it muted (at least 4.5:1 on white), hairlines between parts */
  --ink: var(--navy);
  --muted: rgba(27, 50, 99, 0.7);
  --line: rgba(27, 50, 99, 0.1);
  --line-strong: rgba(27, 50, 99, 0.2);
  /* the page under the content and a light wash under what is pointed at */
  --page: #fff;
  --hover: var(--navy-06);
  /* surfaces over the 3D world: solid enough to read on any picture, with no blur behind them (blurring the moving world again every frame costs the graphics chip) */
  --surface: rgba(255, 255, 255, 0.94);
  --shadow: 0 1px 2px rgba(27, 50, 99, 0.06), 0 12px 32px -12px rgba(27, 50, 99, 0.28);
  --radius-s: 10px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* the logo comes as WebP with a GIF behind it: the picture element takes no part in the layout */
picture {
  display: contents;
}