/**
* Global Variables
* Created By: RubicoTech (Philip Pradeep)
* @Package SBX Genesis Collection
*/

:root {
    /* Base Colors */
    --black-100: rgba(0, 0, 0, 1);
    --black-90: rgba(0, 0, 0, .9);
    --black-75: rgba(0, 0, 0, .75);
    --black-50: rgba(0, 0, 0, .5);
    --black-25: rgba(0, 0, 0, .25);
    --black-10: rgba(0, 0, 0, .1);

    --white-100: rgba(255, 255, 255, 1);
    --white-90: rgba(255, 255, 255, .9);
    --white-75: rgba(255, 255, 255, .75);
    --white-50: rgba(255, 255, 255, .50);
    --white-25: rgba(255, 255, 255, .25);
    --white-10: rgba(255, 255, 255, .1);

    --dark-grey: #c4c4c4;

    /* Primary Colors */
    --dark-purple-100: rgba(80, 3, 127, 1);
    --dark-purple-70: rgba(80, 3, 127, .7);
    --dark-purple-50: rgba(80, 3, 127, .5);
    --dark-purple-25: rgba(80, 3, 127, .25);
    --dark-purple-10: rgba(80, 3, 127, .1);

    --dark-orange-100: rgba(255, 130, 4, 1);
    --dark-orange-hover: #FF9B36;
    --dark-orange-50: rgba(255, 130, 4, .5);
    --dark-orange-25: rgba(255, 130, 4, .25);
    --dark-orange-10: #FFF3E6;

    /* Secondary Colors */
    --dark-teal-100: rgba(0, 161, 156, 1);
    --teal-100: rgba(0, 191, 184, 1);
    --teal-50: rgba(0, 191, 184, 0.5);
    --teal-35: rgba(0, 191, 184, 0.35);
    --teal-15: rgba(0, 191, 184, 0.15);

    --pink-100: rgba(234, 190, 188, 1);
    --pink-80: rgba(234, 190, 188, 0.8);
    --pink-25: rgba(234, 190, 188, 0.25);
    --pink-10: rgba(234, 190, 188, 0.1);

    --blue-100: rgba(140, 132, 227, 1);
    --blue-80: rgba(140, 132, 227, 0.8);
    --blue-50: rgba(140, 132, 227, 0.5);
    --blue-25: rgba(140, 132, 227, 0.25);
    --blue-10: rgba(140, 132, 227, 0.1);

    /* Gradient */
    --gradient-hero--purple: linear-gradient(135deg, rgba(140, 132, 227, 0.2) 0%, rgba(140, 132, 227, 0.5) 100%);
    --gradient-bottom--purple: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(140, 132, 227, 0.3) 100%);
    --gradient-top--purple: linear-gradient(to bottom, rgba(140, 132, 227, 0.3) 0%, rgba(255, 255, 255, 1) 100%);
    --gradient-mid-purple: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(140, 132, 227, 0.4) 50%, rgba(255, 255, 255, 1) 100%);;

    --gradient-hero--orange: linear-gradient(45deg, rgba(255, 130, 4, 0.15) 0%, rgba(255, 130, 4, 0.3) 100%);
    --gradient-bottom--orange: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 130, 4, 0.3) 100%);
    --gradient-top--orange: linear-gradient(to bottom, rgba(255, 130, 4, 0.3) 0%, rgba(255, 255, 255, 1) 100%);
    --gradient-mid-orange: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 130, 4, 0.3) 50%, rgba(255, 255, 255, 1) 100%);

    --gradient-teal: linear-gradient(135deg, rgba(0, 191, 184, 0.15) 0%, rgba(0, 191, 184, 0.4) 100%);

    /* Shadows */
    --shadow-10: 0 3px 10px rgba(44, 3, 69, .15);
    --shadow-20: 0 8px 20px rgba(44, 3, 69, .15);
    --shadow-30: 0 5px 30px rgba(44, 3, 69, 0.15);
    --shadow-blk-30: 0 5px 30px rgba(0, 0, 0, 0.75);
    --shadow-teal-20: 0 8px 20px rgba(0, 191, 184, 0.15);

    /* Font Families */
    --ZirkelRegular-400: 'Zirkel';
    --ZirkelMedium-500: 'zirkelmedium';
    --ZirkelSemiBold-600: 'zirkelsemibold';
    --ZirkelBold-700: 'zirkelbold';

    /* Interface */
    --warning-red: #D9475F; /* Errors */
    --positive-green: #75B96C; /*Confirmations*/
    --tangerine: #FFA75A; /* Alerts/warnings */
    --focus-cyan: #00768F; /* use on white, sunrise-beige-20, dark-blue-20 backgrounds */
    --focus-light-cyan: #00B0E9; /* use on --dark-blue-100 backgrounds */

    /* Grid sistem */
    --column: (100% -(2 *var(--page-margin) +11 *var(--gutter))) / 12;

    --columns--xl: 12;
    --page-margin--xl: 100px;
    --gutter--xl: 40px;

    --columns--l: 12;
    --page-margin--l: 80px;
    --gutter--l: 20px;

    --columns--m: 12;
    --page-margin--m: 20px;
    --gutter--m: 20px;

    --columns--s: 6;
    --page-margin--s: 20px;
    --gutter--s: 20px;

    --columns--xs: 4;
    --page-margin--xs: 20px;
    --gutter--xs: 20px;

    /* Module spacing */
    --module-spacing--xl: 100px;
    --module-spacing--l: 100px;
    --module-spacing--m: 50px;
    --module-spacing--s: 50px;
    --module-spacing--xs: 50px;

    /* Text spacing */
    --text-spacing--xl: 40px;
    --text-spacing--l: 30px;
    --text-spacing--m: 20px;
    --text-spacing--s: 15px;
    --text-spacing--xs: 10px;

    /* Header spacing */
    --header-spacing--xl: 50px;
    --header-spacing--l: 50px;
    --header-spacing--m: 40px;
    --header-spacing--s: 30px;
    --header-spacing--xs: 30px;

    /* -- Card Inner Spacing -- */
    --card-s-body--l: 40px;
    --card-s-body--m: 40px;
    --card-s-body--s: 40px;
    --card-s-icon-spacing-l: 40px;
    --card-s-icon-spacing-m: 30px;
    --card-s-icon-spacing-s: 30px;


    /* Statement to mobile */
    --page-margin: var(--page-margin--xs);
    --gutter: var(--gutter--xs);
    --columns: var(--columns--xs);

    --module-spacing: var(--module-spacing--xs);
    --text-spacing-l: var(--text-spacing--l);
    --text-spacing-s: var(--text-spacing--s);
    --headline-deco-spacing: 12px;
    --header-spacing: var(--header-spacing--xs);

    --card-s-body: var(--card-s-body--s);
    --card-icon-spacing: var(--card-s-icon-spacing-s);
}

/*Breakpoints*/
@media only screen and (min-width: 576px) {
    :root {
        --page-margin: var(--page-margin--s);
        --gutter: var(--gutter--s);
        --columns: var(--columns--s);

        --module-spacing: var(--module-spacing--s);
        --text-spacing: var(--text-spacing--s);
        --header-spacing: var(--header-spacing--s);

        --card-s-body: var(--card-s-body--s);
        --card-s-icon-spacing: var(--card-s-icon-spacing-s);
    }

}

@media only screen and (min-width: 768px) {
    :root {
        --page-margin: var(--page-margin--m);
        --gutter: var(--gutter--m);
        --columns: var(--columns--m);
        --module-spacing: var(--module-spacing--m);
        --text-spacing: var(--text-spacing--m);
        --header-spacing: var(--header-spacing--m);

        --card-s-body: var(--card-s-body--m);
        --card-s-icon-spacing: var(--card-s-icon-spacing-m);
    }
}

@media only screen and (min-width: 1024px) {
    :root {
        --page-margin: var(--page-margin--l);
        --gutter: var(--gutter--l);
        --columns: var(--columns--l);
        --module-spacing: var(--module-spacing--l);
        --text-spacing: var(--text-spacing--l);
        --header-spacing: var(--header-spacing--l);

        --card-s-body: var(--card-s-body--l);
        --card-s-icon-spacing: var(--card-s-icon-spacing-l);
    }
}

@media only screen and (min-width: 1440px) {
    :root {
        --page-margin: var(--page-margin--xl);
        --gutter: var(--gutter--xl);
        --columns: var(--columns--xl);
        --module-spacing: var(--module-spacing--xl);
        --text-spacing: var(--text-spacing--xl);
        --header-spacing: var(--header-spacing--xl);

    }
}