// ...
// -------------------------------------------------------------------------------------------------
$prefix                 : 'ra-';


// Colors
// -------------------------------------------------------------------------------------------------
$bg-body                : #000000; // or #F9F9F9;
$bg-grid                : #F2F7FA;

$primary-color          : #1D7AE6;
$primary-dark-color     : darken($primary-color, 10%);
$primary-light-color    : lighten($primary-color, 10%);

$secondary-color        : #BDCCD4;
$secondary-dark-color   : darken($secondary-color, 10%);
$secondary-light-color  : lighten($secondary-color, 10%);

$success-color          : #14CC61;
$success-dark-color     : darken($success-color, 10%);
$success-light-color    : lighten($success-color, 10%);

$danger-color           : #F56923;
$danger-dark-color      : darken($danger-color, 10%);
$danger-light-color     : lighten($danger-color, 10%);

$error-color            : #E51728;
$error-dark-color       : darken($error-color, 10%);
$error-light-color      : lighten($error-color, 10%);

$black                  : rgba(0, 0, 0, 0.85);
$black-dark             : rgba(0, 0, 0, 0.7);
$black-mid              : rgba(0, 0, 0, 0.54);
$black-soft             : rgba(0, 0, 0, 0.35);
$black-light            : rgba(0, 0, 0, 0.15);
$black-lightest         : rgba(0, 0, 0, 0.07);

$white                  : rgba(255, 255, 255, 0.9);
$white-dark             : rgba(255, 255, 255, 0.7);
$white-mid              : rgba(255, 255, 255, 0.54);
$white-soft             : rgba(255, 255, 255, 0.35);
$white-light            : rgba(255, 255, 255, 0.15);
$white-lightest         : rgba(255, 255, 255, 0.07);

$shadow-color           : rgba(#BDCCD4, 0.15);
//$box-shadow-base        : 0 2px 8px $shadow-color;
//$shadow-1-up            : 0 2px 8px $shadow-color;
//$shadow-1-down          : 0 2px 8px $shadow-color;
//$shadow-1-left          : -2px 0 8px $shadow-color;
//$shadow-1-right         : 2px 0 8px $shadow-color;
//$shadow-2               : 0 4px 12px $shadow-color;

// CSS properties
// -------------------------------------------------------------------------------------------------
$border-radius-base     : 4px;
//$border-radius-sm       : 2px;
$line-height-base       : 1.5;


// z-index list
// -------------------------------------------------------------------------------------------------
$z-index-popup          : 1000;
//$z-index-dropdown        : 100;
//$z-index-tooltip         : 900;
//$z-index-message         : 1100;


// Media queries
// -------------------------------------------------------------------------------------------------
$media-mobile-max       : 767;
$media-tablet-min       : $media-mobile-max + 1;
$media-tablet-max       : 1024;
$media-desktop-min      : $media-tablet-max + 1;

$media-mobile           : '(max-width: #{$media-mobile-max}px)';
$media-mobile-landscape : '(max-width: #{$media-mobile-max}px) and (orientation: landscape)';
$media-mobile-portrait  : '(max-width: #{$media-mobile-max}px) and (orientation: portrait)';

$media-tablet           : '(min-width: #{$media-tablet-min}px) and (max-width: #{$media-tablet-max}px)';
$media-tablet-landscape : '(min-width: #{$media-tablet-min}px) and (max-width: #{$media-tablet-max}px) and (orientation: landscape)';
$media-tablet-portrait  : '(min-width: #{$media-tablet-min}px) and (max-width: #{$media-tablet-max}px) and (orientation: portrait)';

$media-desktop          : '(min-width: #{$media-desktop-min}px)';

$media-non-mobile       : '(min-width: #{$media-tablet-min}px)';
$media-non-desktop      : '(max-width: #{$media-tablet-max}px)';


// Grid
// -------------------------------------------------------------------------------------------------
$grid-width             : 1400;     // {$grid-unit}
$grid-gutter            : 15;       // {$grid-unit}
$grid-unit              : px;       // not support %
$grid-col-max           : 12;       // {number}
$grid-dir               : 'rtl';    // {string}

// Typography
// -------------------------------------------------------------------------------------------------
/**
 * Font-family:
 * The package of IBM’s new typeface, IBM Plex, and accompanying typography code
 * { @link https://github.com/IBM/type }
 *
 * TODO: upload fonts via CDN
 * While there is no CDN (until v1.0.0),
 * all fonts are imported in the /client/index.js, using specific appropriated loaders.
 *
 * All font sizes in rem units,
 * relative to recalculated base font size applied to html tag (@see $font-size-base)
 *
 * recommended: Admin: 1.4rem, Client: 1.6rem
*/

$font-family: (
	'mono': unquote("'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"),
	'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
	'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif")
);

$font-size-base         : 62.5%; // => 10px => 1rem

// Clean base text scale,
// not related to any entity.
// Usually shouldn't be extended.
$font-size: (
	'text-giga': (
		font-size: 7.6rem,
		line-height: 8.5rem,
		letter-spacing: -0.2rem,
	),
	'text-huge': (
		font-size: 5.4rem,
		line-height: 6.0rem,
		letter-spacing: -0.1rem,
	),
	'text-large-xx': (
		font-size: 3.6rem,
		line-height: 5.0rem,
		letter-spacing: -0.05rem,
	),
	'text-large-x': (
		font-size: 2.8rem,
		line-height: 4.0rem,
		letter-spacing: -0.05rem,
	),
	'text-large': (
		font-size: 2.0rem,
		line-height: 3.0rem,
	),
	'text-medium': (
		font-size: 1.8rem,
		line-height: 3.0rem,
	),
	'text-regular': (
		font-size: 1.6rem,
		line-height: 2.5rem,
	),
	'text-small': (
		font-size: 1.4rem,
		line-height: 2.0rem,
	),
	'text-tiny': (
		font-size: 1.2rem,
		line-height: 2.0rem,
	),
);

// Text rules per particular entity.
// Can compound with a $font-size and also can store any additional css rule.
// Usually may be extended.
$text-entities: (
	'title': map_merge(map_get($font-size, text-large-x), (
		font-weight: 700
	)),
	'subtitle': map_merge(map_get($font-size, text-large), (
		font-weight: 700
	)),
	'text': map_merge(map_get($font-size, text-regular), (
		//...
	)),
	'subtext': map_merge(map_get($font-size, text-small), (
		font-weight: 100,
		color: $black-dark,
	)),
	'caption': map_merge(map_get($font-size, text-tiny), (
		font-style: italic,
		color: $black-mid,
	)),
);

// TODO: decide do we need that
$font-colors: (
	'base': $white,
	//'disabled': $white,
	//'error': $white-mid,
);

$font-weight: (
	100: 100,
	200: 200,
	300: 300,
	400: 400,
	500: 500,
	600: 600,
	700: 700,
	800: 800,
	900: 900,
	bold: bold,
	bolder: bolder,
	lighter: lighter,
);

$font-transform: (
	capitalize: capitalize,
	uppercase: uppercase,
	lowercase: lowercase,
	none: none,
);


// Easing
// -------------------------------------------------------------------------------------------------
$ease-out               : cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-in                : cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-in-out            : cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-out-back          : cubic-bezier(0.12, 0.4, 0.29, 1.46);
$ease-in-back           : cubic-bezier(0.71, -0.46, 0.88, 0.6);
$ease-in-out-back       : cubic-bezier(0.71, -0.46, 0.29, 1.46);
$ease-out-circ          : cubic-bezier(0.08, 0.82, 0.17, 1);
$ease-in-circ           : cubic-bezier(0.6, 0.04, 0.98, 0.34);
$ease-in-out-circ       : cubic-bezier(0.78, 0.14, 0.15, 0.86);
$ease-out-quint         : cubic-bezier(0.23, 1, 0.32, 1);
$ease-in-quint          : cubic-bezier(0.755, 0.05, 0.855, 0.06);
$ease-in-out-quint      : cubic-bezier(0.86, 0, 0.07, 1);


// Link
// -------------------------------------------------------------------------------------------------
$link-color             : $primary-color;
$link-hover-color       : lighten($primary-color, 15%);
$link-active-color      : darken($primary-color, 15%);
$link-disabled-color    : silver;
$link-decoration        : none;
$link-hover-decoration  : none;


// Popup
// -------------------------------------------------------------------------------------------------
$popup-margin           : 20px;


// export to JS
// -------------------------------------------------------------------------------------------------
@value prefix: #{$prefix};