@import "components/color";
@import "components/variables";

/*
----------------------------------------------------------------------------------------------------------------------
 colours
----------------------------------------------------------------------------------------------------------------------
*/

$chembl-teal: color("teal", "base");
$lighter-teal: color("teal", "lighten-3");
$darker-teal: color("teal", "darken-3");
$teal-accent: color('teal', 'accent-4');

$grey-lightest: #f2f2f2;
$grey-light: #e9e9e9;
$divider-grey: #e0e0e0;
$grey-medium: #707779;
$grey-dark: #4d5456;

$chembl-red: #d33c60;

$teal-1: #0D343A;
$teal-2: #025C5E;
$teal-3: #09979B;
$teal-4: #75D8D5;
$teal-5: #94F3EB;
$teal-6: #fae953;

$red-1: #65323E;
$red-2: #D33C60;
$red-3: #FE7F9D;
$red-4: #FFC0CB;
$red-5: #FFDEE4;
$red-6: #FFF4F6;

$off-base: #e6e6e6;
$off-accent: #9a9a9a;
$first-base: #7FDBB1;
$first-accent: #2F7071;
$second-base: #90CFDA;
$second-accent: #39576F;

$synonyms-color: #bce2e9;
$tradenames-color: #b1ebd1;
$prot-target-class-color: #cfd8dc;

$chembl-highlight: $red-3;

$h1-color: $darker-teal;
$h2-color: $darker-teal;
$h3-color: $grey-dark;
$h4-color: $grey-medium;
$h5-color: $grey-medium;
$h6-color: $grey-medium;

/*
----------------------------------------------------------------------------------------------------------------------
 Fonts
----------------------------------------------------------------------------------------------------------------------
*/

$chembl-helvetica: "ChEMBL_HelveticaNeueLTPRo", helvetica, Arial, sans-serif;
$helvetica: helvetica, Arial, sans-serif;
$verdana: "ChEMBL_Verdana", Verdana, sans-serif;
$open-sans: 'Open Sans', sans-serif;
$roboto-mono: 'Roboto Mono', 'Ubuntu Mono', courier, sans-serif;

/*
----------------------------------------------------------------------------------------------------------------------
 Global variables
----------------------------------------------------------------------------------------------------------------------
*/

$global-masthead-large-height: 32px;
$global-masthead-small-med-height: 49px;
$default-btn-border-radius: 3px;
$modals-height: 80%;

/*
----------------------------------------------------------------------------------------------------------------------
 Layers
----------------------------------------------------------------------------------------------------------------------
*/

$z-underlay: -1;
$z-default: 1;
$z-over-a-bit: 10;
$z-overlay: 1000;
$z-backdrop: 8000;
$z-on-top-of-the-top: 9000;

