@font-face {
    font-family: 'Rabar014';
    src: url('../fonts/rabar_014.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rabar021';
    src: url('../fonts/rabar_021.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rabar037';
    src: url('../fonts/rabar_037.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: 'Rabar021', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-heading: 'Rabar014', 'Rabar021', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-accent: 'Rabar037', 'Rabar021', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html body,
html body * {
    font-family: var(--font-body) !important;
}

html body :is(h1, h2, h3, h4, .app-title, .app-brand span, .app-group) {
    font-family: var(--font-heading) !important;
}

html body :is(.num, .app-chip, .app-pill, .app-seg, .btn, #idle-count, .code-input, .code) {
    font-family: var(--font-accent) !important;
}