/* 1. ROOT SELECTORS
-- spacing, typography, colors, responsiveness */
:root {
    height: 100%;
    
    /* SPACING */
    --spacing-scale: 1.5;
    --space-m: clamp(1rem, 3.333vw + 0.333rem, 3rem);

    /* orig clamp(1rem, 4vw, 64px) */
    --grid-gap: 1.5rem;

    /* COMPONENTS */
    --btn-border-radius: 10px;
    --btn-border-width: 1px;
    --btn-padding-block: 0.75em;
    --btn-padding-inline: 1.5em;

    /* TYPOGRAPHY */
    --font-size: 16px;
    font-size: var(--font-size);
    --text-scale: 1.414;

    /* popular scales: 1.067, 1.125, 1.2, 1.250, 1.333, 1.414, 1.5, 1.618 */
    --text-m: clamp(1rem, 1rem + 0.1vw, 4rem);
    --text-line-height: 1.5;
    --heading-line-height: 1.2;

    /* COLOR SYSTEM */
    --primary-color: blue;
    --secondary-color: gray;

    /* SPACING scale custom properties */
    --space-xxs: calc(var(--space-xs) / var(--spacing-scale));
    --space-xs: calc(var(--space-s) / var(--spacing-scale));
    --space-s: calc(var(--space-m) / var(--spacing-scale));
    --space-l: calc(var(--space-m) * var(--spacing-scale));
    --space-xl: calc(var(--space-l) * var(--spacing-scale));
    --space-xxl: calc(var(--space-xl) * var(--spacing-scale));
    --space-3xl: calc(var(--space-xxl) * var(--spacing-scale));

    /* TYPOGRAPHY scale custom properties */
    --text-xxs: calc(var(--text-xs) / var(--text-scale));
    --text-xs: calc(var(--text-s) / var(--text-scale));
    --text-s: calc(var(--text-m) / var(--text-scale));
    --text-l: calc(var(--text-m) * var(--text-scale));
    --text-xl: calc(var(--text-l) * var(--text-scale));
    --text-xxl: calc(var(--text-xl) * var(--text-scale));
    --text-3xl: calc(var(--text-xxl) * var(--text-scale));
    --h6: clamp( 12px, var(--text-xs), 4rem );
    --h5: clamp( 12px, var(--text-s), 4rem );

    /* limit how small h5, h6 can get */
    --h4: var(--text-m);
    --h3: var(--text-l);
    --h2: var(--text-xl);
    --h1: var(--text-xxl);
}

@media (max-width: 1440px) {
    :root {
        --spacing-scale: 1.333;
        --text-scale: 1.250;
    }
}

/* 2. THEME
-- typography, colors, header, navigation, sidebars, footer, overrides */
/* Typography selectors and classes */
html, body {
  margin: 0;
  padding: 0;
}
body {
    font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-weight: 400;
    background: radial-gradient(circle, rgb(2 0 36 / 0.14601814847032568) 0%, rgb(6 88 210 / 0.559) 62%, rgb(96 152 236) 100%);
}

.text--xxs {
    font-size: var(--text-xxs);
}

.text--xs {
    font-size: var(--text-xs);
}

.text--s {
    font-size: var(--text-s);
}

.text--m {
    font-size: var(--text-m);
}

/* body text */
.text--l {
    font-size: var(--text-l);
}

.text--xl {
    font-size: var(--text-xl);
}

.text--xxl {
    font-size: var(--text-xxl);
}

.text--3xl {
    font-size: var(--text-3xl);
}

/* h6, .h6 { font-size: var(--h6); }
h5, .h5 { font-size: var(--h5); }
h4, .h4 { font-size: var(--h4); }
h3, .h3 { font-size: var(--h3); }
h2, .h2 { font-size: var(--h2); }
h1, .h1 { font-size: var(--h1); } */
:is(h1, h2, h3, h4, h5, h6) {
    line-height: var(--heading-line-height);
    text-align: center;
}

body,
button,
input,
select,
textarea {
    font-size: var(--text-m, inherit);
    line-height: var(--text-line-height);
    min-height: 0vw;

    /* safari fix */
}

/* 3. CUSTOM CLASSES
-- pages, layouts, components */
body > section {
    padding-block: var(--space-s, .75rem);
    padding-inline: var(--space-m, 1.5rem);
    flex-direction: column;
    display: flex;
    align-items: stretch;
    align-content: stretch;
    align-self: stretch;
    flex-grow: 1;
}

button,
a.button,
input[type=button],
input[type=reset],
input[type=submit],
.fluentform .frm-fluent-form .ff-btn,
[class*="btn--"],
[class*='button--'],
.gb-button[class*='button--'],
[class*="gbp-button--"],
[class*="gb-button--"] {
    width: fit-content;
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
}