/* ============================================================
   Shelfie. Tactile neo-brutalism: stamps, keycaps, an LCD and
   giant condensed type on near-black, with loud flat colour.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-100-900.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/spacemono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/spacemono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen-400.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #0d0d0d;
  --night: #0d0d0d;
  --night-2: #161616;
  --night-3: #222222;
  --paper: #f6f1e6;
  --cream: #efe9dc;
  --white: #ffffff;
  --blue: #2b3bff;
  --orange: #ff5a1f;
  --yellow: #ffd60a;
  --red: #ff2b2b;
  --cyan: #25c7ff;
  --pink: #ff6ad5;
  --lime: #e7ff3d;
  --violet: #7a3cff;
  --lcd: #1b2116;
  --lcd-ink: #c4ff6a;

  --stage: var(--blue);
  --stage-ink: #fff;

  --display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pixel: "Silkscreen", "Space Mono", monospace;

  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* stamp width: fits the stage on any phone */
  --sw: clamp(150px, min(62vw, 250px, calc((100dvh - 470px) / 1.38)), 250px);
}