/* Shared tokens: the same palette as the profile panels, one violet accent. */

@font-face {
  font-family: "IMM Pixel";
  src: url("../assets/fonts/imm-pixel.ttf") format("truetype");
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Golos Text";
  src: url("../assets/fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  src: url("../assets/fonts/golos-text-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #08080b;
  --panel: #0d0d12;
  --line: #1c1c26;
  --ink: #d6d6de;
  --dim: #6f6f80; /* inactive pixel labels of 24 px and larger, lines; too dark for small text */
  --muted: #9090a2; /* secondary text; 6:1 on --bg */
  --acc: #8f7dff; /* the violet of the screens and the headlight; selected row and sound state only */

  --font-display: "IMM Pixel", monospace; /* caps only, 8 px grid: sizes are multiples of 8 */
  --font-text: "Golos Text", sans-serif;

  --fs-display-xs: 8px;
  --fs-display-s: 16px;
  --fs-display-m: 24px;
  --fs-display-l: 40px;
  --fs-display-xl: 64px;
  --fs-display-xxl: 96px;
  --fs-text: 16px;
  --fs-text-s: 14px;

  --beat: 452.525ms;
  --half: 226.26ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: dark;
}

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  line-height: 1.5;
}

.display {
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  font-smooth: never;
}