/* Our Default font style is google's  Barlow font */
@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');

:root {
    /* Regla Blue A.K.A Primary */
    --regla-primary-lighter: #E5F1FA;
    --regla-primary-light: #BFDFF2;
    --regla-primary: #1574A5;
    --regla-primary-dark: #083555;
    --regla-primary-darker: #052741;
    --regla-primary-subtle: #D0E3ED;
    /* Regla Orange A.K.A Secondary */
    --regla-secondary-lighter: #FFF4E5;
    --regla-secondary-light: #FCE2C4;
    --regla-secondary: #F49B3F;
    --regla-secondary-dark: #762F00;
    --regla-secondary-darker: #623E19;
    --regla-secondary-subtle: #FDEBD9;
    /* Success */
    --regla-success-lighter: #E9F6ED;
    --regla-success-light: #C2E8CD;
    --regla-success: #50A760;
    --regla-success-dark: #245B33;
    --regla-success-darker: #1D4626;
    /* Warning */
    --regla-warning-lighter: #FFF8E6;
    --regla-warning-light: #FCE5B7;
    --regla-warning: #D89B29;
    --regla-warning-dark: #734B10;
    --regla-warning-darker: #54390D;
    /* Error */
    --regla-error-lighter: #FAE9E9;
    --regla-error-light: #F5C3C3;
    --regla-error: #D14B4B;
    --regla-error-dark: #912222;
    --regla-error-darker: #621616;
    /* Info */
    --regla-info-lighter: #E7F4F6;
    --regla-info-light: #BDE2E7;
    --regla-info: #4C98A6;
    --regla-info-dark: #244E5C;
    --regla-info-darker: #1B3D45;
    /* Base/Neutral */
    --regla-neutral-lighter: #F5F5F5;
    --regla-neutral-light: #DCDCDC;
    --regla-neutral: #7B7B7B;
    --regla-neutral-dark: #4E4E4E;
    --regla-neutral-darker: #303030;
    /* Dark colors that go well with branding colors*/
    --regla-dark-base-400: #2B2F36;
    --regla-dark-base-300: #727385;
    --regla-dark-base-200: #8F90A6;
    --regla-dark-base-100: #BCBCCA;
    /* Light colors that go well with branding colors*/
    --regla-light-base-400: #E1E3E7;
    --regla-light-base-300: #E9E9ED;
    --regla-light-base-200: #F3F3F6;
    --regla-light-base-100: #FBFBFC;
    --regla-background: #f4f5f9;
    --regla-background-darker-1: #e0e1e4;
    --regla-background-darker-2: #c9cacd;
    --regla-blue-800: #082E42;
    --regla-blue-700: #0D4663;
    --regla-blue-600: #115D84;
    /* When --regla-primary-darker is white background, it almost looks black
       (this a illusion that our mind plays on us but still people complain)
       This is an alt color you can use when --regla-primary-darker is not viable 
    */
    --regla-primary-darker-on-white: #164563;
    --regla-topAndSide-bar: var(--regla-blue-800);
    --default-text-color: #4f4f50;
}

.regla-primary-darker-background {
    background-color: var(--regla-primary-darker) !important;
}

.regla-primary-color {
    color: var(--regla-primary) !important;
}

.regla-secondary-color {
    color: var(--regla-secondary) !important;
}