:root {
    --primary: #013863;
    --primary-comp: #fff;
    --primary-text: #fff;
    --primary-lighter: #006cbf;

    --secondary: #00a99f;
    --secondary-comp: #fff;
    --secondary-text: #fff;
    --secondary-lighter: #00ddce;

    --text: #010a17;
    --title: #0e2136;
    --text-strong: var(--primary);
    --background: #f7f2ec;
    --highlight: #ffd500;

    --alt-text: #fbf4ea;
    --alt-title: var(--alt-text);
    --alt-text-strong: var(--highlight);
    --alt-background: #072343;
    --alt-highlight: var(--secondary);

    --placeholder-input: #aaa;

    --font-title: "Big Shoulders", sans-serif;
    --font-main: "Poppins", sans-serif;

    /* current-color-x will get values from normal to -alt colors depending on block perferences */
    --current-text: var(--text);
    --current-title: var(--title);
    --current-text-strong: var(--text-strong);
    --current-background: var(--background);
    --current-highlight: var(--highlight);

    --gutters: 5rem;
}

.alt {
    --current-text: var(--alt-text);
    --current-title: var(--alt-title);
    --current-text-strong: var(--alt-text-strong);
    --current-background: var(--alt-background);
    --current-highlight: var(--alt-highlight);
}

.noalt {
    --current-text: var(--text);
    --current-title: var(--title);
    --current-text-strong: var(--text-strong);
    --current-background: var(--background);
    --current-highlight: var(--highlight);
}