@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1g,200..1000&display=swap");
@import "./app.css";

:root {
    --h1-size-req: 5vw;
    --h2-size-req: calc(8vw / var(--golden-ratio));
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Nunito Sans", sans-serif;
    padding: 0;
    margin: 0;
}

.text-negative {
    color: var(--text-negative);
}

.text-center {
    text-align: center;
}

.rz-html-editor-content {
    color: black;
    background-color: white;
}

h1 {
    font-size: clamp(1rem, 5vw, 4rem);
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
}

h2 {
    font-size: clamp(calc(1rem / var(--golden-ratio)), var(--h1-size-req), calc(4rem / var(--golden-ratio)));
    font-family: "Nunito Sans", sans-serif;
    font-style: normal;
}

.title {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 2.0rem;
    font-variation-settings: "wdth" 100, "YTLC" 500;
}

.header {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    font-variation-settings: "wdth" 100, "YTLC" 500;
}

.text-price {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    font-variation-settings: "wdth" 100, "YTLC" 500;
    color: var(--accent);
}

.brand-title {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    font-variation-settings: "wdth" 100, "YTLC" 500;
    color: var(--text-on-primary)
}

.label {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1rem;
}

body {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1rem;
}

pre {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1rem;
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.text-accent {
    color: var(--accent);
}