/* NEW QDS COMPONENT CSS, NEW COMPONENTS DISTINCTIVELY */
/* Author JET 2024/3 */
/* Please migrate root var styles for components here, styles are in q-components.js
This way we only load styles for components used */
html {
    --q-cta: #6242FF;
    --q-cta2: #181D63;
    --q-white: #fcfcfc;
    --q-grey: #f3f3f3;
    --q-green: #95F9C9;
    --q-green2: #21BF9A;
    --q-red: #FFA3A3;
    --q-red2: #FECFCF;
    --q-red3: rgb(192, 2, 36);
    --q-yellow: #FFC017;
    --q-yellow2:#FFFAA3;
    --q-black: #080918;
    --q-blue: #181D63;
    --q-blue1: #1c1d2b;
    --q-blue2: #6242FF;
    --q-blue3: #0B0F3D;
    --q-blue4: #08C2FF;
    --q-lblue: #DCE8F3;
    --q-lavender: #AAB2FD;
    --q-lavender2: #5F6EFF;
    --q-lavender3: #A9C2E5;
    --q-lavender4: #865bff;
    --q-brand: #121969;
    --q-brand-light: #0F1557;
    --q-brand-dark: #0B0F3D;
    --q-icon-primary: #181D63;
    --q-sand: #fff6e7;
    --q-secondary-light: #47D8FA;
    --q-bilberry: var(--q-cta);

    /* Hover styles */
    --q-cta-hover: #1E41FF;
    --q-blue2-hover: #1E41FF;

    --q-cta2-hover: #005290; 
    --q-white-hover: #865BFF;
    --q-grey-hover: #1E41FF;
    --q-green-hover: #008565;
    --q-green2-hover: #95F9C9;
    --q-red-hover: #C00224;
    --q-red2-hover: #FFA3A3;
    --q-red3-hover: #FECFCF;
    --q-yellow-hover: #FFFAA3;
    --q-yellow2-hover:#FFC017;

    /* Focus styles */ 
    --q-cta-focus: #08C2FF;
    --q-cta2-focus: #08C2FF;
    --q-grey-focus: #181D63;
    --q-white-focus: #181D63;

    --q-cta-hover-text: var(--q-white);
    --q-white-hover-text: var(--q-white);
    --q-cta2-hover-text: var(--q-white);
    --q-blue2-hover-text: var(--q-white);
    --q-grey-hover-text: var(--q-white);
    --q-red-hover-text: var(--q-white);
    --q-green-hover-text: var(--q-white);
    --q-red-hover-text: var(--q-white);

    /* Link styles */ 
    --q-link: #121BA0;
    --q-link-visited: #5012A0;
    --b-link: #4fbefb;
    --b-link-visited: #865bff;

    /* Gradient colors */
    --q-grad: #3a4eb7;
    --q-gradient: linear-gradient(to right, #0f1557, #3a4eb7);
    --q-gradient2: linear-gradient(to top, #0f1557, #3a4eb7);

    /* Legacy colors */
    --q-legacy-blue: #003054;
    --q-legacy-blue2: #0074cc;
    --q-table-separator: #433f89;

    --q-fs-14: 14px;    
    --q-fs-16: 16px;
    --q-fs-24: 24px;
    --q-fs-28: 28px;
    --q-roboto: "Roboto", sans-serif;
    --q-sofia: "Sofia Sans", sans-serif;

    /* notification, toast, alert, notify */

    --q-royal-lavender-dark: #5F6EFF;
    --q-ice-cream-lavender-light: #AAB2FD;
    --q-viridian-green-dark: #008565;
    --q-aquamarine-green-light: #95F9C9;
    --q-fruit-yellow-dark:#FFF500;
    --q-soda-yellow-light: #FFFAA3;
    --q-danish-red-dark: #C00224;
    --q-nordic-red-light: #FFA3A3;

    --q-btn-radius: 30px;

    --brand-white: #fcfcfc;
    --brand-white-static: #fcfcfc;
    --brand-dark: #222935;
    --brand-amethyst: #7C22B8;
    --brand-bilberry: #523FC3;
    --brand-moss: #21BF9A;
    
    --supportive-vintro: #C0D7FB;
    --supportive-haven: #CC1236;
    --supportive-white: #fff;
    --supportive-black: #000;

    --primary-bg: #f8f8f8;
    --secondary-bg: #f2f2f5;
    --primary-bg-dark: #3B475B;

    --text-dark: #3B475B;
    --text-dark-static: #3B475B;
    --text-light: #fcfcfc;
    --text-alternative: #DFDFFF;

    --icon-dark-primary: #1F2A3C;
    --icon-dark-secondary: #662498;
    --icon-light-primary: #FCFCFC;
    --icon-light-secondary: #DFDFFF;

    --notification-success: #A8F2C4;
    --notification-alert: #FFE9A8;
    --notification-caution: #FFA3A3;
}