/**
 * ----------------------------------------------------------------------------
 * Bubbs theme
 * Version: Beta
 * Theme for Halfmoon 2.x.x
 * Copyright 2022 - Present, NFTY Finance. All rights reserved
 * ----------------------------------------------------------------------------
 * The above notice must be included in its entirety when this file is used.
 */

@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700;900&display=swap");
@font-face {
    font-family: "BNNuma";
    src: url("BNNuma.otf");
}

:root {
    /* Font related (sizes, weights, family, etc.) */

    --base-font-family: "Josefin Sans", sans-serif;
    --base-font-size: 1.6rem;
    --small-font-size: 1.4rem;
    --large-font-size: 1.8rem;
    --bold-font-weight: 600;

    /* Base background colors */

    --base-body-bg-color: var(--gray-color-very-light);

    /* Border related (mostly for utilities) */

    --base-border-radius: 0.6rem;
}



/* System colors */

:root {
    /* Bubs primary */

    --bubs-primary-color-hue: 251;
    --bubs-primary-color-saturation: 96%;
    --bubs-primary-color-lightness: 70%;
    --bubs-primary-color-lightness-step-up-1: 75%;
    --bubs-primary-color-lightness-step-up-2: 80%;
    --bubs-primary-color-lightness-step-down-1: 65%;
    --bubs-primary-color-lightness-step-down-2: 60%;

    --bubs-primary-color-hsl: var(--bubs-primary-color-hue), var(--bubs-primary-color-saturation), var(--bubs-primary-color-lightness);
    --bubs-primary-color-light-hsl: var(--bubs-primary-color-hue), var(--bubs-primary-color-saturation), var(--bubs-primary-color-lightness-step-up-2);
    --bubs-primary-color-very-light-hsl: var(--bubs-primary-color-hue), var(--bubs-primary-color-saturation), 95%;
    --bubs-primary-color-dim-hsl: var(--bubs-primary-color-hue), var(--bubs-primary-color-saturation), var(--bubs-primary-color-lightness-step-down-2);
    --bubs-primary-color-very-dim-hsl: var(--bubs-primary-color-hue), 15%, 15%;

    --bubs-primary-color: hsl(var(--bubs-primary-color-hsl));
    --bubs-primary-color-light: hsl(var(--bubs-primary-color-light-hsl));
    --bubs-primary-color-very-light: hsl(var(--bubs-primary-color-very-light-hsl));
    --bubs-primary-color-dim: hsl(var(--bubs-primary-color-dim-hsl));
    --bubs-primary-color-very-dim: hsl(var(--bubs-primary-color-very-dim-hsl));

    --text-color-on-bubs-primary-color-bg: var(--white-color);

    /* Bubs secondary */

    --bubs-secondary-color-hue: 33;
    --bubs-secondary-color-saturation: 71%;
    --bubs-secondary-color-lightness: 87.5%;
    --bubs-secondary-color-lightness-step-up-1: 90%;
    --bubs-secondary-color-lightness-step-up-2: 92.5%;
    --bubs-secondary-color-lightness-step-down-1: 80%;
    --bubs-secondary-color-lightness-step-down-2: 75%;

    --bubs-secondary-color-hsl: var(--bubs-secondary-color-hue), var(--bubs-secondary-color-saturation), var(--bubs-secondary-color-lightness);
    --bubs-secondary-color-light-hsl: var(--bubs-secondary-color-hue), var(--bubs-secondary-color-saturation), var(--bubs-secondary-color-lightness-step-up-2);
    --bubs-secondary-color-very-light-hsl: var(--bubs-secondary-color-hue), var(--bubs-secondary-color-saturation), 95%;
    --bubs-secondary-color-dim-hsl: var(--bubs-secondary-color-hue), var(--bubs-secondary-color-saturation), var(--bubs-secondary-color-lightness-step-down-2);
    --bubs-secondary-color-very-dim-hsl: var(--bubs-secondary-color-hue), 15%, 15%;

    --bubs-secondary-color: hsl(var(--bubs-secondary-color-hsl));
    --bubs-secondary-color-light: hsl(var(--bubs-secondary-color-light-hsl));
    --bubs-secondary-color-very-light: hsl(var(--bubs-secondary-color-very-light-hsl));
    --bubs-secondary-color-dim: hsl(var(--bubs-secondary-color-dim-hsl));
    --bubs-secondary-color-very-dim: hsl(var(--bubs-secondary-color-very-dim-hsl));

    --text-color-on-bubs-secondary-color-bg: var(--black-color);
}

/* Context colors */

:root {
    /* Primary colors */

    --primary-color-hue: var(--bubs-primary-color-hue);
    --primary-color-saturation: var(--bubs-primary-color-saturation);
    --primary-color-lightness: var(--bubs-primary-color-lightness);
    --primary-color-lightness-step-up-1: var(--bubs-primary-color-lightness-step-up-1);
    --primary-color-lightness-step-up-2: var(--bubs-primary-color-lightness-step-up-2);
    --primary-color-lightness-step-down-1: var(--bubs-primary-color-lightness-step-down-1);
    --primary-color-lightness-step-down-2: var(--bubs-primary-color-lightness-step-down-2);

    --primary-color-hsl: var(--bubs-primary-color-hsl);
    --primary-color-light-hsl: var(--bubs-primary-color-light-hsl);
    --primary-color-very-light-hsl: var(--bubs-primary-color-very-light-hsl);
    --primary-color-dim-hsl: var(--bubs-primary-color-dim-hsl);
    --primary-color-very-dim-hsl: var(--bubs-primary-color-very-dim-hsl);

    --primary-color: var(--bubs-primary-color);
    --primary-color-light: var(--bubs-primary-color-light);
    --primary-color-very-light: var(--bubs-primary-color-very-light);
    --primary-color-dim: var(--bubs-primary-color-dim);
    --primary-color-very-dim: var(--bubs-primary-color-very-dim);

    --text-color-on-primary-color-bg: var(--text-color-on-bubs-primary-color-bg);

    /* Secondary colors */

    --secondary-color-hue: var(--bubs-secondary-color-hue);
    --secondary-color-saturation: var(--bubs-secondary-color-saturation);
    --secondary-color-lightness: var(--bubs-secondary-color-lightness);
    --secondary-color-lightness-step-up-1: var(--bubs-secondary-color-lightness-step-up-1);
    --secondary-color-lightness-step-up-2: var(--bubs-secondary-color-lightness-step-up-2);
    --secondary-color-lightness-step-down-1: var(--bubs-secondary-color-lightness-step-down-1);
    --secondary-color-lightness-step-down-2: var(--bubs-secondary-color-lightness-step-down-2);

    --secondary-color-hsl: var(--bubs-secondary-color-hsl);
    --secondary-color-light-hsl: var(--bubs-secondary-color-light-hsl);
    --secondary-color-very-light-hsl: var(--bubs-secondary-color-very-light-hsl);
    --secondary-color-dim-hsl: var(--bubs-secondary-color-dim-hsl);
    --secondary-color-very-dim-hsl: var(--bubs-secondary-color-very-dim-hsl);

    --secondary-color: var(--bubs-secondary-color);
    --secondary-color-light: var(--bubs-secondary-color-light);
    --secondary-color-very-light: var(--bubs-secondary-color-very-light);
    --secondary-color-dim: var(--bubs-secondary-color-dim);
    --secondary-color-very-dim: var(--bubs-secondary-color-very-dim);

    --text-color-on-secondary-color-bg: var(--text-color-on-bubs-secondary-color-bg);
}