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

$useBorderRadius: true;

// all themes
$co-base-0:               #000;
$co-base-1:               #fff;

// light theme
$co-alpha:                #6d63e3; // create edit links
$co-alpha-90:             #eae8fd;
$co-info:                 #1362ad; // not used
$co-info-90:              #e6f0ff;
$co-success:              #298541; // active concluded
$co-success-90:           #d9f7e5;
$co-warning:              #e37400; // alert
$co-warning-90:           #fef0dc;
$co-error:                #e10e0e; // delete remove
$co-error-90:             #fff0f1;

$co-theme-0:               #000;
$co-theme-1:               #fff;
$co-gray-10:              #201e25; // text active-links
$co-gray-20:              #353535; // not used
$co-gray-30:              #505358; // submenu breadcrumb
$co-gray-40:              #757575; // not used
$co-gray-50:              #878787; // not used
$co-gray-60:              #d4d5d8; // thumbnail, icons?
$co-gray-70:              #eee;	// not used
$co-gray-80:              #e4e6e8; // buttons muted
$co-gray-90:              #f5f6f8;	// bg tables disables

$co-muted:                $co-gray-70;
$text-color:              $co-gray-10;
$body-bg:                 $co-gray-90;
$main-bg:                 $co-theme-1;
$link-color:              $co-alpha;

// dark theme
$co-dark-alpha:                #b5b3f9; // create edit links
$co-dark-alpha-90:             #434064;
$co-dark-info:                 #7394b3; // not used
$co-dark-info-90:              #2a353f;
$co-dark-success:              #298541; // active concluded
$co-dark-success-90:           #28362c;
$co-dark-warning:              #fcca36; // alert
$co-dark-warning-90:           #36302a;
// $co-dark-error:                #f99494; // delete remove
$co-dark-error:                #e10e0e; // delete remove
$co-dark-error-90:             #433434;

$co-dark-theme-0:              #fff;
$co-dark-theme-1:              #000;
$co-dark-gray-10:              #ffffff; // text active-links
$co-dark-gray-20:              #e4e6e8; // not used
$co-dark-gray-30:              #b3b5b8; // submenu breadcrumb
$co-dark-gray-40:              #bababa; // not used
$co-dark-gray-50:              #878787; // not used
$co-dark-gray-60:              #616368; // thumbnail, icons?
$co-dark-gray-70:              #36333f; // muted
$co-dark-gray-80:              #25232b; // main bg
$co-dark-gray-90:              #201e25; // bg tables disables

$co-dark-muted:                $co-dark-gray-70;
$text-dark-color:              $co-dark-gray-10;
$body-dark-bg:                 $co-dark-gray-90;
$main-dark-bg:                 $co-dark-gray-80;
$link-dark-color:              $co-dark-theme-0;

// for css variables
$co-map: (
	alpha:                --co-alpha,
	info:                 --co-info,
	success:              --co-success,
	warning:              --co-warning,
	error:                --co-error,
	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:                --co-muted,
	theme-0:               --co-theme-0,
	theme-1:               --co-theme-1,
	base-0:                --co-base-0,
	base-1:                --co-base-1,
);

// clolor bg bg-hover bg-focus
$co-btn: (
	'inactive': (var(--co-gray-50), transparent),
	'active': (var(--text-color), var(--co-muted)),
	'alpha': (var(--co-theme-1), var(--co-alpha)),
	'alpha-90': (var(--co-alpha), var(--co-alpha-90)),
	'info': (var(--co-base-1), var(--co-info)),
	'info-90': (var(--co-info), var(--co-info-90)),
	'success': (var(--co-base-1), var(--co-success)),
	'success-90': (var(--co-success), var(--co-success-90)),
	'warning': (var(--co-theme-1), var(--co-warning)),
	'warning-90': (var(--co-warning), var(--co-warning-90)),
	'error': (var(--co-base-1), var(--co-error)),
	'error-90': (var(--co-error), var(--co-error-90)),
);

$shadow-sm:               0 0 6px color-mix(in srgb, var(--co-theme-0) 30%, transparent);
$shadow-sm-v:             0 4px 6px -1px color-mix(in srgb, var(--co-theme-0) 10%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--co-theme-0) 6%, transparent), 0 10px 15px -3px color-mix(in srgb, var(--co-theme-0) 20%, transparent);
$shadow-md:               0 0 12px color-mix(in srgb, var(--co-theme-0) 30%, transparent);
$shadow-md-v:             0 4px 12px color-mix(in srgb, var(--co-theme-0) 30%, transparent);

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

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

$font-size-h1:            3.4rem;
$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-bold:               700;
$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-map: (
	1: $sp-lg-1,
	2: $sp-lg-2
);

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

// Breakpoints

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

$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-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;