:root {
  /**
   * Color
   */

  /* White */
  --white: hsl(220, 10%, 100%);
  --white-hover: color-mod(var(--white) shade(5%));
  --white-active: color-mod(var(--white) shade(10%));

  /* Black */
  --black: hsl(220, 10%, 0%);
  --black-hover: color-mod(var(--black) tint(20%));
  --black-active: color-mod(var(--black) tint(10%));

  /**
   * Shades
   */

  /* Light */
  --light: hsl(220, 10%, 85%);
  --light-hover: var(--light-400);
  --light-active: var(--light-600);
  --light-50: color-mod(var(--light-100) tint(50%) saturation(+1.25%));
  --light-100: color-mod(var(--light-200) tint(40%) saturation(+1.25%));
  --light-200: color-mod(var(--light-300) tint(30%) saturation(+1.25%));
  --light-300: color-mod(var(--light-400) tint(20%) saturation(+1.25%));
  --light-400: color-mod(var(--light) tint(10%) saturation(+1.25%));
  --light-500: var(--light);
  --light-600: color-mod(var(--light) shade(5%) saturation(+5%));
  --light-700: color-mod(var(--light-600) shade(10%) saturation(+5%));
  --light-800: color-mod(var(--light-700) shade(15%) saturation(+5%));
  --light-900: color-mod(var(--light-800) shade(20%) saturation(+5%));

  /* Grey */
  --grey: hsl(220, 10%, 40%);
  --grey-hover: var(--grey-400);
  --grey-active: var(--grey-600);
  --grey-50: color-mod(var(--grey-100) tint(30%) saturation(+2.5%));
  --grey-100: color-mod(var(--grey-200) tint(25%) saturation(+2.5%));
  --grey-200: color-mod(var(--grey-300) tint(20%) saturation(+2.5%));
  --grey-300: color-mod(var(--grey-400) tint(15%) saturation(+2.5%));
  --grey-400: color-mod(var(--grey) tint(10%) saturation(+2.5%));
  --grey-500: var(--grey);
  --grey-600: color-mod(var(--grey) shade(5%) saturation(+2.5%));
  --grey-700: color-mod(var(--grey-600) shade(10%) saturation(+2.5%));
  --grey-800: color-mod(var(--grey-700) shade(15%) saturation(+2.5%));
  --grey-900: color-mod(var(--grey-800) shade(20%) saturation(+2.5%));

  /* Dark */
  --dark: hsl(220, 10%, 20%);
  --dark-hover: var(--dark-400);
  --dark-active: var(--dark-600);
  --dark-50: color-mod(var(--dark-100) tint(30%) saturation(+2.5%));
  --dark-100: color-mod(var(--dark-200) tint(25%) saturation(+2.5%));
  --dark-200: color-mod(var(--dark-300) tint(20%) saturation(+2.5%));
  --dark-300: color-mod(var(--dark-400) tint(15%) saturation(+2.5%));
  --dark-400: color-mod(var(--dark) tint(10%) saturation(+2.5%));
  --dark-500: var(--dark);
  --dark-600: color-mod(var(--dark) shade(5%) saturation(+2.5%));
  --dark-700: color-mod(var(--dark-600) shade(10%) saturation(+2.5%));
  --dark-800: color-mod(var(--dark-700) shade(15%) saturation(+2.5%));
  --dark-900: color-mod(var(--dark-800) shade(20%) saturation(+2.5%));

  /**
   * Palette
   */

  /* Primary */
  --primary: hsl(220, 80%, 50%);
  --primary-hover: var(--primary-400);
  --primary-active: var(--primary-600);
  --primary-50: color-mod(var(--primary-100) tint(60%) saturation(+2.5%));
  --primary-100: color-mod(var(--primary-200) tint(40%) saturation(+2.5%));
  --primary-200: color-mod(var(--primary-300) tint(30%) saturation(+2.5%));
  --primary-300: color-mod(var(--primary-400) tint(20%) saturation(+2.5%));
  --primary-400: color-mod(var(--primary) tint(10%) saturation(+2.5%));
  --primary-500: var(--primary);
  --primary-600: color-mod(var(--primary) shade(15%) saturation(+2.5%));
  --primary-700: color-mod(var(--primary-600) shade(20%) saturation(+2.5%));
  --primary-800: color-mod(var(--primary-700) shade(25%) saturation(+2.5%));
  --primary-900: color-mod(var(--primary-800) shade(30%) saturation(+2.5%));

  /* Secondary */
  --secondary: hsl(270, 80%, 50%);
  --secondary-hover: var(--secondary-400);
  --secondary-active: var(--secondary-600);
  --secondary-50: color-mod(var(--secondary-100) tint(60%) saturation(+2.5%));
  --secondary-100: color-mod(var(--secondary-200) tint(50%) saturation(+2.5%));
  --secondary-200: color-mod(var(--secondary-300) tint(30%) saturation(+2.5%));
  --secondary-300: color-mod(var(--secondary-400) tint(20%) saturation(+2.5%));
  --secondary-400: color-mod(var(--secondary) tint(10%) saturation(+2.5%));
  --secondary-500: var(--secondary);
  --secondary-600: color-mod(var(--secondary) shade(15%) saturation(+2.5%));
  --secondary-700: color-mod(var(--secondary-600) shade(20%) saturation(+2.5%));
  --secondary-800: color-mod(var(--secondary-700) shade(25%) saturation(+2.5%));
  --secondary-900: color-mod(var(--secondary-800) shade(30%) saturation(+2.5%));

  /* Tertiary */
  --tertiary: hsl(320, 80%, 50%);
  --tertiary-hover: var(--tertiary-400);
  --tertiary-active: var(--tertiary-600);
  --tertiary-50: color-mod(var(--tertiary-100) tint(60%) saturation(+2.5%));
  --tertiary-100: color-mod(var(--tertiary-200) tint(50%) saturation(+2.5%));
  --tertiary-200: color-mod(var(--tertiary-300) tint(30%) saturation(+2.5%));
  --tertiary-300: color-mod(var(--tertiary-400) tint(20%) saturation(+2.5%));
  --tertiary-400: color-mod(var(--tertiary) tint(10%) saturation(+2.5%));
  --tertiary-500: var(--tertiary);
  --tertiary-600: color-mod(var(--tertiary) shade(15%) saturation(+2.5%));
  --tertiary-700: color-mod(var(--tertiary-600) shade(20%) saturation(+2.5%));
  --tertiary-800: color-mod(var(--tertiary-700) shade(25%) saturation(+2.5%));
  --tertiary-900: color-mod(var(--tertiary-800) shade(30%) saturation(+2.5%));

  /**
   * Indicators
   */

  /* Error */
  --error: hsl(0, 100%, 40%);
  --error-hover: var(--error-400);
  --error-active: var(--error-600);
  --error-50: color-mod(var(--error-100) tint(60%) saturation(+2.5%));
  --error-100: color-mod(var(--error-200) tint(50%) saturation(+2.5%));
  --error-200: color-mod(var(--error-300) tint(30%) saturation(+2.5%));
  --error-300: color-mod(var(--error-400) tint(20%) saturation(+2.5%));
  --error-400: color-mod(var(--error) tint(10%) saturation(+2.5%));
  --error-500: var(--error);
  --error-600: color-mod(var(--error) shade(15%) saturation(+2.5%));
  --error-700: color-mod(var(--error-600) shade(20%) saturation(+2.5%));
  --error-800: color-mod(var(--error-700) shade(25%) saturation(+2.5%));
  --error-900: color-mod(var(--error-800) shade(30%) saturation(+2.5%));

  /* Warning */
  --warning: hsl(20, 100%, 50%);
  --warning-hover: var(--warning-400);
  --warning-active: var(--warning-600);
  --warning-50: color-mod(var(--warning-100) tint(60%) saturation(+2.5%));
  --warning-100: color-mod(var(--warning-200) tint(50%) saturation(+2.5%));
  --warning-200: color-mod(var(--warning-300) tint(30%) saturation(+2.5%));
  --warning-300: color-mod(var(--warning-400) tint(20%) saturation(+2.5%));
  --warning-400: color-mod(var(--warning) tint(10%) saturation(+2.5%));
  --warning-500: var(--warning);
  --warning-600: color-mod(var(--warning) shade(15%) saturation(+2.5%));
  --warning-700: color-mod(var(--warning-600) shade(20%) saturation(+2.5%));
  --warning-800: color-mod(var(--warning-700) shade(25%) saturation(+2.5%));
  --warning-900: color-mod(var(--warning-800) shade(30%) saturation(+2.5%));

  /* Success */
  --success: hsl(120, 100%, 35%);
  --success-hover: var(--success-400);
  --success-active: var(--success-600);
  --success-50: color-mod(var(--success-100) tint(60%) saturation(+2.5%));
  --success-100: color-mod(var(--success-200) tint(50%) saturation(+2.5%));
  --success-200: color-mod(var(--success-300) tint(30%) saturation(+2.5%));
  --success-300: color-mod(var(--success-400) tint(20%) saturation(+2.5%));
  --success-400: color-mod(var(--success) tint(10%) saturation(+2.5%));
  --success-500: var(--success);
  --success-600: color-mod(var(--success) shade(15%) saturation(+2.5%));
  --success-700: color-mod(var(--success-600) shade(20%) saturation(+2.5%));
  --success-800: color-mod(var(--success-700) shade(25%) saturation(+2.5%));
  --success-900: color-mod(var(--success-800) shade(30%) saturation(+2.5%));

  /* Info */
  --info: hsl(200, 100%, 40%);
  --info-hover: var(--info-400);
  --info-active: var(--info-600);
  --info-50: color-mod(var(--info-100) tint(60%) saturation(+2.5%));
  --info-100: color-mod(var(--info-200) tint(50%) saturation(+2.5%));
  --info-200: color-mod(var(--info-300) tint(30%) saturation(+2.5%));
  --info-300: color-mod(var(--info-400) tint(20%) saturation(+2.5%));
  --info-400: color-mod(var(--info) tint(10%) saturation(+2.5%));
  --info-500: var(--info);
  --info-600: color-mod(var(--info) shade(15%) saturation(+2.5%));
  --info-700: color-mod(var(--info-600) shade(20%) saturation(+2.5%));
  --info-800: color-mod(var(--info-700) shade(25%) saturation(+2.5%));
  --info-900: color-mod(var(--info-800) shade(30%) saturation(+2.5%));
}