@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: local("Clash Display ExtraLight"), local("Clash Display"),
         url("https://fonts.cdnfonts.com/s/65008/ClashDisplayExtralight.woff") format("woff");
}

@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local("Clash Display Light"), local("Clash Display"),
         url("https://fonts.cdnfonts.com/s/65008/ClashDisplayLight.woff") format("woff");
}

@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Clash Display Regular"), local("Clash Display"),
         url("https://fonts.cdnfonts.com/s/65008/ClashDisplayRegular.woff") format("woff");
}

@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local("Clash Display Medium"), local("Clash Display"),
         url("https://fonts.cdnfonts.com/s/65008/ClashDisplayMedium.woff") format("woff");
}

@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local("Clash Display Semibold"), local("Clash Display"),
         url("https://fonts.cdnfonts.com/s/65008/ClashDisplaySemibold.woff") format("woff");
}

@font-face {
    font-family: "Clash Display";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Clash Display Bold"), local("Clash Display"),
         url("https://fonts.cdnfonts.com/s/65008/ClashDisplayBold.woff") format("woff");
}

:root {
    --font-display: "Clash Display", "Manrope", Arial, sans-serif;
    --font-body: "Clash Display", "Manrope", Arial, sans-serif;
    --font-mono: "JetBrains Mono", Consolas, monospace;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
.mb-brand strong,
.studio-brand strong,
.upload-panel h2,
.library-title h2,
.track-row h3,
.audio-player h3,
.account-form h2,
.account-visual h1,
.dashboard-hero h1 {
    font-family: var(--font-display);
}

.studio-brand strong {
    font-weight: 600;
    letter-spacing: -.045em;
}

.upload-panel h2 {
    font-weight: 500;
    letter-spacing: -.04em;
}

.library-title h2,
.track-row h3,
.audio-player h3 {
    font-weight: 500;
    letter-spacing: -.025em;
}

.upload-intro,
.upload-field select,
.upload-field input,
.form-field input {
    font-family: var(--font-body);
}

.studio-kicker,
.role-pill,
.track-tag,
.upload-field > label,
.energy-field legend,
.energy-buttons span,
.drop-zone strong,
.upload-submit,
.upload-progress,
.library-title span,
.track-row,
.library-search button,
.library-search a,
.library-pagination,
.studio-user,
.studio-user button,
.player-timeline,
.player-volume,
.mb-btn,
.mb-navlinks {
    font-family: var(--font-mono);
}