/* #REF_ASSET_INCLUSION - make sure these color vars are imported at the top of each page */

/* #REF_COLOR_PALETTE - any changes made to this file must be duplicated in:
    - colors.ts
    - Colors.stories.tsx
 */

/* 
 * This file is the source of truth for the Jackrabbit color palette.  Prefer using css variables when assigning colors
 * rather than importing the JavaScript object in colors.ts
*/
:root {

    --hue-white: #fff;

    --hue-base-slate-020: #f9fbfe;
    --hue-base-slate-050: #f4f7fe;
    --hue-base-slate-080: #eef3fc;
    --hue-base-slate-100: #e8eefb;
    --hue-base-slate-160: #c9d6e5;
    --hue-base-slate-280: #acbacd;
    --hue-base-slate-600: #516681;
    --hue-base-slate-690: #41536a;
    --hue-base-slate-790: #324154;


    --hue-primary-indigo-050: #f1f2fb;
    --hue-primary-indigo-080: #e7eaf8;
    --hue-primary-indigo-110: #dee2f5;
    --hue-primary-indigo-150: #d2d7f2;
    --hue-primary-indigo-200: #c3caed;
    --hue-primary-indigo-330: #9aa7e1;
    --hue-primary-indigo-570: #4f69cb;
    --hue-primary-indigo-690: #274fc2;
    --hue-primary-indigo-810: #0033a0;

    --hue-danger-red-070: #ffe6eb;
    --hue-danger-red-140: #ffccd5;
    --hue-danger-red-750: #cc0022;
    --hue-danger-red-830: #8A0018;

    --hue-warning-yellow-080: #ffebb3;
    --hue-warning-yellow-610: #886500;
    --hue-warning-yellow-720: #634900;

    --hue-success-green-100: #dcf1c6;
    --hue-success-green-650: #3D7700;
    --hue-success-green-750: #2C5600;

    --hue-info-blue-150: #bae0fb;
    --hue-info-blue-700: #0061A5;
    --hue-info-blue-790: #004576;





    --color-neutral-white: var(--hue-white);
    --color-neutral-text-dark: var(--hue-base-slate-790);
    --color-neutral-text-light: var(--hue-base-slate-600);
    --color-neutral-button: var(--hue-base-slate-690);
    --color-neutral-button-hover-light: var(--hue-base-slate-050);
    --color-neutral-button-focus: var(--hue-primary-indigo-570);
    --color-neutral-line-dark: var(--hue-base-slate-280);
    --color-neutral-line-light: var(--hue-base-slate-160);
    --color-neutral-bg-darkest: var(--hue-base-slate-100);
    --color-neutral-bg-dark: var(--hue-base-slate-080);
    --color-neutral-bg-light: var(--hue-base-slate-050);
    --color-neutral-bg-lightest: var(--hue-base-slate-020);

    --color-active-text-dark: var(--hue-primary-indigo-810);
    --color-active-text-light: var(--hue-primary-indigo-570);
    --color-active-button: var(--hue-primary-indigo-690);
    --color-active-button-hover-light: var(--hue-primary-indigo-080);
    --color-active-button-hover-dark: var(--hue-primary-indigo-810);
    --color-active-button-focus: var(--hue-primary-indigo-570);
    --color-active-line-dark: var(--hue-primary-indigo-330);
    --color-active-line-light: var(--hue-primary-indigo-200);
    --color-active-bg-darkest: var(--hue-primary-indigo-150);
    --color-active-bg-dark: var(--hue-primary-indigo-110);
    --color-active-bg-light: var(--hue-primary-indigo-080);
    --color-active-bg-lightest: var(--hue-primary-indigo-050);

    --color-danger-text: var(--hue-danger-red-830);
    --color-danger-icon: var(--hue-danger-red-750);
    --color-danger-bg: var(--hue-danger-red-140);
    --color-danger-button: var(--hue-danger-red-750);
    --color-danger-button-hover-light: var(--hue-danger-red-070);
    --color-danger-button-hover-dark: var(--hue-danger-red-830);
    --color-danger-button-focus: var(--hue-danger-red-750);

    --color-warning-text: var(--hue-warning-yellow-720);
    --color-warning-icon: var(--hue-warning-yellow-610);
    --color-warning-bg: var(--hue-warning-yellow-080);

    --color-success-text: var(--hue-success-green-750);
    --color-success-icon: var(--hue-success-green-650);
    --color-success-bg: var(--hue-success-green-100);

    --color-info-text: var(--hue-info-blue-790);
    --color-info-icon: var(--hue-info-blue-700);
    --color-info-bg: var(--hue-info-blue-150);
}