@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: optional;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: optional;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.otf") format("opentype");
    font-style: normal;
    font-weight: 600;
    font-display: optional;
}

body {
    margin: var(--space-2);
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-product);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-leading);
}

h1, h2, h3 {
    font-family: var(--font-brand);
    margin-block: var(--space-4);
}

h1 {
    font-size: var(--type-h1-size);
    font-weight: var(--type-h1-weight);
    line-height: var(--type-h1-leading);
}

h2 {
    font-size: var(--type-h2-size);
    font-weight: var(--type-h2-weight);
    line-height: var(--type-h2-leading);
}

h3 {
    font-size: var(--type-h3-size);
    font-weight: var(--type-h3-weight);
    line-height: var(--type-h3-leading);
}

p {
    margin-block: var(--space-4);
}

button, .ui-button {
    font-family: var(--font-product);
    font-size: var(--type-button-size);
    font-weight: var(--type-button-weight);
    line-height: var(--type-button-leading);
    color: var(--color-text);
}

label, .type-label {
    font-family: var(--font-product);
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-label-leading);
}

small, .type-caption {
    font-family: var(--font-product);
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-weight);
    line-height: var(--type-caption-leading);
}

a {
    color: var(--color-primary-dark);
}

:focus-visible {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
}

dialog {
    background: var(--color-surface);
    color: var(--color-text);
}