/* HapticWear design system. Same tokens as the film, the stills and scripts/render_videos.py. */

@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/jost-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ground and panels */
  --bg: #09090B;
  --panel: #0E0E10;
  --panel-2: #151518;
  --border: #1A1A1E;

  /* type */
  --white: #FFFFFF;
  --sec: #CECED6;
  --txt: #AAAAAA;
  --mut: #444444;

  /* bands: one flat colour each */
  --low: #FFFFFF;
  --mid: #00E5FF;
  --high: #3B1EFF;

  /* glass: dark sheets over the vest. Neutral tints only (no blue cast). */
  --glass-top: rgba(21, 21, 24, 0.56);
  --glass-bottom: rgba(14, 14, 16, 0.44);
  --glass-solid: rgba(14, 14, 16, 0.94);      /* the lite tier, and browsers without backdrop blur */
  --blur: 26px;

  /* type families */
  --jost: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* motion */
  --io: cubic-bezier(0.65, 0, 0.35, 1);       /* easeInOutCubic, as the 3D transitions */
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-scene: 950ms;
}