@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --iot-bg: #f4f6f7;
  --iot-panel: #ffffff;
  --iot-panel-soft: #fafbfb;
  --iot-ink: #12171a;
  --iot-text: #4a565c;
  --iot-muted: #7c8b92;
  --iot-line: #dce3e6;
  --iot-line-strong: #c3cdd2;
  --iot-accent: #ff5a1f;
  --iot-blue: #1b4dff;
  --iot-success: #0e8f6e;
  --iot-warning: #b7791f;
  --iot-danger: #d93025;
  --iot-font-ui: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --iot-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --iot-t0: 14px;
  --iot-t1: 16px;
  --iot-t2: 18px;
  --iot-t3: 22px;
  --iot-t4: 28px;
  --iot-t5: 34px;
  --iot-t6: 44px;
}

html,
body {
  color: var(--iot-ink);
  font-family: var(--iot-font-ui);
  font-size: var(--iot-t0);
  font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
  font: inherit;
}

[data-pencil-name],
[data-pencil-name] * {
  font-family: var(--iot-font-ui);
}

[data-pencil-name] [style*="JetBrains Mono"],
[style*="font-family: JetBrains Mono"] {
  font-family: var(--iot-font-mono) !important;
}