constants.scss

@at-root {
    @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=latin,vietnamese,cyrillic-ext,latin-ext,cyrillic');
}
@import '../../../../node_modules/@binary-com/binary-style/src/sass/colors';
@import '../../../../node_modules/@binary-com/binary-style/src/sass/constants';

$LANGUAGE_DIRECTION : ltr;
$IS_LTR : true;

// Brand colors and derivatives
/* stylelint-disable color-no-hex */
$COLOR_TEXT: #3d474d;
$COLOR_CONTROL_BORDER: #dadada;
$COLOR_ACTIVE: #ff992a;

$COLOR_NAV: #a1aab3;
$COLOR_NAV_ACTIVE: #929ca6;
$COLOR_NAV_BORDER: $primaryBrandColor; // #2a3052

$COLOR_ORANGE: $secondaryBrandColor; // #e98024
$COLOR_DARK_ORANGE: #d17320;
$COLOR_LIGHT_BLUE: $lightBlue;       // #29abe2
$COLOR_BLUE: $primaryBrandColor;     // #2a3052;
$COLOR_BLUE_SHADE: #394171;
$COLOR_DARK_BLUE: $darkPrimaryBrandColor; // #15212d
$COLOR_SHARP_RED: #cc2e3d;

// Utility colors
$COLOR_BLACK: $black;
$COLOR_WHITE: $white;
$COLOR_NEW_DARK_GRAY: #333333;
$COLOR_NEW_LIGHT_GRAY: #efefef;
$COLOR_DARK_WHITE: #ccc;
$COLOR_SHADY_WHITE: #f2f3f4;
$COLOR_DARK_RED: #cc0033;

// Colors used for secondary purposes. To be used sparingly
$COLOR_LIGHTER_BLUE  : #4a76b8;
$COLOR_RED           : $negativeColor; // #c03
$COLOR_YELLOW        : $noticeColor;   // #fef1cf
$COLOR_LIGHT_GRAY    : $fillColor;     // #f2f2f2
$COLOR_LIGHT_GRAY2   : #f2f3f4;
$COLOR_GRAY          : $borderColor;   // #dedede
$COLOR_DARK_GRAY     : #44484c;
$COLOR_GREEN         : $positiveColor; // #2e8836
$COLOR_GRAY_SUB      : #999999;
// colors to remove
$COLOR_GRAY_SHADE: $secondaryContentColor; // #c2c2c2
$COLOR_DARK_GREEN: $darkPositiveColor;     // #14602b
$COLOR_DRIV_RED: #ff444f;
/* stylelint-enable color-no-hex */

//$BORDER_RADIUS: 3px; // same variable/value exists in @binary-com/binary-style/constants.scss
$CONTROL_PADDING: 0.33em;
$CONTROL_PADDING_L: 0.5em 1em;
$PAGE_PADDING: 0.5em;
$HEADER_HEIGHT: 3em;
$BOX_SHADOW: 0 0 50px 0 rgba(0, 0, 0, 0.25);

//$FONT-STACK: roboto, sans-serif; // same variable/value exists in @binary-com/binary-style/constants.scss
$FONT_BASE: 1rem;
$FONT_SCALE: 1.15;

// Use only these font sizes throughout the site
$FONT_SIZE_XXL: $FONT_BASE * $FONT_SCALE * $FONT_SCALE * $FONT_SCALE; // 1.520875rem =~ 24px
$FONT_SIZE_XL: $FONT_BASE * $FONT_SCALE * $FONT_SCALE;                // 1.3225rem   =~ 21px
$FONT_SIZE_L: $FONT_BASE * $FONT_SCALE;                               // 1.15rem     =~ 18px
$FONT_SIZE_N: $FONT_BASE;                                             // 1rem        =~ 16px
$FONT_SIZE_S: $FONT_BASE / $FONT_SCALE;                               // .86957rem   =~ 14px
$FONT_SIZE_XS: $FONT_BASE / $FONT_SCALE / $FONT_SCALE;                // .75614rem   =~ 12px
$FONT_SIZE_XXS: $FONT_BASE / $FONT_SCALE / $FONT_SCALE / $FONT_SCALE; // .65752rem   =~ 10px