define.scss

@use 'sass:math';

// Colors
$brown-dark: hsl(27, 47%, 13%);
$brown-reg: hsl(27, 47%, 26%);
$brown-icon: hsl(24, 28%, 52%);
$brown-light: hsl(26, 5%, 65%);

$green-reg: hsl(176, 47%, 26%);
$green-dark: hsl(176, 47%, 17%);

$gray-light: hsl(26, 10%, 65%);
$gray-light-background: hsla(0, 0%, 99%, 1);
$gray-border: hsla(0, 0%, 0%, 0.2);
$gray-light-border: hsla(0, 0%, 0%, 0.12);
$gray-light-border2: hsla(0, 0%, 0%, 0.05);

$brown-50: hsl(20, 16%, 99%);

$yellow-400: hsl(48, 99%, 50%);

$indigo-dark: hsl(230, 100%, 11%);

$pastel2-blue: hsl(219, 39%, 85%);
$pastel2-orange: hsl(24, 95%, 83%);
$pastel2-gray: hsl(0, 0%, 80%);

$pastel1-blue: hsl(207, 46%, 80%);
$pastel1-orange: hsl(35, 98%, 82%);
$pastel1-gray: hsl(0, 0%, 95%);
$pastel1-red: hsl(329, 90%, 92%);

// Shadows
$shadow-border-light: 0px 0px 5px hsla(0, 0%, 0%, 0.1),
  0px 0px 4px hsla(0, 0%, 0%, 0.07), 0px 0px 10px hsla(0, 0%, 0%, 0.07);
$shadow-border-card: 0px 0px 6px hsla(0, 0%, 0%, 0.07);
$shadow-border-large: 0 8px 24px hsla(212, 9%, 59%, 0.2);

// Ease functions
$ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

// Layouts
$border-radius: 5px;
$panel-h-padding: 16px;
$panel-v-padding: 6px;
$header-height: 40px;
$toolbar-height: 36px;
$sidebar-header-height: 32px;
$sidebar-y-gap: 4px;
$sunburst-width: 650px;

// Font size
$font-u1: 1.0625rem;
$font-u2: 1.125rem;
$font-u3: 1.1875rem;
$font-d1: 0.9375rem;
$font-d2: 0.875rem;
$font-d3: 0.8125rem;

// Material design color
$red-50: hsl(350, 100%, 96.08%);
$red-100: hsl(354, 100%, 90.2%);
$red-200: hsl(0, 72.65%, 77.06%);
$red-300: hsl(0, 68.67%, 67.45%);
$red-400: hsl(1, 83.25%, 62.55%);
$red-500: hsl(4, 89.62%, 58.43%);
$red-600: hsl(1, 77.19%, 55.29%);
$red-700: hsl(0, 65.08%, 50.59%);
$red-800: hsl(0, 66.39%, 46.67%);
$red-900: hsl(0, 73.46%, 41.37%);
$red-a100: hsl(4, 100%, 75.1%);
$red-a200: hsl(0, 100%, 66.08%);
$red-a400: hsl(348, 100%, 54.51%);
$red-a700: hsl(0, 100%, 41.76%);

$pink-50: hsl(340, 80%, 94.12%);
$pink-100: hsl(339, 81.33%, 85.29%);
$pink-200: hsl(339, 82.11%, 75.88%);
$pink-300: hsl(339, 82.56%, 66.27%);
$pink-400: hsl(339, 81.9%, 58.82%);
$pink-500: hsl(339, 82.19%, 51.57%);
$pink-600: hsl(338, 77.78%, 47.65%);
$pink-700: hsl(336, 77.98%, 42.75%);
$pink-800: hsl(333, 79.27%, 37.84%);
$pink-900: hsl(328, 81.33%, 29.41%);
$pink-a100: hsl(339, 100%, 75.1%);
$pink-a200: hsl(339, 100%, 62.55%);
$pink-a400: hsl(338, 100%, 48.04%);
$pink-a700: hsl(333, 84.11%, 41.96%);

$purple-50: hsl(292, 44.44%, 92.94%);
$purple-100: hsl(291, 46.07%, 82.55%);
$purple-200: hsl(291, 46.94%, 71.18%);
$purple-300: hsl(291, 46.6%, 59.61%);
$purple-400: hsl(291, 46.61%, 50.78%);
$purple-500: hsl(291, 63.72%, 42.16%);
$purple-600: hsl(287, 65.05%, 40.39%);
$purple-700: hsl(282, 67.88%, 37.84%);
$purple-800: hsl(277, 70.17%, 35.49%);
$purple-900: hsl(267, 75%, 31.37%);
$purple-a100: hsl(291, 95.38%, 74.51%);
$purple-a200: hsl(291, 95.9%, 61.76%);
$purple-a400: hsl(291, 100%, 48.82%);
$purple-a700: hsl(280, 100%, 50%);

$deep-purple-50: hsl(264, 45.45%, 93.53%);
$deep-purple-100: hsl(261, 45.68%, 84.12%);
$deep-purple-200: hsl(261, 46.27%, 73.73%);
$deep-purple-300: hsl(261, 46.81%, 63.14%);
$deep-purple-400: hsl(261, 46.72%, 55.1%);
$deep-purple-500: hsl(261, 51.87%, 47.25%);
$deep-purple-600: hsl(259, 53.91%, 45.1%);
$deep-purple-700: hsl(257, 57.75%, 41.76%);
$deep-purple-800: hsl(254, 60.8%, 39.02%);
$deep-purple-900: hsl(251, 68.79%, 33.92%);
$deep-purple-a100: hsl(261, 100%, 76.67%);
$deep-purple-a200: hsl(255, 100%, 65.1%);
$deep-purple-a400: hsl(258, 100%, 56.08%);
$deep-purple-a700: hsl(265, 100%, 45.88%);

$indigo-50: hsl(231, 43.75%, 93.73%);
$indigo-100: hsl(231, 45%, 84.31%);
$indigo-200: hsl(230, 44.36%, 73.92%);
$indigo-300: hsl(230, 44.09%, 63.53%);
$indigo-400: hsl(230, 44.25%, 55.69%);
$indigo-500: hsl(230, 48.36%, 47.84%);
$indigo-600: hsl(231, 50%, 44.71%);
$indigo-700: hsl(231, 53.62%, 40.59%);
$indigo-800: hsl(232, 57.22%, 36.67%);
$indigo-900: hsl(234, 65.79%, 29.8%);
$indigo-a100: hsl(230, 100%, 77.45%);
$indigo-a200: hsl(230, 98.84%, 66.08%);
$indigo-a400: hsl(230, 98.97%, 61.76%);
$indigo-a700: hsl(230, 99.04%, 59.22%);

$blue-50: hsl(205, 86.67%, 94.12%);
$blue-100: hsl(207, 88.89%, 85.88%);
$blue-200: hsl(206, 89.74%, 77.06%);
$blue-300: hsl(206, 89.02%, 67.84%);
$blue-400: hsl(206, 89.95%, 60.98%);
$blue-500: hsl(206, 89.74%, 54.12%);
$blue-600: hsl(208, 79.28%, 50.78%);
$blue-700: hsl(209, 78.72%, 46.08%);
$blue-800: hsl(211, 80.28%, 41.76%);
$blue-900: hsl(216, 85.06%, 34.12%);
$blue-a100: hsl(217, 100%, 75.49%);
$blue-a200: hsl(217, 100%, 63.33%);
$blue-a400: hsl(217, 100%, 58.04%);
$blue-a700: hsl(224, 100%, 58.04%);

$light-blue-50: hsl(198, 93.55%, 93.92%);
$light-blue-100: hsl(198, 92.41%, 84.51%);
$light-blue-200: hsl(198, 92.37%, 74.31%);
$light-blue-300: hsl(198, 91.3%, 63.92%);
$light-blue-400: hsl(198, 91.93%, 56.27%);
$light-blue-500: hsl(198, 97.57%, 48.43%);
$light-blue-600: hsl(199, 97.41%, 45.49%);
$light-blue-700: hsl(201, 98.1%, 41.37%);
$light-blue-800: hsl(202, 97.91%, 37.45%);
$light-blue-900: hsl(206, 98.72%, 30.59%);
$light-blue-a100: hsl(198, 100%, 75.1%);
$light-blue-a200: hsl(198, 100%, 62.55%);
$light-blue-a400: hsl(198, 100%, 50%);
$light-blue-a700: hsl(202, 100%, 45.88%);

$cyan-50: hsl(186, 72.22%, 92.94%);
$cyan-100: hsl(186, 71.11%, 82.35%);
$cyan-200: hsl(186, 71.62%, 70.98%);
$cyan-300: hsl(186, 71.15%, 59.22%);
$cyan-400: hsl(186, 70.87%, 50.2%);
$cyan-500: hsl(186, 100%, 41.57%);
$cyan-600: hsl(186, 100%, 37.84%);
$cyan-700: hsl(185, 100%, 32.75%);
$cyan-800: hsl(185, 100%, 28.04%);
$cyan-900: hsl(182, 100%, 19.61%);
$cyan-a100: hsl(180, 100%, 75.88%);
$cyan-a200: hsl(180, 100%, 54.71%);
$cyan-a400: hsl(186, 100%, 50%);
$cyan-a700: hsl(187, 100%, 41.57%);

$teal-50: hsl(176, 40.91%, 91.37%);
$teal-100: hsl(174, 41.28%, 78.63%);
$teal-200: hsl(174, 41.9%, 64.9%);
$teal-300: hsl(174, 41.83%, 50.78%);
$teal-400: hsl(174, 62.75%, 40%);
$teal-500: hsl(174, 100%, 29.41%);
$teal-600: hsl(173, 100%, 26.86%);
$teal-700: hsl(173, 100%, 23.73%);
$teal-800: hsl(172, 100%, 20.59%);
$teal-900: hsl(169, 100%, 15.1%);
$teal-a100: hsl(166, 100%, 82.75%);
$teal-a200: hsl(165, 100%, 69.61%);
$teal-a400: hsl(165, 82.26%, 51.37%);
$teal-a700: hsl(171, 100%, 37.45%);

$green-50: hsl(124, 39.39%, 93.53%);
$green-100: hsl(121, 37.5%, 84.31%);
$green-200: hsl(122, 37.4%, 74.31%);
$green-300: hsl(122, 38.46%, 64.31%);
$green-400: hsl(122, 38.46%, 56.67%);
$green-500: hsl(122, 39.44%, 49.22%);
$green-600: hsl(122, 40.97%, 44.51%);
$green-700: hsl(122, 43.43%, 38.82%);
$green-800: hsl(123, 46.2%, 33.53%);
$green-900: hsl(124, 55.37%, 23.73%);
$green-a100: hsl(136, 77.22%, 84.51%);
$green-a200: hsl(150, 81.82%, 67.65%);
$green-a400: hsl(150, 100%, 45.1%);
$green-a700: hsl(144, 100%, 39.22%);

$light-green-50: hsl(88, 51.72%, 94.31%);
$light-green-100: hsl(87, 50.68%, 85.69%);
$light-green-200: hsl(88, 50%, 76.47%);
$light-green-300: hsl(87, 50%, 67.06%);
$light-green-400: hsl(87, 50.24%, 59.8%);
$light-green-500: hsl(87, 50.21%, 52.75%);
$light-green-600: hsl(89, 46.12%, 48.04%);
$light-green-700: hsl(92, 47.91%, 42.16%);
$light-green-800: hsl(95, 49.46%, 36.47%);
$light-green-900: hsl(103, 55.56%, 26.47%);
$light-green-a100: hsl(87, 100%, 78.24%);
$light-green-a200: hsl(87, 100%, 67.45%);
$light-green-a400: hsl(92, 100%, 50.59%);
$light-green-a700: hsl(96, 81.15%, 47.84%);

$lime-50: hsl(65, 71.43%, 94.51%);
$lime-100: hsl(64, 69.01%, 86.08%);
$lime-200: hsl(65, 70.69%, 77.25%);
$lime-300: hsl(65, 70.37%, 68.24%);
$lime-400: hsl(65, 69.7%, 61.18%);
$lime-500: hsl(65, 69.96%, 54.31%);
$lime-600: hsl(63, 59.68%, 49.61%);
$lime-700: hsl(62, 61.43%, 43.73%);
$lime-800: hsl(59, 62.89%, 38.04%);
$lime-900: hsl(53, 69.93%, 30%);
$lime-a100: hsl(65, 100%, 75.29%);
$lime-a200: hsl(65, 100%, 62.75%);
$lime-a400: hsl(73, 100%, 50%);
$lime-a700: hsl(75, 100%, 45.88%);

$yellow-50: hsl(55, 100%, 95.29%);
$yellow-100: hsl(53, 100%, 88.43%);
$yellow-200: hsl(53, 100%, 80.78%);
$yellow-300: hsl(53, 100%, 73.14%);
$yellow-400: hsl(53, 100%, 67.25%);
$yellow-500: hsl(53, 100%, 61.57%);
$yellow-600: hsl(48, 98.04%, 60%);
$yellow-700: hsl(42, 96.26%, 58.04%);
$yellow-800: hsl(37, 94.64%, 56.08%);
$yellow-900: hsl(28, 91.74%, 52.55%);
$yellow-a100: hsl(60, 100%, 77.65%);
$yellow-a200: hsl(60, 100%, 50%);
$yellow-a400: hsl(55, 100%, 50%);
$yellow-a700: hsl(50, 100%, 50%);

$amber-50: hsl(46, 100%, 94.12%);
$amber-100: hsl(45, 100%, 85.1%);
$amber-200: hsl(45, 100%, 75.49%);
$amber-300: hsl(45, 100%, 65.49%);
$amber-400: hsl(45, 100%, 57.84%);
$amber-500: hsl(45, 100%, 51.37%);
$amber-600: hsl(42, 100%, 50%);
$amber-700: hsl(37, 100%, 50%);
$amber-800: hsl(33, 100%, 50%);
$amber-900: hsl(26, 100%, 50%);
$amber-a100: hsl(47, 100%, 74.9%);
$amber-a200: hsl(47, 100%, 62.55%);
$amber-a400: hsl(46, 100%, 50%);
$amber-a700: hsl(40, 100%, 50%);

$orange-50: hsl(36, 100%, 93.92%);
$orange-100: hsl(35, 100%, 84.9%);
$orange-200: hsl(35, 100%, 75.1%);
$orange-300: hsl(35, 100%, 65.1%);
$orange-400: hsl(35, 100%, 57.45%);
$orange-500: hsl(35, 100%, 50%);
$orange-600: hsl(33, 100%, 49.22%);
$orange-700: hsl(30, 100%, 48.04%);
$orange-800: hsl(27, 100%, 46.86%);
$orange-900: hsl(21, 100%, 45.1%);
$orange-a100: hsl(38, 100%, 75.1%);
$orange-a200: hsl(33, 100%, 62.55%);
$orange-a400: hsl(34, 100%, 50%);
$orange-a700: hsl(25, 100%, 50%);

$deep-orange-50: hsl(5, 71.43%, 94.51%);
$deep-orange-100: hsl(14, 100%, 86.86%);
$deep-orange-200: hsl(14, 100%, 78.43%);
$deep-orange-300: hsl(14, 100%, 69.8%);
$deep-orange-400: hsl(14, 100%, 63.14%);
$deep-orange-500: hsl(14, 100%, 56.67%);
$deep-orange-600: hsl(14, 90.68%, 53.73%);
$deep-orange-700: hsl(14, 80.39%, 50%);
$deep-orange-800: hsl(14, 82.28%, 46.47%);
$deep-orange-900: hsl(14, 88.18%, 39.8%);
$deep-orange-a100: hsl(14, 100%, 75.1%);
$deep-orange-a200: hsl(14, 100%, 62.55%);
$deep-orange-a400: hsl(14, 100%, 50%);
$deep-orange-a700: hsl(11, 100%, 43.33%);

$brown-50: hsl(19, 15.79%, 92.55%);
$brown-100: hsl(16, 15.79%, 81.37%);
$brown-200: hsl(14, 15.19%, 69.02%);
$brown-300: hsl(15, 15.32%, 56.47%);
$brown-400: hsl(15, 17.5%, 47.06%);
$brown-500: hsl(15, 25.39%, 37.84%);
$brown-600: hsl(15, 25.29%, 34.12%);
$brown-700: hsl(14, 25.68%, 29.02%);
$brown-800: hsl(11, 25.81%, 24.31%);
$brown-900: hsl(8, 27.84%, 19.02%);

$gray-50: hsl(0, 0%, 98.04%);
$gray-100: hsl(0, 0%, 96.08%);
$gray-200: hsl(0, 0%, 93.33%);
$gray-300: hsl(0, 0%, 87.84%);
$gray-400: hsl(0, 0%, 74.12%);
$gray-500: hsl(0, 0%, 61.96%);
$gray-600: hsl(0, 0%, 45.88%);
$gray-700: hsl(0, 0%, 38.04%);
$gray-800: hsl(0, 0%, 25.88%);
$gray-900: hsl(0, 0%, 12.94%);

$blue-gray-50: hsl(204, 15.15%, 93.53%);
$blue-gray-100: hsl(198, 15.66%, 83.73%);
$blue-gray-200: hsl(199, 15.33%, 73.14%);
$blue-gray-300: hsl(199, 15.63%, 62.35%);
$blue-gray-400: hsl(200, 15.38%, 54.12%);
$blue-gray-500: hsl(199, 18.3%, 46.08%);
$blue-gray-600: hsl(198, 18.45%, 40.39%);
$blue-gray-700: hsl(199, 18.34%, 33.14%);
$blue-gray-800: hsl(199, 17.91%, 26.27%);
$blue-gray-900: hsl(199, 19.15%, 18.43%);
$blue-gray-1000: hsl(199, 20.93%, 8.43%);