// base
	$base: 8px;
	$css-path: ".";

// colour
	// basic colour
		$black: #000000;
		$black-bg: #e0e0e0;
		$black-hint: #9e9e9e;
		$black-sec: #616161;
		$black-text: #212121;

		$palette-blue: #2196f3;
		$palette-blue-dark: #0d47a1;
		$palette-blue-dark-m: #1976d2;
		$palette-blue-light: #bbdefb;
		$palette-blue-light-m: #64b5f6;

		$palette-green: #4caf50;
		$palette-green-dark: #1b5e20;
		$palette-green-dark-m: #388e3c;
		$palette-green-light: #c8e6c9;
		$palette-green-light-m: #81c784;

		$palette-purple: #9c27b0;
		$palette-purple-dark: #4a148c;
		$palette-purple-dark-m: #7b1fa2;
		$palette-purple-light: #e1bee7;
		$palette-purple-light-m: #ba68c8;

		$palette-red: #f44336;
		$palette-red-dark: #b71c1c;
		$palette-red-dark-m: #d32f2f;
		$palette-red-light: #ffcdd2;
		$palette-red-light-m: #e57373;

		$palette-yellow: #ffc107;
		$palette-yellow-dark: #ff6f00;
		$palette-yellow-dark-m: #ffa000;
		$palette-yellow-light: #ffecb3;
		$palette-yellow-light-m: #ffd54f;

		$white: #ffffff;
		$white-bg: #f5f5f5;
		$white-bg-dark: #eeeeee;
		$white-bg-light: #fafafa;

	// brand colour
		$brand-color: $palette-green;
		$brand-color-dark: $palette-green-dark;
		$brand-color-dark-m: $palette-green-dark-m;
		$brand-color-light: $palette-green-light;
		$brand-color-light-m: $palette-green-light-m;

	// list
		$palette-color: $brand-color, $palette-blue, $palette-green, $palette-purple, $palette-red, $palette-yellow;
		$palette-color-dark: $brand-color-dark, $palette-blue-dark, $palette-green-dark, $palette-purple-dark, $palette-red-dark, $palette-yellow-dark;
		$palette-color-dark-m: $brand-color-dark-m, $palette-blue-dark-m, $palette-green-dark-m, $palette-purple-dark-m, $palette-red-dark-m, $palette-yellow-dark-m;
		$palette-color-light: $brand-color-light, $palette-blue-light, $palette-green-light, $palette-purple-light, $palette-red-light, $palette-yellow-light;
		$palette-color-light-m: $brand-color-light-m, $palette-blue-light-m, $palette-green-light-m, $palette-purple-light-m, $palette-red-light-m, $palette-yellow-light-m;
		$palette-list: "alt", "blue", "green", "purple", "red", "yellow";

// font
	$font-fam: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	$font-fam-mono: Monaco, Menlo, Consolas, "Courier New", monospace;
	$font-fam-serif: Georgia, serif;

	// base
		$base-font-size: ($base * 2);             // 16px
		$base-line-height: ($base * 3);           // 24px

	// font size
		$font-size: $base-font-size;              // 16px
		$font-size-h1: ($base-font-size * 2.75);  // 44px
		$font-size-h2: ($base-font-size * 2.25);  // 36px
		$font-size-h3: ($base-font-size * 1.75);  // 28px
		$font-size-h4: ($base-font-size * 1.25);  // 20px
		$font-size-h5: ($base-font-size * 1);     // 16px
		$font-size-h6: ($base-font-size * 0.75);  // 12px
		$font-size-lg: ($base-font-size * 4);     // 60px

	// line height
		$line-height: $base-line-height;          // 24px
		$line-height-h1: ($base-line-height * 2); // 48px
		$line-height-h2: ($base-line-height * 2); // 48px
		$line-height-h3: ($base-line-height * 2); // 48px
		$line-height-h4: ($base-line-height * 1); // 24px
		$line-height-h5: ($base-line-height * 1); // 24px
		$line-height-h6: ($base-line-height * 1); // 24px
		$line-height-lg: ($base-line-height * 3); // 72px

	// other
		$btn-height: ($base-line-height * 1.5);
		$cell-height: ($base-line-height * 2);
		$input-height: ($base-line-height * 1.5);

// grid
	$grid-cols: 12;
	$grid-gutter: ($base * 2);

// link
	$link-color: $palette-blue;
	$link-color-hover: $palette-blue-dark;

// responsive
	$screen-lg: 1440px;
	$screen-md: 992px;
	$screen-sm: 768px;
	$screen-xs: 480px;

// timing
	$timing: cubic-bezier(0.4, 0, 0.2, 1);

// z-index
	$bottom-base: 10;
	$content-base: 20;
	$header-base: 30;
	$top-base: 40;