/*
 * Global TONEART typography.
 *
 * Keep this stylesheet after the legacy and Hyva bundles so their Roboto,
 * Inter and Tailwind defaults cannot replace the shop's brand typeface.
 */
@font-face {
    font-family: 'Toneart';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/toneart/toneartlight.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/toneart/toneartlightitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/toneart/toneartregular.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/toneart/toneartregularitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/toneart/toneartregular.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/toneart/toneartregularitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/toneart/toneartmedium.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/toneart/toneartmediumitalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/toneart/toneartbold.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/toneart/toneartbolditalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/toneart/toneartbold.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/toneart/toneartbolditalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/toneart/toneartblack.woff2') format('woff2');
}

@font-face {
    font-family: 'Toneart';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/toneart/toneartblackitalic.woff2') format('woff2');
}

:root {
    --toneart-font-family: 'Toneart', Arial, sans-serif;
    --font-sans: var(--toneart-font-family);
    --default-font-family: var(--toneart-font-family);
    --font-family: var(--toneart-font-family);
}

html,
body,
input,
textarea,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
label,
legend,
li,
dt,
dd,
th,
td,
blockquote,
address,
figcaption,
summary,
.text,
.action,
.btn,
.button,
.page-title,
.product-item-name,
.product-name,
.navigation,
.nav-sections,
.toneart-hyva-header,
.toneart-hyva-header :where(a, button, div, input, label, li, p, span, strong) {
    font-family: var(--toneart-font-family) !important;
}

/*
 * Customer and search styles use page-scoped Syne/Inter declarations with
 * higher specificity. Keep the override limited to elements that carry text
 * so icon-font classes and SVG controls retain their own font definitions.
 */
body[class] .page-wrapper :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    button,
    input,
    textarea,
    select,
    label,
    legend,
    li,
    dt,
    dd,
    th,
    td,
    strong,
    em,
    small,
    blockquote,
    address,
    figcaption,
    summary
) {
    font-family: var(--toneart-font-family) !important;
}