@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --white: #ffffff;
}

:root{
    --bb-primary-color: #FFFFFF;
    --bb-primary-color-75opa: rgba(255,255,255,0.75);
    --bb-primary-color-50opa: rgba(255,255,255,0.5);
    --bb-primary-color-25opa: rgba(255,255,255,0.25);


    --bb-secondary-color: #fafafa;
    --bb-text-color: rgba(0,0,0,0.6);
    --bb-text-color-contrast: rgba(0,0,0,0.8);
    --bb-text-muted: rgba(0,0,0,0.5);
    --bb--inverted-text-color: #FFFFFF;
    --bb-accent-color: #3880FF;
    --bb-accent-color-contrasted: #306bd6;

    --bb-accent-color-75opa: rgba(56, 128, 255, 0.75);
    --bb-accent-color-50opa: rgba(56, 128, 255, 0.5);
    --bb-accent-color-25opa: rgba(56, 128, 255, 0.25);
    --bb-accent-color-10opa: rgba(56, 128, 255, 0.1);

    --bb-gray-full: rgba(0,0,0,0.8);
    --bb-gray-mid: rgba(0,0,0,0.2);
    --bb-gray-light: rgba(0,0,0,.05);

    --bb-success-color: #34C759;
    --bb-warning-color: #ffdd59;
    --bb-warning-color-low-contrast: rgba(255, 221, 89, 0.2);
    --bb-warning-color-contrast: rgb(250, 204, 20);
    --bb-danger-color: #f0506e;

    transition: all 200ms;
}

[data-theme="dark"]{
    --bb-primary-color: #1c1c26;
    --bb-primary-color-75opa: rgba(28,28,38,0.75);
    --bb-primary-color-50opa: rgba(28,28,38,0.5);
    --bb-primary-color-25opa: rgba(28,28,38,0.25);

    --bb-secondary-color: #222233;
    --bb-text-color: rgba(255,255,255,0.6);
    --bb-text-color-contrast: rgba(255,255,255,0.8);
    --bb-text-muted: rgba(255,255,255,0.5);
    --bb--inverted-text-color: #000000;
    --bb-accent-color: #3880FF;

    --bb-accent-color-75opa: rgba(56, 128, 255, 0.75);
    --bb-accent-color-50opa: rgba(56, 128, 255, 0.5);
    --bb-accent-color-25opa: rgba(56, 128, 255, 0.25);
    --bb-accent-color-10opa: rgba(56, 128, 255, 0.1);

    --bb-gray-full: rgba(255,255,255,0.8);
    --bb-gray-mid: rgba(255,255,255,0.2);
    --bb-gray-light: rgba(255,255,255,.05);

    --bb-success-color: #34C759;
    --bb-warning-color: #ffdd59;
    --bb-warning-color-low-contrast: rgba(255, 221, 89, 0.2);
    --bb-warning-color-contrast: rgba(255, 221, 89, 1);

    transition: all 200ms;
}