:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

  --color-brand: hsla(24, 100%, 60%, 1);
  --color-primary: hsla(198, 100%, 63%, 1);
  --color-secondary: hsla(216, 100%, 50%, 1);
  --color-accent: hsla(264, 100%, 60%, 1);
  --color-success: hsla(111, 66%, 55%, 1);
  --color-warning: hsla(30, 94%, 62%, 1);
  --color-danger: hsla(1, 100%, 64%, 1);
  --color-neutral: hsla(0, 0%, 50%, 1);

  /* Brand */
  --color-brand-5: hsla(24, 100%, 60%, 0.05);
  --color-brand-10: hsla(24, 100%, 60%, 0.1);
  --color-brand-20: hsla(24, 100%, 60%, 0.2);
  --color-brand-30: hsla(24, 100%, 60%, 0.3);
  --color-brand-40: hsla(24, 100%, 60%, 0.4);
  --color-brand-50: hsla(24, 100%, 60%, 0.5);
  --color-brand-75: hsla(24, 100%, 60%, 0.75);
  --color-brand-90: hsla(24, 100%, 60%, 0.9);
  --color-brand-100: hsla(37, 100%, 92%, 1);
  --color-brand-200: hsla(34, 100%, 84%, 1);
  --color-brand-300: hsla(31, 100%, 76%, 1);
  --color-brand-400: hsla(27, 100%, 70%, 1);
  --color-brand-500: var(--color-brand);
  --color-brand-600: hsla(20, 72%, 50%, 1);
  --color-brand-700: hsla(16, 76%, 41%, 1);
  --color-brand-800: hsla(13, 80%, 32%, 1);
  --color-brand-900: hsla(10, 86%, 26%, 1);

  /* Primary */
  --color-primary-5: hsla(198, 100%, 63%, 0.05);
  --color-primary-10: hsla(198, 100%, 63%, 0.1);
  --color-primary-20: hsla(198, 100%, 63%, 0.2);
  --color-primary-30: hsla(198, 100%, 63%, 0.3);
  --color-primary-40: hsla(198, 100%, 63%, 0.4);
  --color-primary-50: hsla(198, 100%, 63%, 0.5);
  --color-primary-60: hsla(198, 100%, 63%, 0.6);
  --color-primary-70: hsla(198, 100%, 63%, 0.7);
  --color-primary-80: hsla(198, 100%, 63%, 0.8);
  --color-primary-90: hsla(198, 100%, 63%, 0.9);
  --color-primary-100: hsla(183, 100%, 93%, 1);
  --color-primary-200: hsla(186, 100%, 85%, 1);
  --color-primary-300: hsla(191, 100%, 78%, 1);
  --color-primary-400: hsla(194, 100%, 72%, 1);
  --color-primary-500: var(--color-primary);
  --color-primary-600: hsla(202, 70%, 52%, 1);
  --color-primary-700: hsla(206, 69%, 42%, 1);
  --color-primary-800: hsla(210, 75%, 33%, 1);
  --color-primary-900: hsla(214, 82%, 26%, 1);

  /* Secondary */
  --color-secondary-5: hsla(216, 100%, 50%, 0.05);
  --color-secondary-10: hsla(216, 100%, 50%, 0.1);
  --color-secondary-20: hsla(216, 100%, 50%, 0.2);
  --color-secondary-30: hsla(216, 100%, 50%, 0.3);
  --color-secondary-40: hsla(216, 100%, 50%, 0.4);
  --color-secondary-50: hsla(216, 100%, 50%, 0.5);
  --color-secondary-60: hsla(216, 100%, 50%, 0.6);
  --color-secondary-70: hsla(216, 100%, 50%, 0.7);
  --color-secondary-80: hsla(216, 100%, 50%, 0.8);
  --color-secondary-90: hsla(216, 100%, 50%, 0.9);
  --color-secondary-100: hsla(207, 100%, 90%, 1);
  --color-secondary-200: hsla(209, 100%, 80%, 1);
  --color-secondary-300: hsla(211, 100%, 70%, 1);
  --color-secondary-400: hsla(213, 100%, 62%, 1);
  --color-secondary-500: var(--color-secondary);
  --color-secondary-600: hsla(219, 100%, 43%, 1);
  --color-secondary-700: hsla(221, 100%, 36%, 1);
  --color-secondary-800: hsla(223, 100%, 29%, 1);
  --color-secondary-900: hsla(226, 100%, 24%, 1);

  /* Accent */
  --color-accent-5: hsla(264, 100%, 60%, 0.05);
  --color-accent-50: hsla(264, 100%, 60%, 0.5);
  --color-accent-100: hsla(264, 100%, 98%, 1);
  --color-accent-200: hsla(260, 100%, 90%, 1);
  --color-accent-300: hsla(260, 100%, 80%, 1);
  --color-accent-400: hsla(260, 100%, 70%, 1);
  --color-accent-500: var(--color-accent);
  --color-accent-600: hsla(264, 100%, 50%, 1);
  --color-accent-700: hsla(264, 100%, 40%, 1);
  --color-accent-800: hsla(264, 100%, 20%, 1);
  --color-accent-900: hsla(264, 100%, 8%, 1);

  /* Success */
  --color-success-5: hsla(111, 66%, 55%, 0.05);
  --color-success-10: hsla(111, 66%, 55%, 0.1);
  --color-success-20: hsla(111, 66%, 55%, 0.2);
  --color-success-100: hsla(92, 90%, 92%, 1);
  --color-success-200: hsla(98, 90%, 84%, 1);
  --color-success-300: hsla(102, 81%, 75%, 1);
  --color-success-400: hsla(106, 72%, 66%, 1);
  --color-success-500: var(--color-success);
  --color-success-600: hsla(116, 61%, 45%, 1);
  --color-success-700: hsla(120, 67%, 36%, 1);
  --color-success-800: hsla(125, 74%, 28%, 1);
  --color-success-900: hsla(130, 81%, 22%, 1);

  /* Warning */
  --color-warning-5: hsla(30, 94%, 62%, 0.05);
  --color-warning-10: hsla(30, 94%, 62%, 0.1);
  --color-warning-100: hsla(42, 95%, 92%, 1);
  --color-warning-200: hsla(39, 97%, 85%, 1);
  --color-warning-300: hsla(36, 97%, 77%, 1);
  --color-warning-400: hsla(33, 95%, 71%, 1);
  --color-warning-500: var(--color-warning);
  --color-warning-600: hsla(27, 67%, 51%, 1);
  --color-warning-700: hsla(24, 69%, 42%, 1);
  --color-warning-800: hsla(21, 75%, 32%, 1);
  --color-warning-900: hsla(18, 82%, 26%, 1);

  /* Danger */
  --color-danger-5: hsla(21, 100%, 50%, 0.05);
  --color-danger-10: hsla(21, 100%, 50%, 0.1);
  --color-danger-20: hsla(21, 100%, 50%, 0.2);
  --color-danger-100: hsla(21, 100%, 93%, 1);
  --color-danger-200: hsla(16, 100%, 86%, 1);
  --color-danger-300: hsla(11, 100%, 78%, 1);
  --color-danger-400: hsla(6, 100%, 73%, 1);
  --color-danger-500: var(--color-danger);
  --color-danger-600: hsla(356, 70%, 53%, 1);
  --color-danger-700: hsla(351, 67%, 43%, 1);
  --color-danger-800: hsla(345, 73%, 33%, 1);
  --color-danger-900: hsla(341, 79%, 27%, 1);

  /* Neutral */
  --color-neutral-5: hsla(190, 8%, 50%, 0.05);
  --color-neutral-10: hsla(190, 8%, 50%, 0.1);
  --color-neutral-20: hsla(190, 8%, 50%, 0.2);
  --color-neutral-30: hsla(190, 8%, 50%, 0.3);
  --color-neutral-40: hsla(190, 8%, 50%, 0.4);
  --color-neutral-50: hsla(190, 8%, 50%, 0.5);
  --color-neutral-60: hsla(190, 8%, 50%, 0.6);
  --color-neutral-70: hsla(190, 8%, 50%, 0.7);
  --color-neutral-80: hsla(190, 8%, 50%, 0.8);
  --color-neutral-90: hsla(190, 8%, 50%, 0.9);
  --color-neutral-100: hsl(190, 8%, 98%);
  --color-neutral-200: hsl(190, 8%, 86%);
  --color-neutral-300: hsl(190, 8%, 74%);
  --color-neutral-400: hsl(190, 8%, 66%);
  --color-neutral-500: var(--color-neutral);
  --color-neutral-600: hsl(190, 8%, 38%);
  --color-neutral-700: hsl(202, 8%, 26%);
  --color-neutral-800: hsl(214, 8%, 14%);
  --color-neutral-900: hsl(226, 8%, 4%);

  --color-dark-darker: hsl(226, 16%, 4%);
  --color-dark: hsl(226, 24%, 8%);
  --color-dark-lighter: hsl(226, 32%, 16%);

  --color-dark-transparent-20: hsla(226, 24%, 8%, 0.2);

  --color-light-darker: hsl(0, 0%, 92%);
  --color-light: hsl(0, 0%, 100%);
  --color-light-lighter: hsl(0, 0%, 98%);

  --color-light-transparent-20: hsla(0, 0%, 100%, 0.2);

  /* General */
  --unit: 16px;
  --leading: 1.5;

  --scrollbar-size: 6px;
  --scrollbar-radius: 1rem;
  --scrollbar-backgroud: var(--color-brand);
}

html[mode='dark'] {
  --color-theme-darker: var(--color-dark-darker);
  --color-theme: var(--color-dark);
  --color-theme-lighter: var(--color-dark-lighter);

  --color-text-darker: var(--color-neutral-400);
  --color-text: var(--color-neutral-300);
  --color-text-lighter: var(--color-neutral-200);

  --color-divider-darker: var(--color-theme-darker);
  --color-divider: var(--color-theme-lighter);
  --color-divider-lighter: var(--color-neutral-100);

  --color-logo-darker: var(--color-neutral-300);
  --color-logo: var(--color-neutral-200);
  --color-logo-lighter: var(--color-neutral-100);

  --color-editor-text: var(--color-neutral-300);
  --color-editor-active-line-text: var(--color-neutral-200);

  --color-graph-edge-secondary: var(--color-primary-500);
  --color-graph-edge-main: var(--color-primary-20);
  --color-graph-edge-selected: var(--color-primary-500);
  --color-graph-edge-direct: var(--color-primary-20);

  --color-transparent-20: var(--color-dark-transparent-20);
}

html[mode='light'] {
  --color-theme-darker: var(--color-light-darker);
  --color-theme: var(--color-light);
  --color-theme-lighter: var(--color-light-lighter);

  --color-text-darker: var(--color-neutral-700);
  --color-text: var(--color-neutral-600);
  --color-text-lighter: var(--color-neutral-500);

  --color-divider-darker: var(--color-neutral-500);
  --color-divider: var(--color-neutral-200);
  --color-divider-lighter: var(--color-neutral-300);

  --color-logo-darker: var(--color-neutral-900);
  --color-logo: var(--color-neutral-800);
  --color-logo-lighter: var(--color-neutral-300);

  --color-editor-text: var(--color-neutral-600);
  --color-editor-active-line-text: var(--color-neutral-700);

  --color-graph-edge-secondary: var(--color-secondary-500);
  --color-graph-edge-main: var(--color-secondary-20);
  --color-graph-edge-selected: var(--color-secondary-500);
  --color-graph-edge-direct: var(--color-secondary-20);

  --color-transparent-20: var(--color-light-transparent-20);
}

html {
  width: 100%;
  height: 100%;
  font-size: var(--unit);
  line-height: var(--leading);
  font-weight: 600;
  background: var(--color-theme);
  color: var(--color-text);

  --color-editor: var(--color-theme);
  --color-overlay: var(--color-dark-darker);
}