/* Hi-Fi design tokens, shared by the popup and the welcome page. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo.woff2') format('woff2');
  font-weight: 500 800;
  font-stretch: 75% 125%;
  font-display: block;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-display: block;
}

:root {
  --panel: #E9E6E1;
  --panel-2: #DEDAD3;
  --ink: #1F1E1B;
  --silk: #6E6A63;
  --led: #FF6A1A;
  --led-glow: rgba(255, 106, 26, 0.6);
  --led-off: #CCC7BF;
  --hot: #F23D2E;
  --lcd: #1C1B19;
  --lcd-text: #FFB46A;
  --lcd-glow: rgba(255, 140, 60, 0.45);
  --lcd-dim: #4A463F;
  --vu-off: #2E2C28;
  --vu-low: #49D17D;
  --key-top: #F7F5F1;
  --key-bottom: #E2DED7;
  --key-edge: #C9C4BB;
  --key-shadow: #BBB5AB;
  --key-highlight: #FFFFFF;
  --knob-hi: #FBFAF7;
  --knob-mid: #E4E0DA;
  --knob-lo: #CFCAC2;
  --knob-shadow: rgba(60, 50, 40, 0.28);
  --toast-bg: #1F1E1B;
  --toast-fg: #FFFFFF;

  --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --panel: #252421;
    --panel-2: #2F2D2A;
    --ink: #EDEAE4;
    --silk: #9C978E;
    --led: #FF7A2E;
    --led-glow: rgba(255, 122, 46, 0.6);
    --led-off: #45423D;
    --hot: #FF4D3D;
    --lcd: #121110;
    --key-top: #3A3834;
    --key-bottom: #2E2C29;
    --key-edge: #1E1D1A;
    --key-shadow: #181715;
    --key-highlight: rgba(255, 255, 255, 0.08);
    --knob-hi: #5A5752;
    --knob-mid: #3A3834;
    --knob-lo: #2A2926;
    --knob-shadow: rgba(0, 0, 0, 0.5);
    --toast-bg: #EDEAE4;
    --toast-fg: #1F1E1B;
    color-scheme: dark;
  }
}