@use "sass:map";
@use "sass:list";

$useBorderRadius: true;

// change color in app/.env
$co-alpha:                #00bb68;
$co-beta:                 #2765b6;
$co-gamma:                #5e5cff;
// $co-delta:                #000;
$co-success:              $co-alpha;
$co-error:                #c73636;
$co-info:                 $co-beta;
$co-warning:              #fbb03b;

$co-base-0:               #000;
$co-base-1:               #fff;
$co-gray-10:              #212529; // text
$co-gray-20:              #353535;
$co-gray-30:              #555555;
$co-gray-40:              #757575; // footer text
$co-gray-50:              #878787;
$co-gray-60:              #bababa;
$co-gray-70:              #dadada; // btn default | bd | sidebar
$co-gray-80:              #ebebeb;
$co-gray-90:              #f5f5f5;

$text-color:              $co-gray-10;
$text-muted:              $co-gray-40;

$co-map: (
	alpha:                $co-alpha,
	beta:                 $co-beta,
	gamma:                $co-gamma,
	success:              $co-success,
	error:                $co-error,
	// info:                 $co-info,
	warning:              $co-warning,
	10:                   $co-gray-10,
	20:                   $co-gray-20,
	30:                   $co-gray-30,
	40:                   $co-gray-40,
	50:                   $co-gray-50,
	60:                   $co-gray-60,
	70:                   $co-gray-70,
	80:                   $co-gray-80,
	90:                   $co-gray-90,
	text:                 $text-color,
	muted:                $text-muted,
	base-0:               $co-base-0,
	base-1:               $co-base-1,
);

$co-btns: (
	'alpha': ($co-alpha, $co-base-1),
	'beta': ($co-beta, $co-base-1),
	// 'gray': ($co-gray-70, $co-base-0),
	'success': ($co-success, $co-base-1),
	'error': ($co-error, $co-base-1),
);

$shadow-sm:   0 0 2px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.1), 0 0 10px rgba(0,0,0,.08);
$shadow-md:   0 0 2px rgba(0,0,0,.08), 0 0 8px rgba(0,0,0,.1), 0 0 12px rgba(0,0,0,.08), 0 0 16px rgba(0,0,0,.08);
$shadow-lg:   0 0 4px rgba(0,0,0,.1), 0 0 10px rgba(0,0,0,.1), 0 0 32px rgba(0,0,0,.08), 0 0 48px rgba(0,0,0,.08);
$shadow-sm-v: 0 1px 2px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.05);
$shadow-md-v: 0 1px 2px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.09), 0 10px 20px rgba(0,0,0,.07), 0 20px 40px rgba(0,0,0,.04);
$shadow-lg-v: 0 2px 4px rgba(0,0,0,.06), 0 6px 12px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.10), 0 30px 64px rgba(0,0,0,.05);

// Fonts
$font-family-sans-serif:  'InterVariable', system-ui, sans-serif;
$font-family-serif:       'MerriweatherVariable', Georgia, "Times New Roman", Times, serif;
$font-family-monospace:   consolas, "Courier New", monospace;
$font-family-base:        $font-family-sans-serif;

$font-size-base:          1.8rem;
$font-size-large:         2rem;
$font-size-small:         1.6rem;
$font-size-xsmall:        1.4rem;

$font-size-h1:            4.8rem;
$font-size-h1-sm:         2.8rem;
$font-size-h2:            2.4rem;
$font-size-h3:            $font-size-large;
$font-size-h4:            $font-size-base;
$font-size-h5:            $font-size-small;

$font-light:              300;
$font-regular:            400;
$font-sbold:              600;
$font-bold:               700;
$font-black:              900;
$font-weight-base: 	      $font-regular;

$line-height-base:        1.5;
$line-height-title:       1.2;

// Spaces
$sp-1:                    0.4rem;
$sp-2:                    0.8rem;
$sp-3:                    1.2rem;
$sp-4:                    1.6rem;
$sp-5:                    2.4rem;
$sp-6:                    3.2rem;
$sp-7:                    4.8rem;
// $sp-8:                    6.4rem;
// $sp-9:                    9.6rem;
$sp-map: (
	1: $sp-1,
	2: $sp-2,
	3: $sp-3,
	4: $sp-4,
	5: $sp-5,
	6: $sp-6,
	// 7: $sp-7,
	// 8: $sp-8,
	// 9: $sp-9,
);

$sp-text:                 $sp-3;

$sp-lg-1:                 6.4rem;
$sp-lg-2:                 9.6rem;
$sp-lg-3:                 12rem;
$sp-lg-map: (
	1: $sp-lg-1,
	2: $sp-lg-2,
	3: $sp-lg-3,
);

// Sizes
$border-radius-1: $sp-1;
$border-radius-2: $sp-2;
$border-radius-3: $sp-3;
$border-radius-4: $sp-4;
$border-radius-5: $sp-5;

// buttons input sizes.
// first change padding and see height
$btn-input-size-sm: 4.2rem;
$btn-input-size-md: 5.3rem;
$btn-input-size-lg: 5.6rem;

// Breakpoints

$break-names: (xs, sm, md, lg, xl, xxl ,bp);
$break-navbar: lg;

$break-1:              564px;  // xs ((768 - 360 ) / 2) + 360
$break-2:              768px;  // sm
$break-3:              1067px; // md ((1366-768)/2) + 768
$break-4:              1366px; // lg
$break-5:              1536px; // xl
$break-6:              1920px; // xxl

$break-list:  (
	$break-1,
	$break-2,
	$break-3,
	$break-4,
	$break-5,
	$break-6,
);

$break-map-small: (
	list.nth($break-names, 1): list.nth($break-list, 1),
	list.nth($break-names, 2): list.nth($break-list, 2),
	list.nth($break-names, 3): list.nth($break-list, 3),
	list.nth($break-names, 4): list.nth($break-list, 4),
);

$break-map-all: (
	list.nth($break-names, 1): list.nth($break-list, 1),
	list.nth($break-names, 2): list.nth($break-list, 2),
	list.nth($break-names, 3): list.nth($break-list, 3),
	list.nth($break-names, 4): list.nth($break-list, 4),
	list.nth($break-names, 5): list.nth($break-list, 5),
);

$content-padding-1:    $sp-4;
$content-padding-2:    2.4rem;
$content-min-width:    36rem;
$content-max-width:    ( 130rem + ($content-padding-2 * 2) ); // = 1300px free space, max


$gutter:               $sp-6;
$gutter-half:          $sp-4;

$z-index-chat:           100;
$z-index-header:         2000;
// $z-index-header-menu:    2000;
$z-index-dropdown:       1000;
$z-index-drawer:         3000;
$z-index-drawer-short:   1500;
$z-index-modal:          3000;
$z-index-tooltip:        3000;
$z-index-warnings:       4000;
$z-index-footer-warning: 5000;
$z-index-snot:           10000;

$backdrop-color: .5;